Recently, I built a small project using Webpack Module Federation — a host app dynamically loading a remote React component (profile) — to better understand how microfrontends actually work in practice.
🧩 What Are Microfrontends?
Microfrontends bring the microservices mindset to the frontend.
Each part of the UI is an independent application — owned by separate teams, deployed separately, and composed into one seamless experience.
This architecture enables scalability, autonomy, and faster releases, especially in large organizations.
⚙️ Common Approaches
Module Federation (Webpack 5+)
→ Dynamically loads remote modules at runtime, sharing dependencies like React — no rebuilds or iframes.
Multi-Zone Architecture (Next.js)
→ Multiple Next.js apps stitched together through routing, ideal for domain-based segmentation.
Internal NPM Packages
→ Each microfrontend is versioned and shared as a private package — great control, but tighter coupling.
Iframes (the classic)
→ Offers full isolation and security, though with limited inter-app communication and styling flexibility.
🧠 How Remotes Work
A remote app exposes modules like this (for example the profile):
new ModuleFederationPlugin({
name: "profile",
filename: "remoteEntry.js",
exposes: { "./Profile": "./src/Profile.tsx" },
});
And the host dynamically loads it:
new ModuleFederationPlugin({
name: "container",
remotes: {
profile: "profile@http://localhost:3001/remoteEntry.js",
},
})
const Profile = React.lazy(() => import("profile/Profile"));
Webpack fetches remoteEntry.js, shares the React instance, and mounts the component — all at runtime.
⚖️ Trade-Offs to Consider
Deployment orchestration: independent deploys give flexibility, but require careful version control and CI/CD coordination.
Shared session state: managing auth and context across apps often needs shared cookies, tokens, or an API gateway.
Performance: multiple bundles add overhead — smart caching and lazy loading help keep things fast.
Consistency: design systems and routing conventions must be aligned across teams to avoid fragmentation.
Microfrontends aren’t a silver bullet — but they’re powerful when autonomy, scale, and parallel development matter.
If you’d like to see it in action, here’s the repos :
🔗 Host (Container): https://github.com/joel2011140/mfe-container
🔗 Remote (Profile): https://github.com/joel2011140/mfe-profile
I’d love your feedback — how are you handling deployment, communication, or shared state in your microfrontend setups?
Top comments (0)