Micro Frontends Cheat Sheet

// 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 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>

import { registerApplication, start } from 'single-spa';registerApplication({  name: 'checkout',  app: () => System.import('checkout'),  activeWhen: (location) => location.pathname.startsWith('/checkout'),  customProps: { authToken: getAuthToken() },});registerApplication({  name: 'nav',  app: () => System.import('nav'),  activeWhen: () => true, // always mounted});// Each app exports bootstrap/mount/unmount so single-spa can// swap it in/out without a full page reloadexport const bootstrap = async (props) => { /* one-time init */ };export const mount = async (props) => { /* render into props.domElement */ };export const unmount = async (props) => { /* clean up listeners, unmount React tree */ };start({ urlRerouteOnly: true });

import { init, loadRemote } from '@module-federation/enhanced/runtime';init({  name: 'shell',  remotes: [    {      name: 'checkout',      entry: await resolveRemoteEntry('checkout'), // e.g. from a manifest service    },  ],  shared: {    react: { singleton: true, requiredVersion: '^18.0.0' },  },});// Load on demand; falls back gracefully if the remote is unreachabletry {  const { default: CheckoutWidget } = await loadRemote('checkout/Widget');  mount(CheckoutWidget);} catch (err) {  renderFallbackCheckout(); // never let one remote's outage break the shell}

class RemoteErrorBoundary extends React.Component {  state = { hasError: false };  static getDerivedStateFromError() {    return { hasError: true };  }  componentDidCatch(error, info) {    reportToMonitoring({ remote: this.props.name, error, info });  }  render() {    if (this.state.hasError) {      return this.props.fallback ?? <div>{this.props.name} is unavailable</div>;    }    return this.props.children;  }}// Usage: each remote gets its own boundary so a crash in Checkout// never takes down Nav or the rest of the page<RemoteErrorBoundary name="checkout">  <React.Suspense fallback={<Spinner />}>    <CheckoutWidget />  </React.Suspense></RemoteErrorBoundary>

/* shell publishes tokens on :root, versioned like an API */:root {  --sv-color-primary: #2563eb;  --sv-color-danger: #dc2626;  --sv-space-2: 8px;  --sv-radius-md: 6px;  --sv-font-body: 'Inter', system-ui, sans-serif;}/* each micro-frontend consumes tokens, never hardcodes brand values */.checkout-widget__submit {  background: var(--sv-color-primary);  padding: var(--sv-space-2) calc(var(--sv-space-2) * 2);  border-radius: var(--sv-radius-md);  font-family: var(--sv-font-body);}/* Shadow DOM fragments must re-declare or inherit tokens explicitly --   custom properties DO pierce shadow boundaries, unlike normal selectors */