Add Serving to Dev Env

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 env = fs.existsSync(`${__dirname}/.env`) ? dotenv.config() : { parsed: {}
 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: fs.readFileSync('./public/index.template.html'),
+        htmlTemplate: fs.readFileSync('./public/index.html'),
         scriptLoading: 'defer',
         favicon: './public/favicon/favicon.ico',
+        extraScripts: isServing ? [
+          { src: '/esbuild-livereload.js', attrs: { async: true } },
+        ] : undefined,
       },
     ],
   }),
@@ -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)

example.env

@@ -6,3 +6,4 @@ SENTRY_AUTH_TOKEN=""
 SENTRY_ORG=""
 SENTRY_PROJECT=""
 SENTRY_TRACES_SAMPLE_RATE=0.1
+DEV_PORT=""

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",
@@ -28,13 +29,14 @@
     "yarn": "1.22.x"
   },
   "devDependencies": {
-    "@craftamap/esbuild-plugin-html": "^0.3.1",
+    "@craftamap/esbuild-plugin-html": "^0.4.0",
     "@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",

public/index.template.html → public/index.html

@@ -3,7 +3,8 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <title>Map</title>
@@ -58,6 +59,7 @@ <h4 class="loading-text">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
+
 </body>
 
 </html>