Building Microfrontends with Module Federation

What is Micro frontend (MFE)?

Micro frontend is an architectural pattern for constructing web applications, which entails decomposing a large frontend monolith into smaller, more manageable components. Each component, known as a micro-frontend, operates as an independent application that can undergo development, testing, and deployment autonomously. This approach enables teams to collaborate more efficiently and autonomously, while also enhancing the performance and scalability of the overall application.

What is Module Federation?

Module Federation is a method for sharing code among various applications or micro-frontends. It enables the distribution of code across multiple domains, which is crucial when dealing with large-scale applications.

How Does it Work?

Module Federation is a system that enables you to utilize segments of an application within another application without necessitating the importation of the entire application. This implies that you can divide your application into smaller modules, facilitating easier management and updates.

With module federation, you can share code between multiple applications.

Benefits of Module Federation

Scalability: Module Federation enables you to seamlessly incorporate new features into your application without the need to overhaul the entire codebase.
Efficiency: Breaking down your application into smaller modules with Module Federation enhances its efficiency, reducing loading and execution times.
Collaboration: Module Federation facilitates smoother collaboration among developers by simplifying code sharing between applications.

Implementation

Step 1: Create Applications

Create a new React application using create-react-app or your preferred method. In your root directory, create two applications:

npx create-react-app main
npx create-react-app cart

Step 2: Install Webpack 5

Within each application, install webpack 5 and related dependencies.

#NPM
npm install –save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader

Step 3: Webpack Configuration

Create webpack.config.js file at the root of main/ and cart/:

//main/webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index",
  mode: "development",
  devServer: {
    port: 4000, // port 4001 for cartApp
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"],
            },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  resolve: {
    extensions: [".js", ".jsx"],
  },
  target: "web",
};

Change the start script in cart/package.json & main/package.json to utilize our webpack config:

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production",
 },

Step 4: Module Federation Configuration

First, we need add a file entry.js as an entry to each of our app.

We need this additional layer of indirection because it allows Webpack to load all necessary imports for rendering the remote app.

Create main/entry.js and cart/entry.js:

import('./index.js')

Modify the entry of main/webpack.config.js and home-app/webpack.config.js

module.exports = {
  entry: "./src/entry.js",
  //...
};

Step 5: Exposes Cart for Module Federation

Now we need to expose Cart to use, in our main/webpack.config.js:

// cart/webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
// import ModuleFederationPlugin from webpack
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
// import dependencies from package.json, which includes react and react-dom
const { dependencies } = require("./package.json");module.exports = {
  //...
  plugins: [
    //...
    new ModuleFederationPlugin({
      name: "CartApp", // This application named ''HeaderApp''
      filename: "remoteEntry.js", // output a js file
      exposes: {
        // which exposes
        "
./Cart": "./src/App", // a module 'Cart' from ''./src/App''
      },
      shared: {
        // and shared
        ...dependencies, // some other dependencies
        react: {
          // react
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          // react-dom
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },
    }),
  ],
};

Start the app, navigate to http://localhost:4001/remoteEntry.js. This is a manifest of all of the modules that are exposed by the header application.

Step 8— Add Module Federation in Main App

Now we need to add the ModuleFederationPlugin to main/webpack.config.js:

// home-app/webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
// import ModuleFederationPlugin from webpack
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
// import dependencies from package.json, which includes react and react-dom
const { dependencies } = require("./package.json");

module.exports = {
  //...
  plugins: [
    //...
    new ModuleFederationPlugin({
      name: "Main", // This application named 'Main'
      // This is where we define the federated modules that we want to consume in this app.
      // Note that we specify "Cart" as the internal name
      // so that we can load the components using import("Cart/").
      // We also define the location where the remote''s module definition is hosted:
      // CartApp@[http://localhost:4001/remoteEntry.js].
      // This URL provides three important pieces of information: the module''s name is "Cart", it is hosted on "localhost:4001",
      // and its module definition is "remoteEntry.js".
      remotes: {
        CartApp: "CartApp@http://localhost:4001/remoteEntry.js",
      },
      shared: {
        // and shared
        ...dependencies, // other dependencies
        react: {
          // react
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          // react-dom
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },
    }),
  ],
};

You can access the code in this repository by clicking here.

Conclusion

Micro frontend architecture and module federation are potent tools for constructing scalable and efficient web applications. By decomposing a large monolithic frontend into smaller, more manageable components, teams can operate more efficiently and autonomously. Module federation further enables developers to share code between applications, fostering collaboration and minimizing duplication of effort. By following the steps outlined in this article, you can build your own micro frontend with module federation in React and harness the capabilities of these robust tools.