React Micro Frontend Example (Module Federation)

This is an end-to-end micro frontend example using React, Vite, and Module Federation.

• shell app handles routing and shared state.
• products remote exposes the product catalog UI.
• cart remote exposes the cart UI.
• @mfe/contracts keeps TypeScript contracts shared and stable.

Architecture

• Host/Shell: apps/shell (port 5173)
• Remote 1: apps/products (port 5174)
• Remote 2: apps/cart (port 5175)

Runtime flow:

1. User opens shell (http://127.0.0.1:5173).
2. Shell lazy-loads products/ProductsPage and cart/MiniCart from remote entry files.
3. Products remote emits user intent via callback (onAddToCart).
4. Shell owns and updates cart state.
5. Shell passes state into Cart remote via props.

Why this is a proper-practice setup

• Independent deployable frontends with isolated responsibilities.
• Strong contracts (@mfe/contracts) to prevent drift between teams/apps.
• React.lazy + Suspense to keep load behavior explicit.
• Error boundaries around every remote to isolate failures.
• Strict TypeScript config and semantic, accessible HTML structure.
• Shared dependency version constraints in federation config to reduce runtime mismatch risk.

Project structure

react-microfrontend-example/
  apps/
    shell/
    products/
    cart/
  packages/
    contracts/

Prerequisites

• Node.js 20+
• Yarn 1.22+

Run locally

1. Install dependencies:

yarn install

2. Start remotes first (in separate terminals):

yarn dev:products
yarn dev:cart

These scripts run vite build --watch + vite preview for remotes. With @originjs/vite-plugin-federation, this is the reliable way to expose remoteEntry.js during local development.

3. Start shell:

yarn dev:shell

4. Open http://127.0.0.1:5173.

Alternative one-command startup:

yarn dev:all

Build

yarn build

Remote URL overrides

Shell uses these environment variables if provided:

• VITE_PRODUCTS_REMOTE_URL (default http://127.0.0.1:5174/assets/remoteEntry.js)
• VITE_CART_REMOTE_URL (default http://127.0.0.1:5175/assets/remoteEntry.js)

Example:

VITE_PRODUCTS_REMOTE_URL=https://products.example.com/assets/remoteEntry.js \
VITE_CART_REMOTE_URL=https://cart.example.com/assets/remoteEntry.js \
yarn dev:shell

Production hardening checklist

• Put all apps behind HTTPS.
• Configure CSP and security headers in your edge/proxy.
• Version remote contracts and avoid breaking changes.
• Add independent CI for each remote and contract tests in shell.
• Use observability (error tracking + metrics) for each remote and shell.