Micro-Frontends
Module Federation, independent deployment, shared state, and route-based splitting.
Overview
Micro-frontends enable independent development and deployment.
Key Concepts
- Module Federation â Share modules at runtime
- Independent Deployment â Deploy each micro-frontend separately
- Shared State â Communicate between apps
- Route-Based Splitting â Different apps per route
- Build Isolation â Separate build processes
Code Examples
// webpack.config.js (Module Federation)
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
shop: 'shop@http://localhost:3001/_next/static/chunks/remoteEntry.js',
cart: 'cart@http://localhost:3002/_next/static/chunks/remoteEntry.js'
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true }
}
})
]
};
```jsx
// Host app - app/layout.js
const Shop = React.lazy(() => import('shop/ShopApp'));
const Cart = React.lazy(() => import('cart/CartApp'));
export default function Layout({ children }) {
return (
<div>
<nav>
<Link href="/shop">Shop</Link>
<Link href="/cart">Cart</Link>
</nav>
<main>{children}</main>
</div>
);
}
// app/shop/page.js
export default function ShopPage() {
return (
<Suspense fallback={<div>Loading Shop...</div>}>
<Shop />
</Suspense>
);
}
Practice
Set up a micro-frontend architecture with Module Federation and shared auth.