We've recently started converting an existing monorepo from pure SPA (using react-router) to Tanstack Start / Tanstack Router. The existing monorepo has packages for specific page-groups, much like the Tanstack Router Monorepo basic. However, this example doesn't work with Tanstack Start. Is this setup possible with Tanstack Start? If so, is there an example? Currently our app works but without any route-type-safety / route context / etc (as thats all defined in the main app, not in a package).
#Using Tanstack Start in a monorepo
3 messages · Page 1 of 1 (latest)
Anyone? 🙁
Managed to get it working through a bit of a hack. @tanstack/start really requires a "router.tsx" file in the app package. But a monorepo basically moves that to another package. To get around this issue, simply create a proxy router.tsx file.
import { router, Link } from '@monorepo/router';
export function getRouter() {
router.routesById['/'].update({ component: TestComp });
return router;
}
function TestComp() {
return (<>This is a test <Link to="/">click me</Link></>);
}
Setup a router package like one of the @tanstack/react-router examples.
Then add this hack to the app-package vite.config.ts , because the tanstackStart still won't be satisfied (complaining about the lack of a routes folder), by using this plugin settings:
tanstackStart({ srcDirectory: './src', router: { routesDirectory: '../../../packages/router/src/routes', generatedRouteTree: '../../../packages/router/src/routeTree.gen.ts' }})
This will satisfy the tanstackStart plugin and you now have an actual mono repo with it's router separated from the app-package.
It feels hacky but it does the job.