Module Federation Host and Remote Apps — Setup Guide

#webpack #react #microfrontend #srinudesetti

// Your host loads a remote — it crashes. The ENTIRE app goes blank.
const ProductList = React.lazy(() => import("Products/ProductList"));

// Fix: Add .catch() to prevent cascading failures
const ProductList = React.lazy(() =>
  import("Products/ProductList").catch((err) => ({
    default: () => <div>Products module unavailable</div>,
  }))
);

This is one of the patterns most teams miss when setting up Module Federation. The host app and remote apps have very different responsibilities, and getting the architecture wrong leads to cascading failures, permission gaps, and production deploy issues.

Article 13 in my Micro Frontend series covers:

Host app architecture — Layout shell, routing, Redux Provider, and bootstrap pattern
Remote app structure — Standalone development on isolated ports (4001-4011)
Error handling — Two layers: .catch() for load failures + ErrorBoundary for render failures
Permission-based routing — Check Redux store permissions before loading remotes
Bi-directional federation — An app as both host AND remote
React vs Next.js host — React.lazy() vs next/dynamic with ssr: false
Production deployment — publicPath must match the reverse proxy route