Micro Frontends Cheat Sheet

Covers composition patterns for micro-frontends including Module Federation, iframe and web-component integration, and cross-team challenges.

2 PagesAdvancedMar 18, 2026

Composition Patterns

The main ways teams stitch independent frontends together.

Build-time integration- Micro-apps published as npm packages and composed at the host's build time
Run-time via JS- Module Federation / import maps load remote bundles dynamically in the browser
Run-time via iframe- Each micro-frontend runs isolated in an iframe; strong isolation, weaker UX integration
Server-side composition- Edge/server stitches HTML fragments from multiple backends before responding
Web Components as the contract- Each team ships a custom element; the host page just drops in the tag

Module Federation (Webpack 5)

Sharing a remote widget between independently deployed apps.

javascript

// remote app's webpack.config.jsconst { ModuleFederationPlugin } = require('webpack').container;module.exports = {  plugins: [    new ModuleFederationPlugin({      name: 'checkout',      filename: 'remoteEntry.js',      exposes: { './CheckoutWidget': './src/CheckoutWidget' },      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },    }),  ],};// host app's webpack.config.jsnew ModuleFederationPlugin({  name: 'shell',  remotes: { checkout: 'checkout@https://cdn.example.com/checkout/remoteEntry.js' },  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },});// host consumes it like a normal dynamic importconst CheckoutWidget = React.lazy(() => import('checkout/CheckoutWidget'));

Iframe & Web Component Integration

Two lighter-weight isolation strategies.

html

<!-- Iframe isolation: strongest sandboxing, own JS/CSS context --><iframe src="https://checkout.example.com/widget" title="Checkout" style="border:0;width:100%"></iframe><!-- Web Component contract: each team owns a custom element --><script type="module" src="https://cdn.example.com/checkout-widget.js"></script><checkout-widget cart-id="abc123"></checkout-widget><!-- Cross-fragment communication via CustomEvent, not shared globals --><script>  document.querySelector('checkout-widget')    .addEventListener('checkout:complete', (e) => console.log(e.detail.orderId));</script>

Common Challenges

What makes micro-frontends hard in practice.

Shared state- Avoid global mutable state; use custom events or a thin shared event bus instead
CSS isolation- Shadow DOM, CSS Modules, or strict naming conventions to prevent style bleed
Duplicate dependencies- Without shared/singleton config, each fragment may ship its own React, bloating bundles
Consistent UX- A shared component library keeps independently-deployed fragments visually cohesive
Versioning & deployment- Independent pipelines per team need a strategy for coordinating breaking changes
Performance- Multiple frameworks/bundles loaded at once can hurt Time to Interactive

Pro Tip

Resist letting micro-frontends share a global state store (like one Redux instance) across team boundaries — it recreates a tightly-coupled monolith with extra network hops. Communicate through custom events or a thin pub/sub layer instead.

Was this cheat sheet helpful?

Web Sockets vs Server-Sent Events Cheat Sheet

Content Delivery Networks (CDN) Cheat Sheet