TanStack router setup

packages/webapp/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.tanstack

packages/webapp/package.json

@@ -17,6 +17,7 @@
     "@effect/platform": "^0.90.9",
     "@effect/platform-browser": "^0.70.0",
     "@effect/rpc": "^0.69.2",
+    "@tanstack/react-router": "^1.131.48",
     "@website/common": "workspace:*",
     "effect": "^3.17.13",
     "effect-fc": "^0.1.3",
@@ -25,6 +26,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.35.0",
+    "@tanstack/react-router-devtools": "^1.131.48",
+    "@tanstack/router-plugin": "^1.131.48",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.2",

packages/webapp/src/App.tsx

@@ -1,3 +0,0 @@
-export function App() {
-    return <p>WIP</p>
-}

packages/webapp/src/main.tsx

@@ -1,10 +1,19 @@
+import { createRouter, RouterProvider } from "@tanstack/react-router"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { App } from "./App"
+import { routeTree } from "./routeTree.gen"
 
 
+const router = createRouter({ routeTree })
+
+declare module "@tanstack/react-router" {
+    interface Register {
+        router: typeof router
+    }
+}
+
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <App />
+        <RouterProvider router={router} />
     </StrictMode>
 )

packages/webapp/src/routeTree.gen.ts

@@ -0,0 +1,59 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

packages/webapp/src/routes/__root.tsx

@@ -0,0 +1,12 @@
+import { Outlet, createRootRoute } from "@tanstack/react-router"
+
+
+export const Route = createRootRoute({
+    component: RootComponent,
+})
+
+function RootComponent() {
+    return <>
+        <Outlet />
+    </>
+}

packages/webapp/src/routes/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+
+export const Route = createFileRoute("/")({
+    component: RouteComponent,
+})
+
+function RouteComponent() {
+    return <div>Hello "/"!</div>
+}

packages/webapp/vite.config.ts

@@ -1,10 +1,18 @@
+import { tanstackRouter } from "@tanstack/router-plugin/vite"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 
 
 // https://vite.dev/config/
 export default defineConfig({
-    plugins: [react()],
+    plugins: [
+        tanstackRouter({
+            target: "react",
+            autoCodeSplitting: true,
+        }),
+        react(),
+    ],
+
     server: {
         host: true,
         port: 80,