React Module Federation template
A microfrontend host and remotes, federated over Vite.
npx create-nx-workspace@latest my-workspace --template nrwl/react-mfe-template
A microfrontend architecture: a host that composes independently deployable remotes using Vite-powered Module Federation (the consumer and provider generators in @nx/react). Each remote is its own Nx project with its own pipeline, while shared libraries keep the look and feel consistent.
Highlights
Independently deployable
A host shell consumes remotes at runtime so teams can ship their slice of the app on their own cadence.
Federated over Vite
Module Federation configured with Vite for fast dev servers and lean production bundles.
Built for many teams
A microfrontend graph is a strong fit for Nx Cloud distribution - build and test every remote in parallel.
Quickstart
- Serve the host (consumer):
Terminal window npx nx run shell:dev - Serve a remote (provider):
Terminal window npx nx run shop:dev - Build every project:
Terminal window npx nx run-many -t build - Visualize your monorepo's graph in the browser:
Terminal window npx nx graph
What's inside
apps/shell- host applicationapps/shop, apps/cart- federated remotespackages/ui- shared design system used across the host and remotes
Speed up CI with Nx Cloud
Connect this monorepo to Nx Cloud to share one remote cache across your team and CI, and distribute tasks across machines as it grows.
- Remote caching shared across your team and CI
- Distributed task execution with Nx Agents
- Automated e2e test splitting
- CI that detects failures and proposes fixes
