/remix-federation

Federated Remix app development, built on native federation.

Primary LanguageTypeScriptMIT LicenseMIT

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