Build Micro Frontends In React - Step by Step

Build Micro Frontends In React - Step by Step

In the ever-evolving landscape of web development, micro frontends have emerged as a powerful architectural approach to building scalable and maintainable web applications. Just as microservices revolutionized backend development, micro frontends bring modularity, flexibility, and independence to the frontend world. In this guide, we will walk through the process of building micro frontends in React, one of the most popular frontend frameworks.

Understanding Micro Frontends

Before diving into implementation, it's crucial to grasp the concept of micro frontends. Essentially, micro frontends advocate breaking down a large, monolithic frontend application into smaller, more manageable pieces, each representing a self-contained feature or functionality. These micro frontends can be developed, tested, and deployed independently, allowing teams to work in parallel without stepping on each other's toes.
You can read What are the Micro Frontends? article to know more about micro frontend.

In this article

This blog provides a detailed walkthrough of implementing a React Micro Frontend (MFE) architecture utilizing Webpack Module Federation. We will setup React Micro frontend Projects and We will use webpack module federation with React to build our first micro frontend.
In this article, We build two app, first is container-app and other is micro-app, container-app will contains the micro frontend app micro-app.
Create your micro frontend project directory. Let’s call it micro_frontend_app, we will have our two react micro frontend app (container-app, micro-app) in this directory.

Step 1: Create first micro frontend app: micro-app

To kickstart the project and install all necessary dependencies, execute the following command:

npm init -y

npm install react react-dom --save

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack webpack-cli webpack-dev-server --save-dev

Open package.json file and copy paste below npm scripts:

                            "scripts": {
                                "build": "webpack",
                                "start": "webpack serve --watch-files ./src"
                              }
                          

Here is your full code for package.json:

                            {
                                "name": "container-app",
                                "version": "1.0.0",
                                "description": "",
                                "main": "index.js",
                                "scripts": {
                                  "build": "webpack",
                                  "start": "webpack serve --watch-files ./src"
                                },
                                "keywords": [],
                                "author": "Shubham Verma",
                                "license": "ISC",
                                "dependencies": {
                                  "react": "^18.2.0",
                                  "react-dom": "^18.2.0"
                                },
                                "devDependencies": {
                                  "@babel/core": "^7.24.4",
                                  "@babel/preset-env": "^7.24.4",
                                  "@babel/preset-react": "^7.24.1",
                                  "babel-loader": "^9.1.3",
                                  "css-loader": "^7.1.1",
                                  "html-webpack-plugin": "^5.6.0",
                                  "sass": "^1.75.0",
                                  "sass-loader": "^14.2.1",
                                  "style-loader": "^4.0.0",
                                  "webpack": "^5.91.0",
                                  "webpack-cli": "^5.1.4",
                                  "webpack-dev-server": "^5.0.4"
                                }
                              }
                              
                          

Create a file babel.config.json and paste below config:

                            {
                                "presets": [
                                  "@babel/preset-env",
                                  "@babel/preset-react"
                                ]
                              }
                          

Create a file webpack.config.js and paste below config:

                            const HtmlWebpackPlugin = require("html-webpack-plugin");
                            const path = require("path");
                            const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
                            const deps = require("./package.json").dependencies;
                            
                            module.exports = {
                              mode: "development",
                              resolve: {
                                extensions: [".css", ".scss", ".js", ".jsx"],
                              },
                              module: {
                                rules: [
                                  {
                                    test: /\.s?css$/,
                                    use: [
                                      "style-loader",
                                      {
                                        loader: "css-loader",
                                        options: {
                                          url: {
                                            filter: (url) => {
                                              if (url.startsWith("data:")) {
                                                return false;
                                              }
                                              return true;
                                            },
                                          },
                                        },
                                      },
                                      "sass-loader",
                                    ],
                                  },
                                  {
                                    test: /\.jsx?$/,
                                    use: ["babel-loader"],
                                    exclude: /node_modules/,
                                  },
                                  {
                                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                                    type: "asset/resource",
                                  },
                                ],
                              },
                              plugins: [
                                new HtmlWebpackPlugin({
                                  template: path.resolve(__dirname, "public", "index.html"),
                                }),
                                new ModuleFederationPlugin({
                                  name: "FIRST_APP",
                                  filename: "remoteEntry.js",
                                  exposes: {
                                    "./app": "./src/components/App",
                                  },
                                }),
                              ],
                            };
                          

In above config we have named our microfrontend FIRST_APP. We are exposing our App component that can be integrated directly using it’s remote URL.

This code appears to be configuring webpack plugins for a JavaScript project. Let's break it down:

1. HtmlWebpackPlugin: This plugin simplifies the creation of HTML files to serve your webpack bundles. It generates an HTML file using a template provided and injects the necessary script tags for your webpack bundles. In this configuration:

   • template: Specifies the path to the HTML template file. It resolves the template file path using path.resolve() method, which resolves to the index.html file located in the public directory of the project.

2. ModuleFederationPlugin: This plugin is used for module federation, a feature in webpack that allows you to dynamically load code from different webpack builds at runtime. This is particularly useful for micro-frontends or building complex applications composed of independently developed and deployed parts. In this configuration:

   • name: Specifies the name of the federation. It's set to "FIRST_APP".
   • filename: Specifies the name of the remote entry file. This file is responsible for exposing the modules that can be consumed by other federated modules. It's set to "remoteEntry.js".
   • exposes: Defines the modules that this federated module exposes. In this case, it exposes the "./app" module, which is resolved to the "./src/components/App" file in the project.

Overall, this configuration sets up two webpack plugins:

• HtmlWebpackPlugin to generate HTML files for serving webpack bundles.
• ModuleFederationPlugin to enable module federation, allowing the project to expose certain modules for consumption by other federated modules.

Create a directory public and create file public/index.html and paste below code:

                                <!DOCTYPE html>
                                <html lang="en">
                                <head>
                                    <meta charset="UTF-8" />
                                    <title>micro-app</title>
                                </head>
                                <body>
                                    <div id="container"></div>
                                </body>
                                </html>
                            

This file establishes the structure for our React web application. When accessing the app in the usual manner, it will be rendered within the "container" div, just like any other React application.

Create a directory src and create file src/index.js and paste below code:

                                    import React from 'react';
                                    import { StrictMode } from "react";
                                    import { createRoot } from "react-dom/client";
                                    import MainApp from './components/Main';
                                    
                                    const rootElement = document.getElementById("container");
                                    const root = createRoot(rootElement);
                                    
                                    root.render(
                                      <StrictMode>
                                        <MainApp />
                                      </StrictMode>
                                    );
                                

In this project, we're utilizing React 18, and we've designed the MainApp component to enable direct usage of the application within a web browser.

Create a directory src/components and create a file App.js and paste below code:

                                    import * as React from 'react';
                                    import "./styles.css";
                    
                                    export default function App({ onChange }) {
                                    return (
                                        <div className="MicroApp">
                                        <h1>IDKBlogs micro-app</h1>
                                        <input onChange={onChange} type="text" placeholder="Enter your name" />
                                        </div>
                                    );
                                    }
                                

The component shown above, named "App", serves as the primary micro frontend that we'll expose in our project. Following a similar approach, additional components can be built and exposed using the webpack.config.js file.

Create a file src/components/Main.js and paste below code:

                                    import * as React from 'react';
                                    import App from './App';
                                    import "./styles.css";
                    
                                    export default function MainApp() {
                                    const [name, setName] = React.useState(null);
                                    return (
                                        <div>
                                        <h3>{ name ? <p>Your name is: {name}</p> : null }</h3>
                                        <App onChange={(e) => setName(e.target.value)} />
                                        </div>
                                    );
                                    }
                                

The MainApp component serves a singular purpose: enabling the usage of the app in a manner consistent with any other React application.

Create a file src/components/styles.css and paste below code:

                                    .MicroApp {
                                        box-sizing: border-box;
                                        margin: auto;
                                        margin-top: 100px;
                                        padding: 30px;
                                        width: 95%;
                                        border: 2px solid black;
                                        border-radius: 12px;
                                        font-family: sans-serif;
                                        text-align: center;
                                    }
                                    
                                    .MicroApp input {
                                      height: 32px;
                                      border-radius: 8px;
                                      border: 2px solid gray;
                                      width: 350px;
                                      padding-left: 10px;
                                      padding-right: 10px;
                                    }
                                

Let's launch your micro frontend app !

To launch your microfrontend app server, simply execute the following command:

                                    npm start
                                

The app server will initiate on port 8080. Visit http://localhost:8080/ to explore and evaluate your micro frontend app.

Build Micro Frontends In React - Step by Step

Step 2: Create second app: container-app

Integrating a micro frontend app into another React application is remarkably straightforward. The microfrontend app will be hosted on port 8080, and our second app will seamlessly integrate it through its remote URL, which is exposed via webpack. Create your project directory. Let’s call it: container-app

Run below command to initiate project and install all dependencies:

                                npm init -y
                            

                                npm install react react-dom --save
                            

                                npm install @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack webpack-cli webpack-dev-server --save-dev
                            

Open the package.json file and copy-paste the following npm scripts:

                                "scripts": {
                                    "build": "webpack",
                                    "start": "webpack serve --watch-files ./src"
                                  }
                            

Create a file named babel.config.json and paste the following configuration:

                                {
                                    "presets": [
                                      "@babel/preset-env",
                                      "@babel/preset-react"
                                    ]
                                  }
                            

Create a file named webpack.config.js and paste the following configuration:

                               const HtmlWebpackPlugin = require("html-webpack-plugin");
                                const path = require("path");
                                const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
                    
                                module.exports = {
                                mode: "development",
                                resolve: {
                                    extensions: [".css", ".scss", ".js", ".jsx"],
                                },
                                module: {
                                    rules: [
                                    {
                                        test: /\.s?css$/,
                                        use: [
                                        "style-loader",
                                        {
                                            loader: "css-loader",
                                            options: {
                                            url: {
                                                filter: (url) => {
                                                if (url.startsWith("data:")) {
                                                    return false;
                                                }
                                                return true;
                                                },
                                            },
                                            },
                                        },
                                        "sass-loader",
                                        ],
                                    },
                                    {
                                        test: /\.jsx?$/,
                                        use: ["babel-loader"],
                                        exclude: /node_modules/,
                                    },
                                    ],
                                },
                                plugins: [
                                    new HtmlWebpackPlugin({
                                    template: path.resolve(__dirname, "public", "index.html"),
                                    }),
                                    new ModuleFederationPlugin({
                                    name: "MICRO",
                                    remotes: {
                                        FIRST_APP: "FIRST_APP@http://localhost:8080/remoteEntry.js",
                                    },
                                    }),
                                ],
                                };
                            

In the provided configuration, we are defining our microfrontend app as a remote module named "FIRST_APP". This allows other applications to consume and integrate this microfrontend using its remote URL.

1. HtmlWebpackPlugin: This plugin generates HTML files based on a template. The template is specified using path.resolve() to resolve the path to the index.html file located in the public directory of the project.

2. ModuleFederationPlugin: This plugin enables module federation, a feature in webpack that allows for dynamic loading of code from different webpack builds at runtime. In this configuration:

   • name: Specifies the name of the federation, which is set to "MICRO".
   • remotes: Defines remote modules that this federated module depends on. Here, it specifies a remote module named "FIRST_APP". When a module from "FIRST_APP" is imported, webpack will load it from the specified URL, which is http://localhost:8080/remoteEntry.js.

Overall, these plugins configure webpack to generate HTML files and enable module federation, allowing the project to dynamically load code from remote modules, specifically the "FIRST_APP" module hosted at http://localhost:8080/remoteEntry.js.

Create a directory public and create file public/index.html and paste below code:

                                <!DOCTYPE html>
                                <html lang="en">
                                  <head>
                                    <meta charset="UTF-8" />
                                    <title>Micro App</title>
                                  </head>
                                  <body style="width: 100%; height: 100%">
                                    <div id="container"></div>
                                  </body>
                                </html>
                            

Create a directory src and create file src/index.js and paste below code:

Create a directory named "src" and within it, create a file named "index.js". Paste the following code into "index.js":

                                import React from 'react';
                                import { StrictMode } from "react";
                                import { createRoot } from "react-dom/client";
                                
                                import App from "./App";
                                
                                const rootElement = document.getElementById("container");
                                const root = createRoot(rootElement);
                                
                                root.render(
                                  <StrictMode>
                                    <App />
                                  </StrictMode>
                                );
                            

Create a directory src/App.js and paste below code:

                                import React, { lazy, Suspense } from "react";
                                import "./styles.css";
                                
                                const FirstApp = lazy(() => import("FIRST_APP/app"));
                                
                                const App = () => {
                                  const [name, setName] = React.useState(null);
                                
                                  return (
                                    <div className="App">
                                      <h1>container-app</h1>
                                      { name ? <p>Your name is: {name}</p> : null }
                                      <div>
                                        <Suspense fallback={<span>Loading...</span>}>
                                          <FirstApp onChange={(e) => setName(e.target.value)} />
                                        </Suspense>
                                      </div>
                                    </div>
                                  );
                                };
                                
                                export default App;
                            

We are utilizing Suspense for loading our remote microfrontend app within this React application. This enables smoother handling of asynchronous data fetching and code-splitting, enhancing the user experience by minimizing loading times and ensuring seamless rendering.

Create a file src/components/styles.css and paste below code:

                                .App {
                                    font-family: sans-serif;
                                    text-align: center;
                                    border: 2px solid red;
                                    width: 75%;
                                    padding: 20px;
                                  }
                            

Run below command to start second app:

                                npm start
                            

The application will start at port 8081. Visit http://localhost:8081/ to open and explore the features of the application.

Build Micro Frontends In React - Step by Step

The microfrontend app is loaded using its remote URL within our second React application. This allows for seamless integration and interaction between the two applications, facilitating a modular and scalable frontend architecture.

Conclusion:

In conclusion, building micro frontends in React opens up new avenues for modular, scalable, and independently deployable web applications. Through a step-by-step approach, developers can seamlessly integrate multiple React applications into a cohesive whole, each responsible for specific features or functionalities. Embracing micro frontends empowers teams to work autonomously on different parts of the application, fostering parallel development and reducing dependencies.

By leveraging webpack's Module Federation Plugin, developers can establish communication between micro frontends, enabling seamless sharing of components, state, and resources. This fosters a dynamic ecosystem where updates to one micro frontend propagate across the application without impacting others, enhancing maintainability and scalability.

Furthermore, adopting micro frontends aligns with modern software architecture principles such as modularity, encapsulation, and loose coupling. This architectural paradigm facilitates continuous integration and delivery practices, allowing teams to release updates independently, accelerating time-to-market and fostering innovation.

In summary, mastering the art of building micro frontends in React empowers developers to architect resilient, adaptable, and future-proof web applications capable of meeting evolving business requirements in today's dynamic digital landscape.

Related Keywords:

Build micro frontends in React to enhance your web application's scalability and modularity

Discover how to seamlessly integrate multiple React applications with our step-by-step guide on building micro frontends

Dynamic React Micro Frontends Architecture

Webpack Simplifies React Micro Frontends

Empower Teams: React Micro Frontends

Seamless React Micro Frontends Integration