Module Federation Host and Remote Apps

apps/host/
├── src/
│   ├── index.js              # Async entry — import("./bootstrap")
│   ├── bootstrap.js          # React render + Provider + Router
│   ├── App.jsx               # Routes + React.lazy() remote loading
│   ├── index.html            # Single HTML shell
│   ├── components/
│   │   ├── Layout.jsx        # Shared layout (header, sidebar, footer)
│   │   ├── LoadingFallback.jsx # Suspense fallback for remote loading
│   │   └── ErrorBoundary.jsx # Catches remote load failures
│   └── routes/
│       └── AppRoutes.jsx     # All route definitions
├── webpack.config.js         # ModuleFederationPlugin with remotes
├── package.json
└── certs/                    # Local HTTPS certificates
    ├── localhost.pem
    └── localhost-key.pem

// apps/host/src/index.js — async entry point
import("./bootstrap");

// apps/host/src/bootstrap.js — actual app rendering
import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { store } from "@myapp/store";
import App from "./App.jsx";

const root = createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>
);

// apps/host/src/App.jsx — loading all remotes with React.lazy()
import React, { lazy, Suspense } from "react";
import { Routes, Route } from "react-router-dom";
import Layout from "./components/Layout";
import LoadingFallback from "./components/LoadingFallback";

// Each React.lazy() call maps to a remote's exposed module
// Webpack resolves "Products/ProductList" using the remotes config
const ProductList = lazy(() =>
  import("Products/ProductList").catch((err) => {
    console.error("Failed to load ProductList", err);
    return { default: () => <div>Products module unavailable</div> };
  })
);

const OrdersDashboard = lazy(() =>
  import("Orders/OrdersDashboard").catch((err) => {
    console.error("Failed to load OrdersDashboard", err);
    return { default: () => <div>Orders module unavailable</div> };
  })
);

const InventoryDashboard = lazy(() =>
  import("Inventory/InventoryDashboard").catch((err) => {
    console.error("Failed to load InventoryDashboard", err);
    return { default: () => <div>Inventory module unavailable</div> };
  })
);

const SettingsDashboard = lazy(() =>
  import("Settings/SettingsDashboard").catch((err) => {
    console.error("Failed to load SettingsDashboard", err);
    return { default: () => <div>Settings module unavailable</div> };
  })
);

const OnboardingApp = lazy(() =>
  import("Onboarding/OnboardingApp").catch((err) => {
    console.error("Failed to load OnboardingApp", err);
    return { default: () => <div>Onboarding module unavailable</div> };
  })
);

function App() {
  return (
    <Layout>
      <Suspense fallback={<LoadingFallback />}>
        <Routes>
          <Route path="/products/*" element={<ProductList />} />
          <Route path="/orders/*" element={<OrdersDashboard />} />
          <Route path="/inventory/*" element={<InventoryDashboard />} />
          <Route path="/settings/*" element={<SettingsDashboard />} />
          <Route path="/onboarding/*" element={<OnboardingApp />} />
        </Routes>
      </Suspense>
    </Layout>
  );
}

apps/products/
├── src/
│   ├── index.js              # Async entry — import("./bootstrap")
│   ├── bootstrap.js          # Standalone dev render
│   ├── App.jsx               # Standalone dev wrapper
│   ├── index.html            # Standalone dev HTML
│   └── components/
│       ├── ProductList.jsx   # ← Exposed to host
│       ├── ProductCatalog.jsx # ← Exposed to host
│       ├── ProductImages.jsx  # ← Exposed to host
│       ├── BulkUpload.jsx    # ← Exposed to host
│       └── SingleUpload.jsx  # ← Exposed to host
├── webpack.config.js         # ModuleFederationPlugin with exposes
└── package.json

// apps/products/src/index.js — async entry (same pattern as host)
import("./bootstrap");

// apps/products/src/bootstrap.js — standalone development render
import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { store } from "@myapp/store";
import App from "./App.jsx";

// This only runs when the remote is loaded directly (standalone dev)
// When loaded by the host, the host's bootstrap handles rendering
const root = createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>
);

// apps/products/src/App.jsx — standalone development wrapper
import React from "react";
import { Routes, Route } from "react-router-dom";
import ProductList from "./components/ProductList";
import ProductCatalog from "./components/ProductCatalog";
import ProductImages from "./components/ProductImages";
import BulkUpload from "./components/BulkUpload";
import SingleUpload from "./components/SingleUpload";

// This App.jsx is ONLY used when running the remote standalone
// When loaded by the host, the host imports individual components
// from the exposes config — this file is never used in that case

function App() {
  return (
    <div>
      <h1>Products MFE — Standalone Development</h1>
      <Routes>
        <Route path="/" element={<ProductList />} />
        <Route path="/catalog" element={<ProductCatalog />} />
        <Route path="/images" element={<ProductImages />} />
        <Route path="/bulk-upload" element={<BulkUpload />} />
        <Route path="/single-upload" element={<SingleUpload />} />
      </Routes>
    </div>
  );
}

// apps/host/src/components/ErrorBoundary.jsx
import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Remote MFE failed to render:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: "20px", textAlign: "center" }}>
          <h2>Something went wrong loading this module</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            Try Again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// apps/host/src/App.jsx — wrapping each remote with ErrorBoundary
import React, { lazy, Suspense } from "react";
import { Routes, Route } from "react-router-dom";
import ErrorBoundary from "./components/ErrorBoundary";
import LoadingFallback from "./components/LoadingFallback";

const ProductList = lazy(() => import("Products/ProductList"));
const OrdersDashboard = lazy(() => import("Orders/OrdersDashboard"));

function App() {
  return (
    <Routes>
      <Route
        path="/products/*"
        element={
          <ErrorBoundary>
            <Suspense fallback={<LoadingFallback />}>
              <ProductList />
            </Suspense>
          </ErrorBoundary>
        }
      />
      <Route
        path="/orders/*"
        element={
          <ErrorBoundary>
            <Suspense fallback={<LoadingFallback />}>
              <OrdersDashboard />
            </Suspense>
          </ErrorBoundary>
        }
      />
    </Routes>
  );
}

// apps/host/src/components/LoadingFallback.jsx
import React from "react";

function LoadingFallback() {
  return (
    <div style={{ padding: "40px", textAlign: "center" }}>
      <div className="shimmer-block" style={{
        width: "100%",
        height: "200px",
        background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
        backgroundSize: "200% 100%",
        animation: "shimmer 1.5s infinite",
        borderRadius: "8px",
      }} />
      <p style={{ color: "#888", marginTop: "16px" }}>
        Loading module...
      </p>
    </div>
  );
}

export default LoadingFallback;

// apps/host/src/components/PermissionRoute.jsx
import React from "react";
import { useSelector } from "react-redux";

function PermissionRoute({ permissionKey, children }) {
  const permissions = useSelector(
    (state) => state.auth.user?.permissions || []
  );

  if (!permissions.includes(permissionKey)) {
    return (
      <div style={{ padding: "40px", textAlign: "center" }}>
        <h2>Access Denied</h2>
        <p>You do not have permission to view this module.</p>
      </div>
    );
  }

  return children;
}

export default PermissionRoute;

// Using PermissionRoute to guard remote MFE access
import PermissionRoute from "./components/PermissionRoute";

const ProductList = lazy(() =>
  import("Products/ProductList").catch(() => ({
    default: () => <div>Products module unavailable</div>,
  }))
);

// In your routes:
<Route
  path="/products/*"
  element={
    <PermissionRoute permissionKey="products_view">
      <ErrorBoundary>
        <Suspense fallback={<LoadingFallback />}>
          <ProductList />
        </Suspense>
      </ErrorBoundary>
    </PermissionRoute>
  }
/>

// An app can be BOTH a host AND a remote simultaneously
// This is called bi-directional federation

const { ModuleFederationPlugin } = require("webpack").container;

new ModuleFederationPlugin({
  name: "Dashboard",
  filename: "remoteEntry.js",  // ← This makes it a REMOTE

  // Exposes modules for other apps to consume
  exposes: {
    "./AnalyticsWidget": "./src/components/AnalyticsWidget",
    "./RevenueChart": "./src/components/RevenueChart",
  },

  // Consumes modules from other remotes — this makes it a HOST
  remotes: {
    Products: "Products@https://localhost:4002/remoteEntry.js",
    Orders: "Orders@https://localhost:4004/remoteEntry.js",
  },

  shared: {
    react: { singleton: true, requiredVersion: "^18.3.1" },
    "react-dom": { singleton: true, requiredVersion: "^18.3.1" },
  },
})

// Now another app can do: import("Dashboard/AnalyticsWidget")
// AND Dashboard can do: import("Products/ProductList")

// Next.js Host — loading remotes with next/dynamic (NOT React.lazy)
import dynamic from "next/dynamic";

// next/dynamic with ssr: false — prevents server-side rendering
// of the remote component (remote JS only exists in the browser)
const RemoteLogin = dynamic(() => import("Auth/Login"), {
  ssr: false,
  loading: () => <div>Loading login...</div>,
});

const RemoteShoppingBag = dynamic(() => import("Cart/ShoppingBag"), {
  ssr: false,
  loading: () => <div>Loading cart...</div>,
});

const RemoteProductPage = dynamic(
  () => import("Products/ProductDetailPage").catch(() => ({
    default: () => <div>Product page unavailable</div>,
  })),
  { ssr: false }
);

// Usage in a Next.js page component:
export default function LoginPage() {
  return (
    <div>
      <RemoteLogin />
    </div>
  );
}

# Development workflow — running host + remotes together

# Terminal 1: Start the host app
cd apps/host
npm start
# → Host running at https://localhost:4000

# Terminal 2: Start the Products remote
cd apps/products
npm start
# → Products running at https://localhost:4002

# Terminal 3: Start the Orders remote
cd apps/orders
npm start
# → Orders running at https://localhost:4004

# With Turborepo — start everything in one command:
npx turbo run dev
# → All MFEs start in parallel on their assigned ports

# The host loads remoteEntry.js from each running remote
# If a remote is NOT running, the host shows the .catch() fallback

# Production deployment — each MFE builds independently

# Step 1: Build each remote
cd apps/products && npm run build
# → Output: apps/products/dist/
#   ├── remoteEntry.js          (manifest)
#   ├── main.bundle.js          (app code)
#   └── vendors.bundle.js       (shared vendor chunks)

cd apps/orders && npm run build
# → Output: apps/orders/dist/

# Step 2: Build the host
cd apps/host && npm run build
# → Output: apps/host/dist/

# Step 3: Serve via reverse proxy (Nginx / Kubernetes Ingress)
# /                 → apps/host/dist/
# /products/        → apps/products/dist/
# /orders/          → apps/orders/dist/
# /inventory/       → apps/inventory/dist/

# Each MFE's publicPath must match its serving path:
# products webpack: publicPath: "/products/"
# Nginx: location /products/ { root /srv/products/dist; }