Jaspin Suji G
5 min read

Micro Frontend - Best Practices with React

Introduction to Micro Frontend

Microservices are a popular way to build small, autonomous teams that can work independently. Unfortunately, microservices only work on the backend.

It turns out that we can take microservice patterns and apply them to the frontend. Companies such as Netflix, Zalando, and Capital One have pushed the pattern to the front, laying the groundwork for micro frontends.

Microfrontends have a similar concept to microservices, i.e., they are the extension of the microservice concept to the frontend world. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. It enables teams to work independently of each other by splitting the application into smaller, shareable, and modular components. Multiple teams can work on individual modules of the same project without impacting the other modules; it doesn’t matter how many modules are added to the current system. It is the solution to today's sophisticated web applications.

Microservices, in the form of React micro frontend help businesses in the following ways:

  • Ability to scale Build-Up
  • Speedy Deployment
  • Technology-independence
  • High automatability and deployability
  • Fewer concerns about security and dependability
  • Reduced and less expensive development time
  • Attracting engineers

Developing Micro Frontends using React

I am going to create 2 React apps in this article

  • 1. host-app
  • 2. remote-app

Let's start our micro frontend app, I am using create-mf-app to create a react app.

First App (host-app)

  • 1. To create the first app, use the command create-mf-app
  • 2. Enter the project Name : host-app
  • 3. Click enter

Change the directory and the control should be inside the project. Use the following command

> cd host-app

After completing the following steps, the project directory initially looks something like this. If node_modules are missing in the project, install npm package or yarn package. npm i react or yarn install

Likewise, let’s create the another one app (remote-app)

Second App(remote-app)

  • 1. Use the following command create-mf-app
  • 2. Enter the application name : remote-app
  • 3. Port Number : 8081
  • 4. Update necessary details

The second app is created and the port number is updated to 8081.

Create the component Remote.jsx inside remote-app application

src/components/Remote.jsx

                      
                        import React, { useState } from "react";

                        export const Remote = () => {
                          const [name, setName] = useState(null);
                        
                          return (
                            <div>
                              <div>
                                <p style={{ textAlign: "center" }}>
                                  {name ? <p>Your name is: {name}</p> : null}
                                </p>
                                <h1>Remote App</h1>
                                <input
                                  onChange={(e) => setName(e.target.value)}
                                  type="text"
                                  placeholder="Enter your name"
                                />
                              </div>
                            </div>
                          );
                        };

Inside the remote-app application, create a directory src/App.js and paste the code.

src/components/App.jsx

                      
                        import React from "react";
                        import ReactDOM from "react-dom";
                        import { Remote} from "./components/Remote";
                        import "./index.css";
                        
                        const App = () =>{
                          const [name, setName] = React.useState(null);
                        
                          return(
                          <div className="container">
                          <Remote />
                        </div>
                        );}
                        ReactDOM.render(<App />, document.getElementById("app"));

Now, update the webpack.config.js file inside the remote-app with the following code:

                      
                        const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");


const deps = require("./package.json").dependencies;
module.exports = {
  output: {
    publicPath: "http://localhost:8081/",
  },


  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },


  devServer: {
    port: 8081,
    historyApiFallback: true,
  },


  module: {
    rules: [
      {
        test: /\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },


   plugins: [ //Updated Part
    new ModuleFederationPlugin({
      name: "Remote",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./Remote": "./src/components/Remote",
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};
  • name: Name of the app
  • filename: Entry point(remoteEntry.js) for the remote-app
  • remotes: Add host-app entry here (relevant for the host-app)
  • exposes: All the component names that you want to expose to the host-app.
  • shared: container all the dependencies that you want to share between the host-app and the remote-app.

Let’s update the webpack.config.js file inside the host-app with the following code:

                    
                      const HtmlWebPackPlugin = require("html-webpack-plugin");
                      const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
                      
                      
                      const deps = require("./package.json").dependencies;
                      module.exports = {
                        output: {
                          publicPath: "http://localhost:8080/",
                        },
                        resolve: {
                          extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
                        },
                        devServer: {
                          port: 8080,
                          historyApiFallback: true,
                        },
                        module: {
                          rules: [
                            {
                              test: /\.m?js/,
                              type: "javascript/auto",
                              resolve: {
                                fullySpecified: false,
                              },
                            },
                            {
                              test: /\.(css|s[ac]ss)$/i,
                              use: ["style-loader", "css-loader", "postcss-loader"],
                            },
                            {
                              test: /\.(ts|tsx|js|jsx)$/,
                              exclude: /node_modules/,
                              use: {
                                loader: "babel-loader",
                              },
                            },
                          ],
                        },
                        plugins: [
                          new ModuleFederationPlugin({
                            name: "host-app",
                            filename: "remoteEntry.js",
                            remotes: {
                              remote: "remote@http://localhost:8081/remoteEntry.js",
                            },
                            exposes: {
                              "./app": "./src/App",
                            },
                            shared: {
                              ...deps,
                              react: {
                                singleton: true,
                                requiredVersion: deps.react,
                              },
                              "react-dom": {
                                singleton: true,
                                requiredVersion: deps["react-dom"],
                              },
                            },
                          }),
                          new HtmlWebPackPlugin({
                            template: "./src/index.html",
                          }),
                        ],
                      };

The remote objects define all the entry points exposed from remote apps, remotes entry has the following structure:

{ "app-name": "name@/remoteEntry.js" }

Create the component inside the host-app

src/components/App.jsx

                  
                    import React from "react";
                    import ReactDOM from "react-dom";
                    import { Remote } from "remote-app/Remote";
                    
                    import "./index.css";
                    
                    const App = () => (
                      <div className="container">
                        <h1>Host App</h1>
                        <p>Integration is here</p>
                        <div className="row">
                          <Remote />
                        </div>
                      </div>
                    );
                    ReactDOM.render(<App />, document.getElementById("app"));

Now run both applications. The two apps should appear after a refresh of localhost:8080, and clicking on them should function as you might anticipate.

Remote App (remote-app)

Host App (host-app)

Conclusion

Please take a look at this blog if you want to understand how to deploy your micro frontend application to the production environment. We do hope that you find this tutorial useful.