Usage with module federation
I'm currently exploring using this library to replace react-router in my organizations primary web application, which is actually a series of React clients that are brought together with in an App Shell via module federation to provide a seamless SPA experience while allowing for multiple projects to be maintain and deployed independently. Looking at the docs for this project, I get the sense that the entire route tree wold have to be statically defined across all the entire series of applications, is that correct? Would it not be possible to define child routes and then asynchronously imported them dynamically into an app shell via dynamic imports? Currently, react-router does allow us to leverage module federation to load child routes dynamically as the federated modules are loaded, but they are defined in JSX like any other react component. It does also look like the direction react-router is moving to support their data APIs is not very different from the API of this library and, as such, might render a similar situation. Any guidance or suggestions on this topci would be grealty appreciated
8 Replies
compatible-crimson•2y ago
Any luck getting module federation working?
grumpy-cyan•2y ago
I'm also keen to see how others implement this. Having a recipe for this would be legendary. I'm using nx.dev for my module-federation apps where there is a single host app where each route renders one of my many remote apps (each with their own sub routes).
extended-salmon•10mo ago
@Barry Michael Doyle @bigdaddyd1994 @ehaddy sorry for bothering you but did you guys get any luck setting up the tanstack router with module federation.
I'm trying to setup turborepo with module federation and I have two vite apps. That's what I want to achieve but no luck until now
there is a single host app where each route renders one of my many remote apps (each with their own sub routes).jolly-crimson•9mo ago
Hi guys, I hope i'm not too late... Here's a simple solution. I think it could fit your needs : https://github.com/Khyonn/tanstackrouter-modulefederation
re-updated the repo, on my first try, useSearch and useParams didn't work for aggregated subapps
harsh-harlequin•9mo ago
I guess I've been at war with module federation
How do you guys deploy your micro-frontends? Are you using nginx? Does each micro-frontend have it's own subdomain?
If so... I have some ideas that could work...
Essentially it would involve an nginx config that maps a subdomain (segment) to a base path for your app, and each micro-frontend is a full version of the app. NX need not apply, but could still be useful for other reasons. Essentially the entire app would get deployed to each "micro-frontend", but perhaps in the router, it would enforce that a given base path can only load via a certain subdomain..
I would say, overall, typescript just isn't truly compatible with module federation. Not that the two can't mix, there are ways, but when it comes to tanstack router, (really not to throw shade, seriously) it seems like a little bit of a lost cause.
At my last job, we had our-team-mfe-A.bank.com, and our-team-mfe-B.bank.com. Nobody seemed to really even notice if we had different subdomains for different apps appearing in the users url bar. But if they did want to have a unified subdomain, I was ready to setup an nginx config that proxies from our-team-mfe-host.bank.com/mfe-A to our-team-mfe-A.bank.com/mfe-A.
Overall, I believe two approaches are worth exploring:
1. Essentially avoid module federation (See my previous message)
2. Build tooling to get the specific benefits you are looking for (i.e. a link-checking utility)
#### A link-checking "utility"
Maybe each micro-frontend "app" can share some static type defs for it's available urls that other apps can link to. Lets imagine we had that, and now have a 10 year-old tanstack monolith. Now we want to start changing urls. Fortunately, tsr is great at handling frontend redirects. But it would be easy for a junior dev/new hire to not understand the some changes they make could require adding redirects, and/or deploying more micro-frontends, etc, because there may not be sufficient visibility into what is deployed.
Another approach to the link-checking utility would be totally agnostic to tsr, but tsr could pioneer something here. Each site could publish some sort of urls.d.ts file (i.e. google.com/urls.d.ts) but we almost want a deno-style
import googleUrls from 'google.com/urls' thing. What we could do with todays tech is, each site publishes an npm package with it's available urls.genetic-orange•4mo ago
@Khyonn sorry if this isn't the place to post/ask this but the example app you provided doesn't work. If I knew how to fix it I would let you know. I'm getting close with something similar but it's really convoluted at the moment. I've tried both file routing and code-based.
The issue with your repo is that when you try navigating to the sub-routes, you get a "Not Found" component. I've been running into this same problem with my own solutions
jolly-crimson•4mo ago
Is this the behaviour on the first time you're loading the page (like if you refresh, does the issue still remains) ? If so, sometimes, it depends on the moment the devserver is running. Else, have you check dependencies versions ?
genetic-orange•4mo ago
Oh yeah. After refresh it seems to work!