Micro-Frontends with Module Federation: A React Remix

Micro-Frontends: Taming the Monolith Beast

As your React application grows, it can become a monstrous monolith, slow to develop, difficult to maintain, and a nightmare to deploy. Enter micro-frontends – a powerful architectural pattern that breaks down your app into smaller, independent, and more manageable pieces. This post shows you how to implement micro-frontends with Module Federation, a game-changing feature in Webpack 5.

Why Micro-Frontends? Divide and Conquer!

Micro-frontends offer several advantages:

• Independent deployments: Each micro-frontend can be developed, tested, and deployed independently, enabling faster iteration and continuous delivery.
• Smaller codebases: Easier to understand, maintain, and debug. No more wading through thousands of lines of code just to fix a typo.
• Technology diversity: You can use different technologies (e.g., React, Vue, Angular) for different micro-frontends, allowing you to experiment with new technologies or gradually migrate legacy code.
• Team autonomy: Different teams can own and manage different micro-frontends, promoting ownership and responsibility.

Module Federation: Sharing Code Like a Pro

Module Federation allows different JavaScript applications to share code at runtime. This is the magic that makes micro-frontends possible.

Building Our Micro-Frontends: Let’s Get Our Hands Dirty

Let’s build a simple example with two micro-frontends: a “product list” and a “shopping cart.”

1. Create the Host Application:

This app will host the micro-frontends. Set up a new React project and configure Webpack:

// webpack.config.js (host)
module.exports = {
  // ... other config
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        productList: "productList@http://localhost:3001/remoteEntry.js",
        shoppingCart: "shoppingCart@http://localhost:3002/remoteEntry.js",
      },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
  ],
};

// App.jsx (host)
import React from "react";

const ProductList = React.lazy(() => import("productList/ProductList"));
const ShoppingCart = React.lazy(() => import("shoppingCart/ShoppingCart"));

function App() {
  return (
    <div>
      <React.Suspense fallback="Loading...">
        <ProductList />
      </React.Suspense>
      <React.Suspense fallback="Loading...">
        <ShoppingCart />
      </React.Suspense>
    </div>
  );
}

2. Create the Micro-Frontends:

Create separate React projects for productList and shoppingCart, each with its own Webpack configuration:

// webpack.config.js (micro-frontend)
module.exports = {
  // ... other config
  plugins: [
    new ModuleFederationPlugin({
      name: "productList", // Or 'shoppingCart'
      filename: "remoteEntry.js",
      exposes: {
        "./ProductList": "./src/ProductList", // Or './ShoppingCart'
      },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
  ],
};

3. Deploying and Running:

Deploy each micro-frontend and the host application separately. The host app will load the micro-frontends at runtime using the URLs specified in the remotes configuration.

Advanced Techniques: Sharing State and Events

Sharing state and events between micro-frontends can be a bit tricky, but there are several approaches, such as using a shared state management library (e.g., Redux) or a custom event bus.

Conclusion: Scaling React Like a Boss

Micro-frontends with Module Federation provide a powerful way to build and scale complex React applications. While there are some challenges to overcome, the benefits of independent deployments, smaller codebases, and team autonomy can be significant. So, if you’re building a large React app, consider giving micro-frontends a try!