funny-blue

DDD routing pattern in monorepo

hi I want to achieve this type of routing in a monorepo (nx.dev) using tanstack router with file based routing

my-app/
├── apps/
│   └── web/                              # Main app (thin shell)
│       ├── app/
│       ├── lib/
│       │   └── route-loader.ts          
│       ├── package.json
│       └── tsconfig.json
│
├── packages/
│   ├── auth/                             # Authentication Domain
│   │   ├── pages/
│   │   │   ├── login/
│   │   │   │   └── index.tsx
│   │   │   ├── register/
│   │   │   │   └── index.tsx
│   │   │   └── profile/
│   │   │       └── index.tsx
│   │   ├── components/
│   │   ├── lib/
│   │   ├── package.json
│   │   └── tsconfig.json
│   │
│   ├── billing/                          # Billing Domain
│   │   ├── pages/
│   │   │   ├── pricing/
│   │   │   │   └── index.tsx
│   │   │   ├── checkout/
│   │   │   │   └── index.tsx
│   │   │   └── invoices/
│   │   │       └── index.tsx
│   │   ├── components/
│   │   ├── lib/
│   │   ├── package.json
│   │   └── tsconfig.json

my-app/
├── apps/
│   └── web/                              # Main app (thin shell)
│       ├── app/
│       ├── lib/
│       │   └── route-loader.ts          
│       ├── package.json
│       └── tsconfig.json
│
├── packages/
│   ├── auth/                             # Authentication Domain
│   │   ├── pages/
│   │   │   ├── login/
│   │   │   │   └── index.tsx
│   │   │   ├── register/
│   │   │   │   └── index.tsx
│   │   │   └── profile/
│   │   │       └── index.tsx
│   │   ├── components/
│   │   ├── lib/
│   │   ├── package.json
│   │   └── tsconfig.json
│   │
│   ├── billing/                          # Billing Domain
│   │   ├── pages/
│   │   │   ├── pricing/
│   │   │   │   └── index.tsx
│   │   │   ├── checkout/
│   │   │   │   └── index.tsx
│   │   │   └── invoices/
│   │   │       └── index.tsx
│   │   ├── components/
│   │   ├── lib/
│   │   ├── package.json
│   │   └── tsconfig.json

16 Replies

rival-black•2w ago

virtual file routes seem to be the only option here i guess

rival-black•2w ago

https://tanstack.com/router/latest/docs/framework/react/routing/virtual-file-routes

Virtual File Routes | TanStack Router React Docs

We'd like to thank the Remix team for . We've taken inspiration from their work and adapted it to work with TanStack Router's existing file-based route-tree generation. Virtual file routes are a power...

funny-blueOP•2w ago

is there any performance downside of using virtual routes.

rival-black•2w ago

absolutely not it's just a different way of instructing the code generator you could also build your own routing pattern by crawling the directories you have and feed this into the virtual file route setup (instead of manually listing the files)

funny-blueOP•2w ago

nice. one thing want to clear. if we have three modules. auth, billing, and public: so we only need this?

export const routes = rootRoute('root.tsx', [
    physical('/auth', '@repo/auth/pages'),
    physical('/billing', '@repo/billing/pages'),
    physical('/public', '@repo/public/pages'),
  ]),
])

export const routes = rootRoute('root.tsx', [
    physical('/auth', '@repo/auth/pages'),
    physical('/billing', '@repo/billing/pages'),
    physical('/public', '@repo/public/pages'),
  ]),
])

rival-black•2w ago

potentially yes not sure if the code generator can resolve the dirs like this might need explicit relative paths or we need to add module resolution to the code generator

funny-blueOP•2w ago

let me check even explicit relative paths are not working

export const routes = rootRoute('__root.tsx', [
  index('index.tsx'),
  physical('/auth', '../../packages/auth/routes'),
])

export const routes = rootRoute('__root.tsx', [
  index('index.tsx'),
  physical('/auth', '../../packages/auth/routes'),
])

😩 is there any code example of using virutal file routes

rival-black•2w ago

yeah never tried with paths outside the package might need some path tweaking can you please create a GitHub issue including a complete example repo ?

funny-blueOP•2w ago

sure what if we use code based routing for this use case? is there something missing in code based routing as it is not encouraged in docs?

fascinating-indigo•2w ago

Can you not create the router in the packages and export them ?

funny-blueOP•2w ago

are you referring code based routing?

fascinating-indigo•2w ago

no. Creating virtual routes in the packages and exporting them. export router = layout('pathlessLayout.tsx', [ route('/dashboard', 'app/dashboard.tsx', [ index('app/dashboard-index.tsx'), route('/invoices', 'app/dashboard-invoices.tsx', [ index('app/invoices-index.tsx'), route('$id', 'app/invoice-detail.tsx'), ]), ]), physical('/posts', 'posts'), ]), (I am sorry, I am on the ipad and could not find the backtick)

rival-black•2w ago

there is no automatic codesplitting for codebased routing I am pretty sure we can get this to work with virtual file routes. j I expect ust some path resolutions that needs fixing

funny-blueOP•2w ago

this also not working. because paths would be resolved once it is imported in main app. app/dashboard.tsx is resolved as apps/web/app/dashboard.tsx instead of packages/auth/app/dashboard.tsx https://github.com/TanStack/router/issues/4984 issue created

rival-black•2w ago

could you please provide an example repo i can just clone?

funny-blueOP•2w ago

https://github.com/htmujahid/tanstack-virtual-routes-monorepo updated github issue

Gaming

Programming

DDD routing pattern in monorepo

Did you find this page helpful?