Merge pull request #17 from LibreSplit/spa

Fix SPA routing on GitHub Pages

Author: JackTench

src/app/not-found.tsx

@@ -0,0 +1,10 @@
+import { PacmanLoader } from "react-spinners";
+
+export function NotFound() {
+  return (
+    <div className="flex h-screen flex-col items-center justify-center space-y-4">
+      <PacmanLoader color="#2196f3" />
+      <p>Not found.</p>
+    </div>
+  );
+}

src/router.tsx

@@ -1,12 +1,16 @@
 import { Converter } from "./app/converter";
 import { Home } from "./app/home";
+import { NotFound } from "./app/not-found";
 import { Route, Routes } from "react-router";
 
 export default function AppRouter() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/converter" element={<Converter />} />
+
+      {/* Fall back on app's 404 page. This is because of the SPA routing trick with 404.html used in GitHub Pages. */}
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 }

vite.config.ts

@@ -1,14 +1,16 @@
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react-swc";
+import fs from "fs";
 import path from "path";
-import { defineConfig } from "vite";
+import { type Plugin, defineConfig } from "vite";
 import sitemap from "vite-plugin-sitemap";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
+    copyIndexTo404(),
     sitemap({
       hostname: "https://libresplit.org",
       dynamicRoutes: ["/converter"],
@@ -25,3 +27,23 @@ export default defineConfig({
     },
   },
 });
+
+// Home spun plugin for copying index.html to 404.html at build time.
+// This makes SPA routing work on GitHub pages.
+function copyIndexTo404(): Plugin {
+  return {
+    name: "copy-index-to-404",
+    closeBundle() {
+      const distDir = path.resolve(__dirname, "dist");
+      const indexPath = path.join(distDir, "index.html");
+      const notFoundPath = path.join(distDir, "404.html");
+
+      if (fs.existsSync(indexPath)) {
+        fs.copyFileSync(indexPath, notFoundPath);
+        console.log("Copied index.html → 404.html for SPA fallback");
+      } else {
+        console.warn("⚠️ index.html not found in dist directory");
+      }
+    },
+  };
+}