Federated Remix app development, using module federation concepts on native import maps, providing runtime integration of independent Remix sites.
Built on Native Federation from @softarc/native-federation that provides a build tool agnostic and native browser approach to module federation.
> pnpm i
> pnpm run dev
Please see the status section.
- ✅ Runtime loading and sharing of routes between Remix sites
- ✅ Runtime sharing of code and components between Remix sites
- ✅ Mental Model of Module Federation
- ✅ Future Proof: Independent of build tools like webpack
- ✅ Embraces Import Maps and EcmaScript modules
The demo application follows a similar architecture to that outlined by the Cloudflare team at https://blog.cloudflare.com/better-micro-frontends/ and the source for the above diagram.
Each independently hosted micro-frontend can be responsible for parts of the route tree. Requests go to the root host application and are proxied through to the other remotes/hosts to fulfill the request and compose the UI.
To achieve this in Remix the root Host defines a splat route that matches the base path for one of its remotes e.g. /blog/*
. The splat route will then proxy action/loader requests through to the remote application and dynamically load all the remote app's routes via Remix's route manifest file e.g. /blog/posts/1
, /blog/post/
.
(Experimental) This is currently just an experiment and proof of concept.
- Fix required pnpm patch of remix-run/react components and get vite plugin working instead.
- HMR of remotes.
- Solve lack of SSR for remote routes.