feat: serve the app under a base path

src/lib/api-client.ts

@@ -1,4 +1,4 @@
-const API_ROOT = '/api'
+const API_ROOT = `${import.meta.env.BASE_URL}api`
 
 class ApiError extends Error {
   readonly status: number

src/main.tsx

@@ -9,7 +9,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } },
 })
 
-const router = createRouter({ routeTree })
+const router = createRouter({ routeTree, basepath: import.meta.env.BASE_URL })
 
 declare module '@tanstack/react-router' {
   interface Register {

vite-plugin-mock-api.ts

@@ -34,8 +34,12 @@ const mockApiPlugin = (): Plugin => {
     const module = await server.ssrLoadModule(HANDLERS_MODULE)
     const middleware = createMiddleware(...(module.handlers as RequestHandler[]))
 
+    // This runs ahead of vite's own middleware, so requests still carry the base.
+    const apiRoot = `${server.config.base}api/`
     server.middlewares.use((request, response, next) => {
-      if (!request.url?.startsWith('/api/')) return next()
+      if (!request.url?.startsWith(apiRoot)) return next()
+      // The handlers are written against the root, as the test suite serves them.
+      request.url = request.url.slice(server.config.base.length - 1)
       addExpressAccessors(request as unknown as ExpressLikeRequest)
       return middleware(request, response, next)
     })

vite.config.ts

@@ -6,6 +6,8 @@ import { fileURLToPath } from 'node:url'
 import { mockApiPlugin } from './vite-plugin-mock-api.ts'
 
 export default defineConfig({
+  // Lets the app be served under a path, such as behind a proxy.
+  base: process.env.BASE_PATH ?? '/',
   plugins: [
     tanstackRouter({
       target: 'react',