React Micro-Frontends Starter — Webpack 5 Module Federation, TypeScript and NPM Workspaces

Micro-frontends without the boilerplate tax

Splitting a large React application into independently deployable micro-frontends pays off, but the setup — Module Federation configs, shared dependencies, a shell application and libraries every team can use — is where most teams lose their first week. react-mf-starter is a production-ready boilerplate that has all of that wired up.

It combines React 18, TypeScript, Webpack 5 Module Federation and NPM Workspaces in a single monorepo: one host shell, two remote applications and four shared packages.

Architecture

react-mf-starter/
├── apps/                 # Micro-frontend applications
│   ├── container/        # HOST: the shell that stitches everything together
│   ├── home/             # REMOTE: domain micro-app (port 3001)
│   └── profile/          # REMOTE: domain micro-app (port 3002)
└── packages/             # Shared internal libraries
    ├── ui-components/    # Shared design system (buttons, inputs, ...)
    ├── shared-types/     # TypeScript interfaces and types
    ├── hooks/            # Shared React hooks (useAuth, ...)
    └── utils/            # Helpers (formatters, dates, ...)

The container loads the home and profile remotes at runtime, so each micro-app can be built and deployed on its own schedule without rebuilding the shell.

How it fits together

Runtime composition with Module Federation

The container declares its remotes:

remotes: {
  home: "home@http://localhost:3001/remoteEntry.js",
  profile: "profile@http://localhost:3002/remoteEntry.js",
}

and each remote exposes its root component:

exposes: {
  "./App": "./src/App",
}

One copy of React, always

React and React DOM are shared as singletons, so the page never loads two versions of React — the classic source of broken hooks and context in micro-frontend setups:

shared: {
  react: { singleton: true, requiredVersion: deps.react },
  "react-dom": { singleton: true, requiredVersion: deps["react-dom"] },
}

Shared libraries without publishing

NPM Workspaces link every package under packages/* into each app under apps/*. Teams share a design system, hooks, types and utilities during development without publishing anything to a registry:

import { Button } from "@packages/ui-components";

Quick start

Prerequisites: Node.js 16+ and npm 7+ (required for Workspaces).

git clone https://github.com/pravinharchandani/react-mf-starter.git
cd react-mf-starter

# Install everything from the root — workspaces link the shared packages
npm install

# Start the shell and both remotes
npm start

This launches the container shell on http://localhost:3000, the home remote on http://localhost:3001 and the profile remote on http://localhost:3002.

When to use it

• You're breaking up a React monolith and want teams to ship features independently.
• You need a shared design system and typed contracts between apps from day one.
• You want a working Module Federation reference to adapt to your own build and deployment pipeline.

License

MIT. Contributions are welcome — fork the project, create a feature branch, commit your changes and open a pull request.