Micro Frontend using React

Micro frontends is a design approach to build web applications by splitting them into smaller, more manageable, and independently deployable parts (called micro frontends). In this article we will deep dive into benefits, disadvantages and how to create micro frontends using react and webpack.

Starter pack for Micro Frontend in react using Webpack(ModuleFederationPlugin)

You can download my basic micro frontend code from here as starter pack Micro Frontend by Atul

Advantages of micro frontends:

• Scalability: Micro frontends allow multiple teams to work on different parts of the front end independently. Each team can focus on specific features or sections of the application (e.g., user authentication, product listing, or checkout flow) without interfering with other teams. Even new module can be added at any point without causing any concern to the application. Each module can use different tech as well like Angular, React or Vue.
• Independence and Autonomy: If one part of the front end needs a change or update, you can deploy only that micro frontend without having to redeploy the entire application. Each micro frontend can be isolated in terms of code, state, and dependencies. This reduces the risk of breaking the entire system when making changes to one part of the application.
• Decentralized Teams: Encourages team autonomy and reduces inter-team dependencies.
• Support for Multiple Versions: For instance, one part of the application can be using a new version of a feature, while another part uses an older version, and they can coexist.

Disadvantages/Challenges of micro frontends:

• Complexity: While micro frontends solve many problems, they introduce new complexities such as managing multiple deployments, handling inter-team communication, and ensuring consistency across the app.
• Performance Overhead: Integrating multiple independent applications can cause performance overhead due to the need for multiple network requests and managing different technologies in the browser.
• Coordination and Standardization: It's important to maintain a consistent UX/UI and ensure seamless communication between micro frontends, which may require strong governance and coordination between teams.

Micro frontend creation using React and Module Federation in Webpack

Webpack 5 introduced Module Federation, which allows applications to share code dynamically at runtime. This is a great choice for building micro-frontends where each micro-frontend can be a separate React app and share components or modules with the main application.

Steps to Build Micro-Frontend with Webpack(Module Federation):

1. Create Two React Apps (Micro-Frontends)

We'll create two React apps: one for the host (main app) and another for the remote (micro-frontend).

Host App: This will be the main app that loads micro-frontends.

Remote App: This will be a micro-frontend that can be shared with the host app.

2. Setting up the Host App

Modify webpack.config.js for module federation:

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'development',
  devServer: {
    port: 3000,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js', // Remote app URL
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};
        

Inside src/index.js, dynamically import a component from the remote app:

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
const RemoteComponent = React.lazy(() => import('remoteApp/RemoteComponent'));

const App = () => (
  <div>
    <h1>Host App</h1>
    <Suspense fallback={<div>Loading Remote Component...</div>}>
      <RemoteComponent />
    </Suspense>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));
        

3. Setting up the Remote App (Micro-Frontend)

Modify webpack.config.js for module federation:

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'development',
  devServer: {
    port: 3001,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './RemoteComponent': './src/RemoteComponent', // Expose a component
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};
        

Create a simple RemoteComponent in the src folder of remote-app:

// src/RemoteComponent.js
import React from 'react';

const RemoteComponent = () => <div>Hello from Remote Component!</div>;

export default RemoteComponent;
        

4. Running the Apps

Start the remote app and then host app.

Tip: If you are using two different versions of react for host and remote then we need to make sure that your micro frontend uses only one version for that we have to make react and react-dom singleton by using below code in Module Federation Plugin code.

shared: {
        'react': {
          singleton: true
        },
        'react-dom': {
          singleton: true
        }
      }        

Conclusion:

Micro frontends are required because they enable scalability, flexibility, and independence in frontend development, especially for large and complex applications. They allow multiple teams to work in parallel, use different technologies, and deploy independently, all while maintaining an organized and modular architecture. However, they come with challenges, such as added complexity and the need for careful coordination between teams.

Micro frontends are particularly useful in large organizations, evolving systems, or when transitioning from monolithic architectures to a more modular, decentralized structure.

If you want to get starter pack for micro frontend using react and module federation then Micro Frontend by Atul