Fix SPA serving (#44)

PaackEng · Sep 16, 2021 · cd8e3b4 · cd8e3b4
1 parent d2f3682
commit cd8e3b4
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 19 deletions.
diff --git a/bin/serve.js b/bin/serve.js
@@ -2,16 +2,50 @@
 const path = require('path');
 const ElmPlugin = require('esbuild-plugin-elm');
 const EnvFilePlugin = require('./lib/env');
+const http = require('http');
 
-require('esbuild').serve(
-  {
-    servedir: 'web',
-    port: 1234,
-  },
-  {
-    entryPoints: ['web/ts/index.ts'],
-    outdir: 'web',
-    bundle: true,
-    plugins: [EnvFilePlugin, ElmPlugin({ debug: true })],
-  },
-);
+require('esbuild')
+  .serve(
+    {
+      servedir: 'web',
+    },
+    {
+      entryPoints: ['web/ts/index.ts'],
+      outdir: 'web',
+      bundle: true,
+      plugins: [EnvFilePlugin, ElmPlugin({ debug: true })],
+    },
+  )
+  .then((esbuildServer) => {
+    const { host, port } = esbuildServer;
+
+    http
+      .createServer((req, res) => {
+        const forwardRequest = (path) => {
+          const options = {
+            hostname: host,
+            port,
+            path,
+            method: req.method,
+            headers: req.headers,
+          };
+
+          const proxyReq = http.request(options, (proxyRes) => {
+            if (proxyRes.statusCode === 404) {
+              // If esbuild 404s the request, assume it's a route needing to
+              // be handled by the JS bundle, so forward a second attempt to `/`.
+              // https://gist.github.com/martinrue/2896becdb8a5ed81761e11ff2ea5898e
+              return forwardRequest('/');
+            }
+
+            res.writeHead(proxyRes.statusCode, proxyRes.headers);
+            proxyRes.pipe(res, { end: true });
+          });
+
+          req.pipe(proxyReq, { end: true });
+        };
+
+        forwardRequest(req.url);
+      })
+      .listen(1234);
+  });
diff --git a/example/.env.example b/example/.env.example
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
-ROLLBAR_TOKEN=''
-AUTH0_CLIENT_ID=''
-AUTH0_DOMAIN=''
-AUTH0_AUDIENCE=''
+export ROLLBAR_TOKEN=''
+export AUTH0_CLIENT_ID=''
+export AUTH0_DOMAIN=''
+export AUTH0_AUDIENCE=''
diff --git a/example/web/index.html b/example/web/index.html
@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="main"></div>
-    <script src="index.js"></script>
+    <script src="/index.js"></script>
   </body>
 </html>
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -3,7 +3,7 @@
 
 
 "@PaackEng/frontend-elm-kit@file:..":
-  version "2.1.0"
+  version "2.1.3"
   dependencies:
     elm-optimize-level-2 "^0.1.5"
     esbuild "^0.12.22"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@PaackEng/frontend-elm-kit",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "",
   "private": false,
   "files": [