T
TanStack•11mo ago
sensitive-blue

Using virtual routes to load routes from an external package

I do not see why this would not work (I will test later), but, can we do something like 
const virtualRouteConfig = rootRoute('root.tsx', [
  physical('/node_modules/my-package/routes/', '/namespace'),
  physical('/', '/'),
]);
const virtualRouteConfig = rootRoute('root.tsx', [
  physical('/node_modules/my-package/routes/', '/namespace'),
  physical('/', '/'),
]);
?
3 Replies
sensitive-blue
sensitive-blueOP•11mo ago
I want to define some common routes in a package, so then I can mount them on a "namespaced" sub route tree in multiple projects. Is this possible? Or should all routes be inside of the path defined by routesDirectory? or can I use the tanstack vite plugin to somehow generate a route tree without a root route? so I can then add it to the generated routeTree from routeTree.gen.ts?
correct-apricot
correct-apricot•11mo ago
currently, paths have to be relative to the routes directory. we could enhance this though
sensitive-blue
sensitive-blueOP•11mo ago
Should I open a discussion on github or anything? As I do not know which approach would be best for this either. But I can provide more context about my use case. On a work project, our APIs look smth like 
GET /introspect/$contentType // Gives configuration info about $contentType
GET /content-type/$contentType // Get all resources with $contentType
POST /content-type/$contentType // Create a resource on $contentType
GET /content-type/$contentType/$objectId // Get a single resource with $contentType
PATCH /content-type/$contentType/$objectId // Update a single resource
DELETE /content-type/$contentType/$objectId // Delete a single resource
GET /introspect/$contentType // Gives configuration info about $contentType
GET /content-type/$contentType // Get all resources with $contentType
POST /content-type/$contentType // Create a resource on $contentType
GET /content-type/$contentType/$objectId // Get a single resource with $contentType
PATCH /content-type/$contentType/$objectId // Update a single resource
DELETE /content-type/$contentType/$objectId // Delete a single resource
This is standardized between many projects, I want to be able to provide the list/add/update routes from a common package, which will create the routes with the logic for the loaders and rendering and then I just want to inject those routes somewhere in the project's route tree (generated by the tanstack plugin). I think I can achieve this if I define those routes in the package using code based routes, then I append them to the file based ones defined by the tanstack plugin in the routeTree.gen.ts file (And if you worry about the applicability of it, the backend defines what the frontend renders, by providing the columns to render in a table and a RJSF form for create/update)

Did you find this page helpful?