SingleSPA and tanstack router
We have a rather large collection of Reactjs micro frontends that are orchestrated by a framework agnostic (vanilla) single spa root config using SystemJS that has base routes to determine which micro frontend should mount at what path. Inside each microfrontend we are currently utilizing react router for the inner routes.
Example
Our customers MFE is mounted by the root config when the path of the user is /customers. Inside the customers MFE we have routes for /customers (a page to render a list of customers), /customers/:id (a details page about the customer), /customers/:id/events, /customers/:id/prices, etc...
Does anyone have any experiences migrating such a set up to tanstack router or are there specific things we should take into account? Would a file based routing in each microfrontend be worth it?
We are a bit stuck to systemjs with this and therefore we cannot probably enjoy vite (only roll up and webpack support building systemjs format unfortunately)
2 Replies
foreign-sapphire•2y ago
I don't believe we've had anyone so far share any experiences with the type of setup you are running.
But with regards, to the file-based routing, its mostly there to reduce the amount of verbose config that is required for setting up Tanstack Router in a type-safe way.
You could always, use it in the code-based configuration approach.
The file-based approach just uses the Vite plugin (which is just a wrapper for the router-cli) to correctly perform the routeTree generation and code-splitting without spending the time writing out the config.
Since you don't have vite, the router-cli can still be invoked without it by running
tsr generate with the @tanstack/router-cli package installed.
There is a certain level "it depends" with this though, since it linchs on how you've got your project set up.quickest-silverOP•2y ago
Thanks for sharing your thoughts