Introduction to React Micro Frontend

Monolithic architecture, which has been the norm in software development for decades now, is being replaced by microservices as an alternate strategy. Initially, the success of monolithic designs has a long history. Consequently, several software vendors and industry leaders firmly believe in its benefits. But as times change, new technical advancements appear that are more advantageous than what everyone seems to be accustomed to.

React micro frontend architecture is not a new concept; rather, it is a progression of earlier architectural patterns. Disruptive innovation trends in social media, cloud computing, and the Internet of Things are heavily influencing the platform of microservice architecture to quickly penetrate the market.

Thanks to the move to continuous deployment. Microservices, in the form of React micro frontend help businesses in the following ways:

• Scalability of Build-Up
• Quick Deployment
• Technology-independence
• No Insulation fault
• Efficient upgrade and migration
• High deployability and automatability
• Reduced security threats and dependability
• Shortened and cheaper development time
• Appealing to engineers

Building Micro Frontend with React [Tutorial]

Let us show you a tutorial guide to building React Micro frontend. Here, we will be building two applications, namely, a host and remote; where the main application is the host, and another one will be a sub-app that we plug into it.

The host app will be our “main” app and the remote app will be a sub-app plugging into it.

First, we will be creating a basic react app using create-react-app.

1. In Your Root Directory

npx create-react-app host-app
 
npx create-react-app remote-app

1. host-app/
2. remote-app/

This will create two apps for you:

2. Adding Dependencies

Within each host-app/ and remote-app/ run:

npm install –save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader

This will install webpack & dependencies that we need for webpack configuration.

NOTE:-Webpack Module Federation is available in version 5 and above of webpack.

After adding dependencies we can host our app.

Do you wish to create a React Micro Frontend application for your users to hastily find them their solution and to scale your business?
Hire Reactjs developers from Bacancy as we are early adopters of the magnificent possibilities in the frontend. Our veteran React developers have years-long experience with industry-wide domains of small & big dimensions.

3. Hosting the App

Let us start with our webpack configuration

Create a new webpack.config.js file at the root of host-app/ & remote-app/:

//host-app/webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
 entry: "./src/index",
 mode: "development",
 devServer: {
   port: 3000,
 },
 module: {
   rules: [
     {
       test: /\.(js|jsx)?$/,
       exclude: /node_modules/,
       use: [
         {
           loader: "babel-loader",
           options: {
             presets: ["@babel/preset-env", "@babel/preset-react"],
           },
         },
       ],
     },
     {
       test: /\.css$/i,
       use: ["style-loader", "css-loader"],
     },
   ],
 },
 plugins: [
   new HtmlWebpackPlugin({
     template: "./public/index.html",
     favicon: "./public/favicon.ico",
     manifest: "./public/manifest.json",
   }),
 ],
 resolve: {
   extensions: [".js", ".jsx"],
 },
 target: "web",
};

// remote-app/webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
 
module.exports = {
 entry: "./src/index",
 mode: "development",
 devServer: {
   static: {
     directory: path.join(__dirname, "public"),
   },
   port: 4000,
 },
 module: {
   rules: [
     {
       test: /\.(js|jsx)?$/,
       exclude: /node_modules/,
       use: [
         {
           loader: "babel-loader",
           options: {
             presets: ["@babel/preset-env", "@babel/preset-react"],
           },
         },
       ],
     },
     {
       test: /\.css$/i,
       use: ["style-loader", "css-loader"],
     },
     {
       test: /\.(gif|png|jpe?g|svg)$/,
       use: [
         {
           loader: "file-loader",
           options: {
             name: "[name].[ext]",
             outputPath: "assets/images/",
           },
         },
       ],
     },
   ],
 },
 plugins: [
   new HtmlWebpackPlugin({
     template: "./public/index.html",
     favicon: "./public/favicon.ico",
     manifest: "./public/manifest.json",
   }),
 ],
 resolve: {
   extensions: [".js", ".jsx"],
 },
 target: "web",
};

This basic webpack example is to get our js and jsx code transpiled using babel-loader and injected into an HTML template.

Change the start script in package.json to utilize our webpack config:-

 "scripts":{
    "start": "webpack serve"
  }