Micro Frontends Architecture: Module Federation & Design Patterns

As software organizations expand to dozens of engineering teams, the traditional frontend single-page application (SPA) monolith becomes a severe operational bottleneck. Long CI/CD build times, merge conflicts, conflicting dependency versions, and coordination gridlock stall feature delivery.

Micro-Frontends apply the proven architectural philosophy of backend microservices to frontend web development: breaking large, monolithic web apps into independent, loosely coupled, autonomous micro-applications that integrate seamlessly into a cohesive user experience. In this architectural guide, we dissect Module Federation, routing orchestration, cross-application state sharing, and performance trade-offs.

1. Integration Strategies: How Micro-Frontends Assemble

Micro-frontends can be composed using three primary architectural paradigms:

2. Deep Dive: Webpack & Vite Module Federation

Module Federation enables a JavaScript application to dynamically import code from another independently deployed application at runtime. The host container downloads remote bundles on demand, sharing common dependencies (like React and ReactDOM) to prevent downloading duplicate libraries.

const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: "analytics_remote",
            filename: "remoteEntry.js",
            // Expose the specific component for host consumption:
            exposes: {
                "./AnalyticsDashboard": "./src/components/Dashboard.jsx"
            },
            // Share singleton libraries so React is only loaded ONCE in browser:
            shared: {
                react: { singleton: true, requiredVersion: "^18.2.0" },
                "react-dom": { singleton: true, requiredVersion: "^18.2.0" }
            }
        })
    ]
};

import React, { Suspense, lazy } from "react";

// Dynamically fetch remote bundle from CDN or S3 bucket at runtime:
const RemoteAnalyticsDashboard = lazy(() => import("analytics_remote/AnalyticsDashboard"));

export function HostApp() {
    return (
        <div className="host-container">
            <header className="global-nav">Host Platform Navigation</header>
            <main>
                <Suspense fallback={<div className="skeleton-loader">Loading Micro-App...</div>}>
                    <RemoteAnalyticsDashboard tenantId="tenant_99" />
                </Suspense>
            </main>
        </div>
    );
}

3. Cross-Application Communication: The Decoupled Event Bus

Micro-frontends must never import internal state stores (like Redux or Zustand) directly from one another, as this creates tight coupling that defeats the purpose of the architecture. Instead, communicate using browser-native CustomEvent interfaces or a lightweight decoupled Event Bus.

// Shared Event Dispatcher Utility
export const GlobalEventBus = {
    emit(eventName, payload) {
        const event = new CustomEvent(`mfe:${eventName}`, {
            detail: payload,
            bubbles: true
        });
        window.dispatchEvent(event);
    },
    on(eventName, callback) {
        const listener = (event) => callback(event.detail);
        window.addEventListener(`mfe:${eventName}`, listener);
        // Return unsubscribe cleanup handler
        return () => window.removeEventListener(`mfe:${eventName}`, listener);
    }
};

// In Auth Remote:
GlobalEventBus.emit("user:login", { userId: "usr_42", role: "admin" });

// In Checkout Remote:
const unsubscribe = GlobalEventBus.on("user:login", (user) => {
    console.log(`Checkout adjusted for tier: ${user.role}`);
});

4. Managing CSS Isolation and Design System Consistency

CSS leakage is a notorious risk in micro-frontends. If Remote A defines button { background: red; }, it can inadvertently break buttons inside Remote B. Defend against style collision using:

• CSS Modules / Scoped CSS: Automatically prefixes classes with unique hash identifiers at build time (e.g., .btn_a9f8e).
• Shared Design System Tokens: Distribute CSS Custom Properties (colors, spacing, typography) via an NPM token package so all teams maintain visual harmony.
• Shadow DOM (Web Components): Complete encapsulation boundary that prevents external styles from penetrating.

Frequently Asked Questions (FAQ)

Conclusion

Micro-Frontends provide organizational autonomy and decoupled deployment velocity for large-scale enterprise engineering organizations. By leveraging Module Federation, strict event bus contracts, and shared design tokens, teams can build cohesive, resilient digital products that scale smoothly across hundreds of developers.

Custom Event Cross-Micro-Frontend Event Bus

Decouple sub-applications using typed native browser CustomEvents:

// App 1: Auth Micro Frontend triggers login event
export function notifyUserLogin(userData: { id: string; name: string }) {
  const event = new CustomEvent('app:auth:success', {
    detail: userData,
    bubbles: true,
  });
  window.dispatchEvent(event);
}

// App 2: Navigation Micro Frontend listens and updates avatar
window.addEventListener('app:auth:success', (e: Event) => {
  const { name } = (e as CustomEvent).detail;
  document.getElementById('userGreeting').textContent = `Welcome, ${name}`;
});

CSS Scoping & Styling Isolation Strategies

One of the biggest pitfalls in micro frontend architectures is global CSS pollution. When Team Auth declares .btn { background: blue; } and Team Cart declares .btn { background: green; }, the cascade breaks the user interface.

Modern micro frontend architectures enforce three strict isolation boundaries:

• Shadow DOM Encapsulation: Wrapping micro frontends inside Custom Elements with Shadow Roots prevents external CSS stylesheets from leaking inward.
• Unique Tailwind Prefixing: Configure unique class prefixes in tailwind.config.js (e.g. prefix: 'auth-' vs prefix: 'cart-').
• CSS Modules / Scoped CSS: Generates unique hashed class names at build time, guaranteeing zero runtime collisions.

Performance Impact: Deduplicating Shared Dependencies

Loading multiple instances of React, Lodash, or UI component libraries severely bloats bundle sizes. Webpack Module Federation's shared configuration allows hosts and remotes to negotiate a single runtime singleton:

// Module Federation Shared Singleton Configuration
shared: {
  react: { singleton: true, eager: false, requiredVersion: '^19.0.0' },
  'react-dom': { singleton: true, eager: false, requiredVersion: '^19.0.0' },
  '@tanstack/react-query': { singleton: true },
}