React Monolith to Independent Microfrontends
A practical guide to migrating a 100K-line React app to Vite + Module Federation microfrontends with independent deployments.
Executive Summary
A SaaS startup's Create-React-App monolith had 100K lines of code and 8 teams causing deployment bottlenecks. Using Vite + Module Federation, they decomposed it into 10 independent microfrontends over 7 months, reducing build time from 15 minutes to 2 minutes and enabling daily deployments per team.
Why Migrate React Monolith
The Create-React-App monolith had 8 teams contributing to the same codebase, causing daily merge conflicts and 15-minute build times. Any team's change could break the entire app, and deployments required full QA cycles.
- → 15-minute build time (developers waiting 1 hour daily)
- → Daily merge conflicts (8 teams, 200 PRs weekly)
- → Site-wide outages weekly (any team's bug)
- → Unable to adopt Vite (monolith locked to Webpack)
React Migration Readiness
The team spent 1 month preparing: migrating from CRA to Vite (first step), setting up Module Federation, and building the shell application.
- • Vite build tool (3x faster than Webpack)
- • Module Federation plugin for Vite (@originjs/vite-plugin-federation)
- • Shell application with routing (React Router)
- • Shared component library as npm package
- • CI/CD pipeline for independent deployments
React Monolith Assessment
The monolith had 100K lines of TypeScript, 300 components, 20 routes, and 8 Redux slices. The biggest bottlenecks were the admin dashboard (complex, rarely deployed) and the billing module (critical, frequent changes).
Technical Debt
- • 30% unused components (dead code, 500KB bundle waste)
- • Global Redux store (every reducer subscribed to all actions)
- • CRA's Webpack config hidden (ejected or overridden)
- • Inconsistent code patterns (class components + functional components mixed)
Risks
- • Redux state fragmentation across microfrontends
- • Shared dependency version mismatches (React 17 vs 18)
- • Performance overhead of multiple React roots
- • Team resistance to ownership model
Target Microfrontend Architecture
The target had 10 microfrontends: shell (host), auth, dashboard, products, cart, checkout, orders, billing, admin, reports. Each microfrontend had its own Vite build, independent deployment, and owned by a single team.
7-Month React Migration Plan
Step 1: Phase 1: Foundation (Month 1)
Migrated CRA to Vite (first step), set up Module Federation, built shell application.
Step 2: Phase 2: Pilot Microfrontends (Month 2)
Extracted admin and reports as first microfrontends—low risk, proved architecture.
Step 3: Phase 3: Core Features (Months 3-5)
Extracted products, cart, orders, and billing as independent microfrontends.
Step 4: Phase 4: Checkout (Months 6-7)
Extracted checkout (most complex)—final cutover to full microfrontends.
State Management Migration
The team replaced global Redux store with local React Context per microfrontend. Cross-microfrontend events used custom event dispatch.
- • React Context per microfrontend (no shared Redux store)
- • Custom events (window.dispatchEvent) for cross-microfrontend communication
- • Local storage for user session and preferences
- • Zustand for microfrontends needing complex local state
Common React Microfrontend Mistakes
Keeping global Redux store across microfrontends
Impact: Action collisions and performance degradation (weekly incidents)
Prevention: Local state per microfrontend; event bus for cross-domain events
Not migrating from CRA to Vite first
Impact: Webpack Module Federation slower and more complex
Prevention: Migrate to Vite as first step (faster builds, better DX)
Shared component library as microfrontend (overkill)
Impact: Added complexity without benefit; slower builds
Prevention: Shared components as npm package (simpler, sufficient)
No version strategy for React
Impact: Multiple React versions causing hook errors
Prevention: Share single React version via Module Federation (singleton: true)
Success Metrics for React Migration
Who Should Lead React Microfrontend Migration
Recommended Roles
Required Experience
- • Successfully migrated CRA to Vite (1+ project)
- • Module Federation experience (Webpack or Vite)
- • State management patterns (Context, Zustand)
- • Team coordination for 8+ engineers
Related Roles
Frequently Asked Questions
- Vite vs Webpack for Module Federation?
- Vite's faster builds (3x) and simpler config. Webpack has more features but slower. For most projects, Vite is sufficient.
- How to handle cross-microfrontend navigation?
- Shell handles top-level routing; microfrontends emit events to request navigation. Shell listens and updates URL.
- Can we use Next.js with Module Federation?
- Yes, Next.js 13+ supports Module Federation via @module-federation/nextjs-mf. Add complexity but possible.