From fd3274b5a94c7ae980b2c5bf3dcdc424100b3b04 Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Sun, 17 Apr 2022 13:58:46 -0400
Subject: [PATCH 1/2] Add Serving to Dev Env
- Adds the ability for live reloading and serving during development
- This PR is not ready until an esbuild plugin PR is merged
- Rename index.template.html => index.html
---
esbuild.config.mjs | 99 ++++----
example.env | 1 +
package.json | 4 +-
public/{index.template.html => index.html} | 4 +-
yarn.lock | 251 +++++++++++----------
5 files changed, 195 insertions(+), 164 deletions(-)
rename public/{index.template.html => index.html} (94%)
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index 88cd18da0..92db1dc00 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -7,8 +7,8 @@ import path from 'path'
import fs from 'fs'
import { fileURLToPath } from 'url'
import dotenv from 'dotenv'
-
import { build as compile } from 'esbuild'
+import { createServer } from 'esbuild-server'
import { htmlPlugin } from '@craftamap/esbuild-plugin-html'
import esbuildMxnCopy from 'esbuild-plugin-mxn-copy'
import aliasPlugin from 'esbuild-plugin-path-alias'
@@ -19,6 +19,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
const { version } = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json')))
const isDevelopment = Boolean(process.argv.includes('--dev'))
const isRelease = Boolean(process.argv.includes('--release'))
+const isServing = Boolean(process.argv.includes('--serve'))
const hasCustom = await (async function checkFolders(folder, isCustom = false) {
for (const file of await fs.promises.readdir(folder)) {
@@ -43,9 +44,12 @@ const plugins = [
{
entryPoints: ['src/index.jsx'],
filename: 'index.html',
- htmlTemplate: await fs.readFileSync('./public/index.template.html'),
+ htmlTemplate: await fs.readFileSync('./public/index.html'),
scriptLoading: 'defer',
favicon: './public/favicon/favicon.ico',
+ extraScripts: [
+ { src: '/esbuild-livereload.js', tags: ['async'] },
+ ],
},
],
}),
@@ -96,9 +100,9 @@ if (isDevelopment) {
WARNING:
Custom files aren't officially supported
Be sure to watch for breaking changes!
-
+
${customPaths.map((x, i) => ` ${i + 1}. src/${x.split('src/')[1]}`).join('\n')}
-
+
======================================================
`)
}
@@ -110,43 +114,60 @@ ${customPaths.map((x, i) => ` ${i + 1}. src/${x.split('src/')[1]}`).join('\n')}
console.log(`[BUILD] Building production version: ${version}`)
}
+const esbuild = {
+ entryPoints: ['src/index.jsx'],
+ legalComments: 'none',
+ bundle: true,
+ outdir: 'dist/',
+ publicPath: '/',
+ entryNames: isDevelopment ? undefined : '[name].[hash]',
+ metafile: true,
+ minify: isRelease || !isDevelopment,
+ logLevel: isDevelopment ? 'info' : 'error',
+ target: [
+ 'safari11',
+ 'chrome64',
+ 'firefox58',
+ 'edge88',
+ ],
+ watch: isDevelopment
+ ? {
+ onRebuild(error) {
+ if (error) console.error('Recompiling failed:', error)
+ else console.log('Recompiled successfully')
+ },
+ }
+ : false,
+ sourcemap: isRelease || isDevelopment,
+ define: {
+ inject: JSON.stringify({
+ ...env.parsed,
+ VERSION: version,
+ DEVELOPMENT: isDevelopment,
+ CUSTOM: hasCustom,
+ LOCALES: await fs.promises.readdir(`${__dirname}/public/locales`),
+ }),
+ },
+ plugins,
+}
+
try {
- await compile({
- entryPoints: ['src/index.jsx'],
- legalComments: 'none',
- bundle: true,
- outdir: 'dist/',
- publicPath: '/',
- entryNames: isDevelopment ? undefined : '[name].[hash]',
- metafile: true,
- minify: isRelease || !isDevelopment,
- logLevel: isDevelopment ? 'info' : 'error',
- target: [
- 'safari11',
- 'chrome64',
- 'firefox58',
- 'edge88',
- ],
- watch: isDevelopment
- ? {
- onRebuild(error) {
- if (error) console.error('Recompiling failed:', error)
- else console.log('Recompiled successfully')
+ if (isServing) {
+ if (!env.parsed.DEV_PORT) throw new Error('DEV_PORT is not set, in .env file, it should match the port you set in your config')
+ await createServer(
+ esbuild,
+ {
+ port: +env.parsed.DEV_PORT + 1,
+ static: 'public',
+ open: true,
+ proxy: {
+ '/': `http://localhost:${env.parsed.DEV_PORT}`,
},
- }
- : false,
- sourcemap: isRelease || isDevelopment,
- define: {
- inject: JSON.stringify({
- ...env.parsed,
- VERSION: version,
- DEVELOPMENT: isDevelopment,
- CUSTOM: hasCustom,
- LOCALES: await fs.promises.readdir(`${__dirname}/public/locales`),
- }),
- },
- plugins,
- })
+ },
+ ).start()
+ } else {
+ await compile(esbuild)
+ }
} catch (e) {
console.error(e)
process.exit(1)
diff --git a/example.env b/example.env
index 6637bc24e..4b5d0437f 100644
--- a/example.env
+++ b/example.env
@@ -6,3 +6,4 @@ SENTRY_AUTH_TOKEN=""
SENTRY_ORG=""
SENTRY_PROJECT=""
SENTRY_TRACES_SAMPLE_RATE=0.1
+DEV_PORT=""
\ No newline at end of file
diff --git a/package.json b/package.json
index 43740d62e..38c688d3e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"build": "yarn create-locales && node esbuild.config.mjs",
"server": "yarn create-area && yarn generate && yarn migrate:latest && node server/src/index.js",
"watch": "node esbuild.config.mjs --dev",
+ "serve": "node esbuild.config.mjs --dev --serve",
"dev": "nodemon server/src/index.js --watch server",
"generate": "node server/scripts/generateMasterfile.js",
"create-locales": "node server/scripts/createLocales.js",
@@ -31,10 +32,11 @@
"@craftamap/esbuild-plugin-html": "^0.3.1",
"@sentry/cli": "^1.73.0",
"dotenv": "^10.0.0",
- "esbuild": "^0.14.22",
+ "esbuild": "^0.14.36",
"esbuild-plugin-eslinter": "^0.1.2",
"esbuild-plugin-mxn-copy": "^1.0.1",
"esbuild-plugin-path-alias": "^1.0.3",
+ "esbuild-server": "^0.1.0",
"eslint": "^8.9.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-import-resolver-alias": "^1.1.2",
diff --git a/public/index.template.html b/public/index.html
similarity index 94%
rename from public/index.template.html
rename to public/index.html
index a8c7c1708..364db685a 100644
--- a/public/index.template.html
+++ b/public/index.html
@@ -3,7 +3,8 @@
-
+
Map
@@ -58,6 +59,7 @@
+