Skip to content

jrestall/remix-federation

Repository files navigation

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

> pnpm i
> pnpm run dev

Please see the 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 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/.

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

About

Federated Remix app development, built on native federation.

Topics

Resources

License

Stars

Watchers

Forks