"Just npm run dev."
That one command starts 12 React applications on 12 different ports — all in parallel. No Docker. No separate terminal tabs. No manual startup scripts.
How? Turborepo + npm workspaces + Webpack 5 Module Federation.
I just published a step-by-step guide for setting up a React Micro Frontend monorepo from scratch. Every config comes from a production system with 11 React MFEs on ports 4000–4011.
What you'll build:
→ Root package.json with npm workspaces
→ turbo.json pipeline config (build, dev, start)
→ Host webpack.config.js — LOCAL and PRODUCTION (they're different!)
→ Remote MFE webpack.config.js — LOCAL and PRODUCTION
→ The async boundary pattern (import('./bootstrap')) and why it's required
→ Shared @myapp/store (Redux singleton) and @myapp/api (axios interceptors)
→ Host App.jsx with lazy-loaded routes for 11 MFEs
→ PostCSS + Tailwind config per MFE
→ Common mistakes table with 6 errors, causes, and fixes
Key insight: Local dev uses https://localhost:PORT/remoteEntry.js with mkcert certificates. Production uses /products/remoteEntry.js with Nginx routing. The webpack configs are significantly different — and most tutorials only show one.
Read the full guide:
https://blog.srinudesetti.in/micro-frontend/react/react-micro-frontend-monorepo-turborepo
Article 8 of 50 in my Micro Frontend series — this is the first article in Section 2 (React MFE). We're moving from fundamentals to hands-on implementation.
Top comments (1)
If you're building a new setup, do not lean into webpack built it version of federatin. Move over to the enhanced packages module-federation.io/guide/start/n... and ideally into Rspack :)