From edcf7126dbefd9cc450302cfb2b8e30f579c14f1 Mon Sep 17 00:00:00 2001
From: Anya Wallace <anya.wallace@alleninstitute.org>
Date: Tue, 14 May 2024 15:12:53 -0700
Subject: [PATCH] Add router to web

---
 packages/web/package.json              |  1 +
 packages/web/src/index.tsx             | 15 ++++++++++++++-
 packages/web/src/routes/Root/index.tsx | 10 ++++++++++
 packages/web/webpack/webpack.config.js |  1 +
 4 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 packages/web/src/routes/Root/index.tsx

diff --git a/packages/web/package.json b/packages/web/package.json
index 270d211ac..d49040554 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@duckdb/duckdb-wasm": "1.28.1-dev106.0",
+    "react-router-dom": "^6.23.1",
     "regenerator-runtime": "0.13.x",
     "semver": "7.3.x"
   }
diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx
index 64e31d811..9fe51a04d 100644
--- a/packages/web/src/index.tsx
+++ b/packages/web/src/index.tsx
@@ -4,6 +4,7 @@ import { memoize } from "lodash";
 import * as React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import NotificationServiceWeb from "./services/NotificationServiceWeb";
 import PersistentConfigServiceWeb from "./services/PersistentConfigServiceWeb";
@@ -14,6 +15,7 @@ import FmsFileExplorer from "../../core/App";
 import { createReduxStore } from "../../core/state";
 import FileViewerServiceWeb from "./services/FileViewerServiceWeb";
 import FileDownloadServiceWeb from "./services/FileDownloadServiceWeb";
+import Root from "./routes/Root";
 
 const APP_ID = "fms-file-explorer-web";
 
@@ -54,9 +56,20 @@ const collectPlatformDependentServices = memoize(() => ({
     persistentConfigService,
 }));
 
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Root />, // Splash page placeholder
+    },
+    {
+        path: "app",
+        element: <FmsFileExplorer platformDependentServices={collectPlatformDependentServices()} />,
+    },
+]);
+
 render(
     <Provider store={createReduxStore()}>
-        <FmsFileExplorer platformDependentServices={collectPlatformDependentServices()} />
+        <RouterProvider router={router} />
     </Provider>,
     document.getElementById(APP_ID)
 );
diff --git a/packages/web/src/routes/Root/index.tsx b/packages/web/src/routes/Root/index.tsx
new file mode 100644
index 000000000..08b46822d
--- /dev/null
+++ b/packages/web/src/routes/Root/index.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+// Placeholder for the splash page
+export default function Root() {
+    return (
+        <div>
+            <h1> Coming soon </h1>
+        </div>
+    );
+}
diff --git a/packages/web/webpack/webpack.config.js b/packages/web/webpack/webpack.config.js
index 5234c3377..d9dc42f81 100644
--- a/packages/web/webpack/webpack.config.js
+++ b/packages/web/webpack/webpack.config.js
@@ -10,6 +10,7 @@ module.exports = ({ analyze, production } = {}) => ({
     devServer: {
         host: devServer.host,
         port: devServer.port,
+        historyApiFallback: true,
     },
     entry: {
         app: "./src/index.tsx",