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,6 +4,9 @@ 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'],
@@ -18,6 +21,9 @@ const ctx = await esbuild.context({
   loader: {
     '.svg': 'file'
   },
+  define: {
+    'process.env.BASEURL': JSON.stringify(baseurl)
+  },
   plugins: [
     htmlPlugin({
       files: [
@@ -31,7 +37,8 @@ const ctx = await esbuild.context({
       ]
     }),
     sassPlugin({})
-    ]
+  ],
+  publicPath: baseurl
 })
 
 if (serve) {
@@ -41,4 +48,5 @@ if (serve) {
   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

@@ -26,7 +26,7 @@ const App = () => {
       <CssBaseline />
 
       <Theme theme={muiTheme}>
-                <BrowserRouter>
+        <BrowserRouter basename={process.env.BASEURL}>
           <Sidebar />
 
           <Route path="/" component={Root} exact />