Handle base urls nicely

.github/workflows/build.yaml

@@ -19,7 +19,7 @@ jobs:
       - uses: DeterminateSystems/magic-nix-cache-action@main
 
       - name: Build project
-        run: nix build
+        run: nix build .#erratic-gate-github-pages
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2

build.js

@@ -4,41 +4,49 @@ import { sassPlugin } from 'esbuild-sass-plugin'
 import * as fs from 'fs'
 
 const serve = process.env.ESBUILD_SERVE === '1'
+const baseurl = process.env.ESBUILD_BASEURL
+
+console.log(`Building with baseurl ${baseurl}`)
 
 const ctx = await esbuild.context({
-    entryPoints: ['src/index.ts'],
-    minify: !serve,
-    bundle: true,
-    metafile: true,
-    splitting: true,
-    outdir: 'dist',
-    format: 'esm',
-    target: ['es2020'],
-    assetNames: 'assets/[name]-[hash]',
-    loader: {
-        '.svg': 'file'
-    },
-    plugins: [
-        htmlPlugin({
-            files: [
-                {
-                    filename: 'index.html',
-                    entryPoints: ['src/index.ts'],
-                    favicon: 'public/favicon.ico',
-                    htmlTemplate: 'public/index.html',
-                    scriptLoading: 'module'
-                }
-            ]
-        }),
-        sassPlugin({})
-    ]
+  entryPoints: ['src/index.ts'],
+  minify: !serve,
+  bundle: true,
+  metafile: true,
+  splitting: true,
+  outdir: 'dist',
+  format: 'esm',
+  target: ['es2020'],
+  assetNames: 'assets/[name]-[hash]',
+  loader: {
+    '.svg': 'file'
+  },
+  define: {
+    'process.env.BASEURL': JSON.stringify(baseurl)
+  },
+  plugins: [
+    htmlPlugin({
+      files: [
+        {
+          filename: 'index.html',
+          entryPoints: ['src/index.ts'],
+          favicon: 'public/favicon.ico',
+          htmlTemplate: 'public/index.html',
+          scriptLoading: 'module'
+        }
+      ]
+    }),
+    sassPlugin({})
+  ],
+  publicPath: baseurl
 })
 
 if (serve) {
-    const { port, host } = await ctx.serve({ servedir: 'dist' })
-    console.log(`Serving on ${host}:${port}`)
+  const { port, host } = await ctx.serve({ servedir: 'dist' })
+  console.log(`Serving on ${host}:${port}`)
 } else {
-    await ctx.rebuild()
-    await ctx.dispose()
-    fs.cpSync('./dist/index.html', './dist/404.html') // Needed to please github pages
+  await ctx.rebuild()
+  await ctx.dispose()
+  fs.cpSync('./dist/index.html', './dist/404.html') // Needed to please github pages
+  console.log(`Project bundled successfully`)
 }

flake.nix

@@ -15,12 +15,18 @@
           src = pkgs.lib.cleanSource ./.;
           npmDepsHash = "sha256-f5mw6IjkhZgsIuzCz9d7DvoAdceY1y+yWXn1BOonsVI=";
 
+          ESBUILD_BASEURL = "";
+
           installPhase = ''
             mkdir $out
             cp -r dist $out/www
           '';
         };
 
+        packages.erratic-gate-github-pages = packages.erratic-gate.overrideAttrs {
+          ESBUILD_BASEURL = "/erratic-gate";
+        };
+
         packages.default = packages.erratic-gate;
 
         devShells.default =

src/modules/core/components/App.tsx

@@ -17,36 +17,36 @@ import { loadSubject } from '../subjects/loadedSubject'
 import LogicGateInfoPage from '../../logic-gate-info/components/LogicGateInfoPage'
 
 const App = () => {
-    useEffect(() => {
-        loadSubject.next(true)
-    })
+  useEffect(() => {
+    loadSubject.next(true)
+  })
 
-    return (
-        <>
-            <CssBaseline />
+  return (
+    <>
+      <CssBaseline />
 
-            <Theme theme={muiTheme}>
-                <BrowserRouter>
-                    <Sidebar />
+      <Theme theme={muiTheme}>
+        <BrowserRouter basename={process.env.BASEURL}>
+          <Sidebar />
 
-                    <Route path="/" component={Root} exact />
-                    <Route path="/gates" component={LogicGatePage} />
-                    <Route path="/info/:name" component={LogicGateInfoPage} />
-                </BrowserRouter>
-            </Theme>
+          <Route path="/" component={Root} exact />
+          <Route path="/gates" component={LogicGatePage} />
+          <Route path="/info/:name" component={LogicGateInfoPage} />
+        </BrowserRouter>
+      </Theme>
 
-            <ToastContainer
-                position="top-left"
-                autoClose={5000}
-                hideProgressBar={false}
-                newestOnTop={false}
-                closeOnClick
-                rtl={false}
-                draggable
-                pauseOnHover
-            />
-        </>
-    )
+      <ToastContainer
+        position="top-left"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        draggable
+        pauseOnHover
+      />
+    </>
+  )
 }
 
 export default App