foreign-sapphire

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

deep-jade•4mo ago

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

deep-jade•4mo 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...

foreign-sapphireOP•4mo ago

is there any performance downside of using virtual routes.

deep-jade•4mo 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)

foreign-sapphireOP•4mo 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'),
  ]),
])

deep-jade•4mo 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

foreign-sapphireOP•4mo 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

deep-jade•4mo 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 ?

foreign-sapphireOP•4mo 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?

conscious-sapphire•4mo ago

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

foreign-sapphireOP•4mo ago

are you referring code based routing?

conscious-sapphire•4mo 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)

deep-jade•4mo 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

foreign-sapphireOP•4mo 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

deep-jade•4mo ago

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

foreign-sapphireOP•4mo 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?