Building a Module Federation Plugin Host App in React Micro Frontend

Hello folks, I am Nawaz Sharief of Indian origin working as a Frontend Developer. In the earlier blogs, I have given a brief introduction to Micro frontends. In this blog, I will try to explain how to integrate two different micro frontends in the host application using the Module Federation Plugin.

Introduction:

In recent years, the concept of micro frontends has gained popularity in the world of web development. By breaking down a monolithic front-end into smaller, more manageable applications, teams can work independently and deploy updates with ease. One of the key technologies that enable micro frontends is Module Federation, which allows modules to be dynamically loaded and shared across multiple applications. In this blog post, we’ll explore how to create a Module Federation Plugin Host App using React.

Understanding Module Federation:
Module Federation is a feature provided by web-pack, a popular bundler for JavaScript applications. It enables us to build a system where different applications can share and dynamically load modules from one another. This concept is especially useful in a micro frontend architecture, as it allows us to split the codebase into smaller, more focused applications.

Setting up the React Host App:
To begin, we need to create a new React application that will serve as the host for our micro frontends. We can start by using Create React App (CRA) or any other preferred setup method. Once we have our React app set up, we can proceed to configure Module Federation.

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

module.exports = {
  // Other webpack configuration options
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        microfrontendA: 'microfrontendA@http://localhost:3001/remoteEntry.js',
        microfrontendB: 'microfrontendB@http://localhost:3002/remoteEntry.js',
        // Add more microfrontends as needed
      },
    }),
  ],
};

In the configuration above, we define the name of our host application 'hostApp' and specify the remotes, which are the URLs to the remoteEntry.js files of our micro frontends. Make sure to adjust the URLs and names according to your setup.

Consuming Micro frontends:
Once the Module Federation configuration is set up, we can start consuming the micro frontends within our host application. To do this, we’ll use the React.lazy and React.Suspense features provided by React.

In our host application’s main component, we can import the remote components as follows:

import React, { lazy, Suspense } from 'react';

const MicrofrontendA = lazy(() => import('microfrontendA/App'));
const MicrofrontendB = lazy(() => import('microfrontendB/App'));
function App() {
  return (
    <div>
      <h1>Host App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <MicrofrontendA />
        <MicrofrontendB />
      </Suspense>
    </div>
  );
}
export default App;

Here, we use the React.lazy function to dynamically load the remote components. The Suspense component is used to display a loading indicator while the components are being loaded.

Running the Host App:
With everything set up, we can now start our React Host App. In the root directory, run the command npm start or the appropriate script for your setup. The host application should start running on a specified port.

Building and Deploying:
To deploy the host application and micro frontends, we need to build them individually and serve the resulting static files using a web server or hosting service. Each micro frontend should have its own separate build process and deployment.

Conclusion:

In this blog post, we explored the process of creating a Module Federation Plugin Host App using React in a micro frontend architecture. We discussed the concepts of Module Federation, configuring webpack, and consuming micro frontends in the host application. By leveraging Module Federation, we can build scalable and independent micro frontends that can be seamlessly integrated into a single host application. This approach empowers teams to work on different parts of an application concurrently, improving productivity and flexibility in large-scale projects.