Micro-Frontends Architecture: Complete Implementation Guide with 10+ Real-World Patterns

// Step 1: Host/Container App Configuration

// webpack.config.js (Container)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        products: 'products@http://localhost:3001/remoteEntry.js',
        cart: 'cart@http://localhost:3002/remoteEntry.js',
        checkout: 'checkout@http://localhost:3003/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true },
        'react-router-dom': { singleton: true }
      }
    })
  ]
};

// Step 2: Remote Micro-Frontend Configuration

// webpack.config.js (Remote - Products App)
new ModuleFederationPlugin({
  name: 'products',
  filename: 'remoteEntry.js',
  exposes: {
    './ProductList': './src/components/ProductList',
    './ProductDetail': './src/components/ProductDetail',
    './store': './src/store/productStore'
  },
  shared: {
    react: { singleton: true, eager: true },
    'react-dom': { singleton: true },
    zustand: { singleton: true }
  }
})

// Step 3: Using Remote Module in Container

// App.js (Container)
import React, { lazy, Suspense } from 'react';

// Lazy load remote components
const ProductList = lazy(() => import('products/ProductList'));
const Cart = lazy(() => import('cart/Cart'));

function App() {
  return (
    <Suspense fallback=<div>Loading...</div>>
      <ProductList category="electronics" />
      <Cart />
    </Suspense>
  );
}

// orchestration/ModuleLoader.js
class ModuleLoader {
  constructor() {
    this.registry = new Map();
    this.loadingPromises = new Map();
  }

  async loadModule(moduleName, remoteUrl) {
    if (this.registry.has(moduleName)) {
      return this.registry.get(moduleName);
    }
    if (this.loadingPromises.has(moduleName)) {
      return this.loadingPromises.get(moduleName);
    }
    const loadPromise = this._loadRemoteModule(moduleName, remoteUrl);
    this.loadingPromises.set(moduleName, loadPromise);
    try {
      const module = await loadPromise;
      this.registry.set(moduleName, module);
      return module;
    } finally {
      this.loadingPromises.delete(moduleName);
    }
  }

  async _loadRemoteModule(name, url) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.type = 'text/javascript';
      script.async = true;
      script.onload = () => {
        const module = window[name];
        if (module) resolve(module);
        else reject(new Error(`Module ${name} not found`));
      };
      script.onerror = () => reject(new Error(`Failed to load ${url}`));
      document.head.appendChild(script);
    });
  }
}

// CI/CD Pipeline for Single Micro-Frontend

name: Deploy Products MFE
on:
  push:
    paths: ['apps/products/**']
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - run: npm run build
      - run: aws s3 sync dist/ s3://mfe-cdn/products/
      - run: curl -X POST https://registry.myapp.com/modules/products