https://github.com/jrestall/remix-federation
Federated Remix app development, built on native federation. (experiment)
https://github.com/jrestall/remix-federation
micro-frontends module-federation remix-run
Last synced: about 1 year ago
JSON representation
Federated Remix app development, built on native federation. (experiment)
- Host: GitHub
- URL: https://github.com/jrestall/remix-federation
- Owner: jrestall
- License: mit
- Created: 2023-10-21T03:28:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-15T08:39:27.000Z (about 2 years ago)
- Last Synced: 2025-06-02T19:19:54.725Z (about 1 year ago)
- Topics: micro-frontends, module-federation, remix-run
- Language: TypeScript
- Homepage:
- Size: 1.74 MB
- Stars: 44
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Remix Federation
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.
### Setup
```shell
> pnpm i
> pnpm run dev
```
Please see the [status](#status) section.
### Features
- ✅ 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
### Architecture
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](https://martinfowler.com/articles/micro-frontends.html) 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](https://remix.run/docs/en/main/file-conventions/routes#splat-routes) 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/`.
### Status
**(Experimental)** This is currently just an experiment and proof of concept.
### Future Work
- 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.
## License
[MIT](https://github.com/sveltejs/kit/blob/master/LICENSE)