Micro-Frontends

Module Federation, single-spa, independent deployment, and shared state.

Overview

Micro-frontends allow teams to develop and deploy features independently.

Key Concepts

• Module Federation — Webpack 5 feature for runtime module sharing
• single-spa — Framework for micro-frontend architecture
• Independent Deployment — Deploy each micro-frontend separately
• Shared State — Communicate between micro-frontends
• Route-based Splitting — Different micro-frontends per route

Code Examples

// Module Federation - Host
// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        shop: 'shop@http://localhost:3001/remoteEntry.js',
        cart: 'cart@http://localhost:3002/remoteEntry.js'
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
    })
  ]
};

// Host app
function App() {
  return (
    <div>
      <h1>Main App</h1>
      <React.Suspense fallback="Loading Shop...">
        <Shop />
      </React.Suspense>
      <React.Suspense fallback="Loading Cart...">
        <Cart />
      </React.Suspense>
    </div>
  );
}

// Remote (Shop micro-frontend)
const Shop = React.lazy(() => import('shop/ShopApp'));

// single-spa registration
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'shop',
  app: () => System.import('@shop/app'),
  activeWhen: '/shop'
});

registerApplication({
  name: 'cart',
  app: () => System.import('@cart/app'),
  activeWhen: '/cart'
});

start();

Practice

Set up a micro-frontend architecture with Module Federation and shared authentication.