Enabling Micro-front end Architecture with Webpack 5 Module Federation

Webpack, a popular module bundler, introduced a groundbreaking feature in its fifth version: Module Federation. This feature allows multiple Webpack builds to work together, sharing modules between them. It’s a game-changer for the world of micro frontends, as it enables seamless integration of independently deployed applications.

In this article, we’ll dive deep into the concept of Module Federation, and we’ll also walk through a simple example to demonstrate its power.

What is Module Federation?

Module Federation allows a JavaScript application to dynamically load code from another application at runtime. This means you can have multiple, separate applications sharing a single runtime environment, where each app can use modules from others as if they were local.

Imagine having a main application and several micro frontends. Instead of bundling all the code together, each micro frontend can be developed, deployed, and loaded independently. This is particularly useful for large teams working on different parts of an application, as it allows for independent deployments without the need to coordinate releases.

A Visual Representation

In the diagram:

• Host App (App1): This is our main application that exposes the Button.js component.
• Remote App (App2): This is another application that consumes the Button.js component from App1.
• The arrow from App.js in App2 to Button.js in App1 represents the dynamic loading of the Button component at runtime.

This visual representation simplifies the relationship between the host and remote applications and how they share components using Webpack’s Module Federation.

Setting Up a Simple App with Module Federation

Host Application (App1)

1. Webpack Configuration:

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

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button",
      },
    }),
  ],
};

1. Button Component:

// src/Button.js
export default function Button() {
  return <button>Click me!</button>;
}

Remote Application (App2)

1. Webpack Configuration:

// webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      remotes: {
        app1: "app1@http://localhost:3001/remoteEntry.js",
      },
    }),
  ],
};

1. Using the Button from App1:

// src/App.js
import React from "react";
import Button from "app1/Button";

function App() {
  return (
    <div>
      <h1>Welcome to App2</h1>
      <Button />
    </div>
  );
}
export default App;

Micro Frontend Component as a Remote Module

Let’s say we have a micro frontend component, UserProfile, that we want to expose as a remote module.

1. Webpack Configuration for Micro Frontend:

// webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "userProfile",
      filename: "remoteEntry.js",
      exposes: {
        "./UserProfile": "./src/UserProfile",
      },
    }),
  ],
};

1. UserProfile Component:

// src/UserProfile.js
export default function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

Any application can now consume the UserProfile component from this micro frontend by configuring its Webpack to recognize the remote module.

Conclusion

Webpack 5’s Module Federation is a revolutionary feature that brings a new level of flexibility to the world of web development. It allows for better code sharing, independent deployments, and a more modular architecture, especially beneficial for large applications and teams.

As with any new technology, it’s essential to understand its benefits and limitations. But for those looking to embrace a micro frontend architecture, Module Federation is undoubtedly a feature worth exploring.

Next Let’s discuss How Authentication and Authorization can be enabled in Micro front end integrations