Micro-Frontend Architectures and Module Federation0%
Host and Remote Container Configuration

Micro-Frontend Architectures and Module Federation

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Micro-Frontend Architectures and Module Federation

As organizations scale to dozens of engineering squads, monolithic frontend codebases encounter severe bottlenecks: conflicting dependency upgrades, long CI/CD build queues, and tight deployment coupling. Micro-Frontend Architecture decomposes a monolithic web application into independent, semi-autonomous frontend applications that assemble dynamically in the browser. Webpack 5 Module Federation is the enterprise standard protocol enabling micro-frontends to share code and runtime components dynamically without npm publishing overhead.

1. Monolith vs Micro-Frontends

Output
Monolithic Frontend:
[ Squad A: Billing ] + [ Squad B: Search ] + [ Squad C: Auth ]
──► Bundled into 1 massive artifact
──► 1 bug in Billing blocks Search squad's release!
 
Micro-Frontend Architecture:
┌────────────────────────────────────────────────────────┐
│ Host Shell (App Shell / Navigation / Global Context) │
└───────┬────────────────────────┬───────────────────────┘
│ │
▼ ▼
┌──────────────────┐ ┌──────────────────┐
│ Remote App 1 │ │ Remote App 2 │
│ (Billing Squad) │ │ (Search Squad) │
│ Deploys to CDN A │ │ Deploys to CDN B │
└──────────────────┘ └──────────────────┘

2. Core Concepts of Webpack Module Federation

  • Host (Shell): The parent application that initializes the root DOM and consumes external modules.
  • Remote: An independent application that exposes specific components, state hooks, or routes for consumption by other applications.
  • Shared Dependencies: Libraries (such as react, react-dom, @apollo/client) loaded once as singletons to prevent multiple copies from bloating browser memory.

3. Remote Container Webpack Configuration

The Remote application exposes its internal components via ModuleFederationPlugin:

JavaScript
// remote-billing/webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json").dependencies;
 
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "billing_remote",
filename: "remoteEntry.js", // The manifest file consumed by hosts
exposes: {
// Expose component for external consumption
"./InvoiceWidget": "./src/components/InvoiceWidget",
"./BillingSummary": "./src/components/BillingSummary",
},
shared: {
...deps,
react: { singleton: true, requiredVersion: deps.react },
"react-dom": { singleton: true, requiredVersion: deps["react-dom"] },
},
}),
],
};

4. Host Shell Webpack Configuration

The Host application declares the location of the remote container:

JavaScript
// host-shell/webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json").dependencies;
 
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "host_shell",
remotes: {
// Points to deployed manifest of remote
billing_remote: "billing_remote@https://billing.enterprise.com/remoteEntry.js",
},
shared: {
...deps,
react: { singleton: true, requiredVersion: deps.react },
"react-dom": { singleton: true, requiredVersion: deps["react-dom"] },
},
}),
],
};

5. Dynamic Consumption in React Host

The Host imports the federated component just like any other lazy-loaded component:

TSX
import React, { Suspense, lazy } from "react";
 
// Dynamically imported across the internet from billing CDN!
const RemoteInvoiceWidget = lazy(() => import("billing_remote/InvoiceWidget"));
 
export function HostDashboard() {
return (
<div className="p-8 bg-slate-900 min-h-screen text-white">
<h1 className="text-2xl font-bold mb-6">Host Shell Portal</h1>
 
<Suspense fallback={<div className="p-6 bg-slate-800 rounded animate-pulse">Streaming remote billing chunk...</div>}>
<RemoteInvoiceWidget organizationId="org_881" />
</Suspense>
</div>
);
}
Interactive Quiz

Practice Quiz

Question 1
What primary organizational problem does a Micro-Frontend architecture solve?
Question 2
What is the purpose of remoteEntry.js in Webpack Module Federation?
Question 3
Why is singleton: true essential when configuring shared: ['react'] in Module Federation?
Question 4
How does a host application consume a federated remote component?
Question 5
What happens if a remote micro-frontend fails to load due to a CDN outage?
Next Lesson

Host and Remote Container Configuration

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
RTL (Right-to-Left) Language Layout SupportHost and Remote Container Configuration

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext