DEV Community: Srinu Web developer

Webpack Module Federation — Complete Guide for Micro Frontends

Srinu Web developer — Mon, 06 Apr 2026 11:16:01 +0000

Error: Invalid hook call. Hooks can only be called inside
       the body of a function component.

You've seen this error. Your component works in isolation. But the moment you load it as a Module Federation remote inside the host — hooks crash.

The cause: React loaded twice. Module Federation shared your component code, but not React itself. Two React instances mean two internal state trees, and hooks break immediately.

The fix is one line — singleton: true — but Module Federation has 5 more configuration traps that will bite you in production:

Remote URLs change completely between local (https://localhost:4002/remoteEntry.js) and production (/products/remoteEntry.js)
publicPath must match the reverse proxy route — mismatch = 404 on every chunk after remoteEntry.js loads
The bootstrap pattern is required — without import("./bootstrap"), shared deps fail before negotiation happens
remoteEntry.js is NOT your bundle — it's a ~5KB manifest that registers window.Products for on-demand chunk loading
requiredVersion doesn't enforce — with singleton, the first-loaded version always wins. It only warns.

I wrote a complete guide with real webpack configs for host and remote (both local dev and production), all exposed modules mapped, shared dependency configuration with the singleton pattern, how remoteEntry.js works step by step, and a debugging checklist for the 5 most common errors.

Read the full guide with code examples → https://blog.srinudesetti.in/micro-frontend/react/webpack-module-federation-complete-guide

Tailwind CSS in Micro Frontend Monorepo — Setup Guide

Srinu Web developer — Sun, 05 Apr 2026 11:09:52 +0000

// Production build output:
// styles.css — 0 classes generated
// ERROR: @tailwind directives treated as plain text

This happens when you set up Tailwind CSS in a micro frontend monorepo the same way you would in a standard React app. It does not work that way.

Each MFE is an independent Webpack build. Tailwind is a PostCSS plugin that runs at build time inside postcss-loader. A single root-level tailwind.config.js will NOT be resolved by apps in apps/products/ — each app needs its own.

The content paths also differ between host and remote MFEs. The host scans ./src/**, ./public/**, and ./index.html. Remotes only scan ./src/** and ./src/index.html because they are loaded into the host at runtime.

What the full guide covers:

Step-by-step installation — root + per-app dependencies with npm workspaces
Per-MFE tailwind.config.js — host vs remote content path differences
PostCSS + Webpack wiring — the 3-loader chain (MiniCssExtractPlugin -> css-loader -> postcss-loader)
Why CSS is NOT shared via Module Federation — build-time vs runtime
Shared Tailwind presets — consistent theming without duplicating configs
CSS isolation with prefix — when and why to use it
5 common mistakes — wrong content paths, root-level config, missing postcss-loader, and more

Read the full guide with code examples from a real production monorepo:
https://blog.srinudesetti.in/micro-frontend/react/tailwind-css-micro-frontend-monorepo

Webpack 5 Configuration for Micro Frontends — Complete Guide

Srinu Web developer — Sun, 29 Mar 2026 09:37:41 +0000

publicPath: "https://localhost:4002/"

That one line cost me 3 hours in production. Every chunk after remoteEntry.js returned 404. The fix? Change it to publicPath: "/products/".

The Webpack config you use for local Micro Frontend development is fundamentally different from what you deploy. 7 settings change between environments, and most tutorials only show one config.

What this article covers

Every section of the Webpack 5 config for Micro Frontends, shown TWICE — local development AND production — side by side:

Entry & Output

Host uses publicPath: "/" in both environments
Remotes use https://localhost:PORT/ locally, /mfe-name/ in production
Production adds [contenthash] for long-term caching

Babel Loader

Standard: only processes src/
Monorepo: MUST include ../../packages for shared package JSX
Forgetting this = SyntaxError: Unexpected token < at runtime

Dev Server

Local: HTTPS (mkcert), CORS headers (Access-Control-Allow-Origin: *), historyApiFallback
Production: No devServer at all — Nginx serves static files

Why HTTPS is required locally:
Module Federation loads remote code via `

article link :- https://blog.srinudesetti.in/micro-frontend/react/webpack-5-configuration-micro-frontend

Shared Packages in Micro Frontend Monorepo — Complete Guide

Srinu Web developer — Sat, 28 Mar 2026 11:28:23 +0000

Your Micro Frontend has a silent bug and you don't know it yet.

The user logs in on the Auth MFE. The auth token gets saved to the Redux store. They navigate to Products — a different MFE loaded via Module Federation. The Products page says they're not logged in.

Why? Because Products MFE created its own Redux store instance. Auth MFE has a separate instance. Two stores. Two states. Completely out of sync.

This is the #1 problem teams hit when they build Micro Frontends without shared packages.

What are shared packages?

Internal libraries inside your monorepo that ALL MFEs consume. Instead of each MFE building its own API layer, its own Redux store, and its own UI components, you build them ONCE in packages/ and import everywhere.

In this article, I break down the 3 packages that hold a production MFE monorepo together:

1. @myapp/api — Shared API Layer

Full axios instance with request interceptors (JWT token attachment) and response interceptors (401 handling + token refresh)
Failed request queue — when a token expires, multiple API calls fail simultaneously. Without the queue, each triggers its own refresh. The queue holds them, refreshes once, then retries all.
Domain-organized API folders: Inventory-Apis/, Products-Apis/, Order-Apis/, each containing real CRUD functions
File upload handling with FormData + progress tracking
Asset URL resolution

2. @myapp/store — Shared Redux Store

configureStore() with auth reducer
Complete authSlice: 7 reducers (setIsLoggedIn, setAuthToken, setSessionExpired, setUserInfo, setSellerProfile, setLoading, updateUser) + 9 selectors
Custom hooks (useAppDispatch, useAppSelector) ready for TypeScript
Barrel export pattern — one import path for everything
Module Federation singleton: true ensures ONE store instance across all MFEs

3. @myapp/uicomponents — Shared UI

CustomToast with react-hot-toast configuration
Button and Card components
Change the design once, every MFE updates automatically

The critical wiring:

Webpack resolve.alias maps @myapp/store to ./../packages/core/store at BUILD time
Module Federation shared: { singleton: true } deduplicates the package at RUNTIME
You need BOTH. Aliases alone = each MFE bundles its own copy. Singleton alone = import path not resolved.
Local config uses localhost ports. Production uses Nginx paths. Both shown side by side.

Every code block is from a real production monorepo with 11 independently deployable React MFEs.

Read the full guide with 15 code blocks:
https://blog.srinudesetti.in/micro-frontend/react/shared-packages-micro-frontend-monorepo

React Micro Frontend Monorepo Setup with Turborepo

Srinu Web developer — Thu, 26 Mar 2026 09:53:57 +0000

"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.

Micro Frontend vs SPA: Which Architecture Should You Choose?

Srinu Web developer — Wed, 25 Mar 2026 09:32:59 +0000

Your SPA was perfect at 3 developers. At 8 developers, it's a war zone.

Merge conflicts every morning. A broken Support page blocking the Cart team's release. 5-minute builds that used to take 20 seconds. And a 2.8 MB bundle that loads chart.js, leaflet, and xlsx on the homepage — where nobody needs them.

Sound familiar?

I just published a deep-dive comparing SPA and Micro Frontend architectures with 15 real code blocks showing both approaches side by side:

What you'll see:

→ SPA webpack.config.js vs MFE webpack.config.js (Local AND Production — they're different)
→ SPA routing (all routes in one file) vs MFE routing (lazy-loaded remote apps)
→ SPA deployment (one build, one deploy, one bottleneck) vs MFE deployment (30-second independent builds)
→ SPA bundle problem (2.8 MB all upfront) vs MFE targeted loading (150-300 KB per MFE)
→ React Host (ModuleFederationPlugin) vs Next.js Host (NextFederationPlugin) — the config is NOT the same
→ Turborepo pipeline for parallel MFE builds
→ 4-step strangler migration pattern from SPA to MFE

This isn't "MFE is better than SPA." I show you exactly when SPA is the RIGHT choice (small team, single domain, fast MVP) and when MFE becomes necessary.

Every code block is from a production system with 7 MFEs running on independent ports.

Read the full comparison:
https://blog.srinudesetti.in/micro-frontend/fundamentals/micro-frontend-vs-spa

Micro Frontend vs Microservices: What's the Difference?

Srinu Web developer — Mon, 23 Mar 2026 10:28:54 +0000

"Micro Frontend is just Microservices for the frontend."

I hear this in every architecture discussion. And it's wrong.

They share the same philosophy — decompose a monolith into independently deployable units. But the implementation? Completely different layers, different tools, different problems they solve.

Here's what most articles won't show you:

The real confusion starts when you need BOTH.

Your Products MFE calls the Product Service. Your Cart MFE calls the Cart Service AND the Logistics Service. Your Auth MFE and Account MFE both call the same User Service. One-to-many. Many-to-one. Through an API Gateway. With a shared axios singleton handling JWT refresh across every MFE.

In this article, I break down:

📐 Side-by-side comparison across 14 dimensions (layer, communication, deployment, database, scaling, gateway, team ownership...)
🔗 How MFEs connect to Microservices through a shared API config pattern — real production code
🏗️ What a real Express.js microservice looks like (CORS, health checks, Kubernetes probes)
🐳 Docker Compose running MFEs + Microservices + Nginx + MongoDB together
⚠️ 3 misconceptions that lead teams to over-engineer
🧭 Decision flowchart: When to adopt MFE only, Microservices only, both, or neither

Every code block is from a real production system — not toy examples.

Read the full guide with 10+ code blocks, architecture diagrams, and decision framework:

👉 https://blog.srinudesetti.in/micro-frontend/fundamentals/micro-frontend-vs-microservices

This is Article 6 in my 50-article Micro Frontend series — from fundamentals through Kubernetes deployment, all based on a real 12-MFE + 8-microservice production system.

Micro Frontend Folder Structure: Best Practices Guide

Srinu Web developer — Sun, 22 Mar 2026 09:48:25 +0000

How you organize your Micro Frontend project determines how easy it is to develop, build, deploy, and scale.

In this guide, I cover:

Monorepo vs Polyrepo comparison
The recommended two-directory structure (apps/ + packages/)
React Remote MFE internal structure with bootstrap.js
React Host vs Next.js Host — when to use each (they are independent, not competing)
Local vs Production webpack/next.config differences (with code tabs)
Shared packages: Redux store, API layer, UI components
Turborepo pipeline configuration
Infrastructure co-location (Docker + Kubernetes)
Anti-patterns to avoid

Every example is from real production projects.

Read the full article: https://blog.srinudesetti.in/micro-frontend/fundamentals/micro-frontend-folder-structure

Micro Frontend vs Monolith: How to Choose the Right Architecture

Srinu Web developer — Tue, 17 Mar 2026 09:31:45 +0000

"Should I use Micro Frontend or stick with Monolith?"

This is the most common question I hear from frontend developers. The answer isn't about team size alone — scalability matters too.

In this article, I cover:

Side-by-side comparison: Monolith vs Micro Frontend
A decision framework to help you choose
Why even small teams should consider MFE for high-traffic apps
Step-by-step Monolith → MFE migration using the Strangler Fig Pattern
Real code examples for both architectures

The key insight: A 5-person team building a high-traffic e-commerce app with seasonal spikes may benefit more from MFE than a 20-person team building an internal tool.

👉 Read the full guide with decision framework →

What is Micro Frontend Architecture? Complete Guide

Srinu Web developer — Mon, 16 Mar 2026 11:21:10 +0000

Ever wondered how large-scale apps like Amazon or Spotify manage their massive frontends?

They don't build one giant monolithic frontend — they split it into Micro Frontends (MFEs).

In this guide, I break down:

What Micro Frontend Architecture actually is
How Webpack Module Federation connects independent apps
Local vs Production code setup (with real examples)
Host and Remote configuration patterns
Common FAQs developers ask about MFE

Whether you're a solo developer or part of a large team, understanding MFE architecture is becoming essential for building scalable web applications.

👉 Read the full guide with code examples →