Add routing to application

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"
   }

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)
 );

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>
+    );
+}

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",