Back to articles
React Micro Frontend Monorepo Setup with Turborepo

React Micro Frontend Monorepo Setup with Turborepo

via Dev.to ReactSrinu Web developer

"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/remote

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
7 views

Related Articles