It is no secret that disassembling the issue is the best way to address any software issue.
There are several ways to achieve this, including by rewriting your code to produce functions that are easier to manage and understand.
Say hello to the React Micro Front-End Approach!
A team can autonomously design, test, and deploy a micro frontend as a standalone unit. But we must be careful to assemble these parts so that they appear to end users as a single web application.
Let’s understand what the term exactly means and how it may benefit you in the long run!
What is React Micro Front-End Approach?
To deliver a larger application, micro-frontends are little apps that are typically segregated by subdomain or functionality. The Micro Frontend type of architecture design divides monolithic structures into smaller components that may subsequently be combined on a single page, doing for the front end of an application what microservices do for the back end.
The main goal of creating micro frontends is to create robust websites while being technology agnostic, isolating team code, establishing team prefixes, and favoring native browser functionality over bespoke APIs.
React micro frontend architecture is a development of past architectural patterns rather than being a novel idea. Microservice architecture is significantly influenced by disruptive innovation trends in social media, cloud computing, and the Internet of Things to swiftly gain market share.
We appreciate the switch to continuous deployment. Businesses benefit from microservices, such as React micro frontend, in the following ways:
- Small & Dedicated Apps
It goes without saying that when we divide a large application into sections, pages, or features, the app gets smaller.
- Independent Apps
Since each app is different and developed independently, they are all independent of one another.
- Easy to Understand
Because they are compact and created by one team, apps are simpler to grasp.
- Easy to Develop and Deploy
These apps are tiny in size and created by a single team, making it simple to create and distribute them. Even autonomous deployment is possible.
- Easy to Test
For larger apps that take ages to operate, we must write countless thousands of unit tests. Our deployment procedure is slowed down as a result. About micro frontends, each app has a small number of unit tests, runs its unit tests, and is capable of being run independently.
How to Build Micro Frontend with React?
Let us demonstrate a tutorial for creating a React Micro front end. The host program will be the main application in this case, and the remote application will be a sub-app that we plug into the host application.
1. In Your Root Directory
You'll get two apps as a result of this:
- host-app/
- remote-app/
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 and any dependencies we require for configuring Webpack.
NOTE: Webpack version 5 and later support Webpack Module Federation.
Adding dependencies will enable us to host our program.
3. Hosting the App
Setup for Webpack will be the first step.
Make a new webpack.config.js file in the host-app/ and remote-app/root directories:
In this straightforward Webpack example, our JS and JSX code will be loaded using Babel and injected into an HTML template.
To use our webpack configuration, modify the start script in package.json as follows:
"scripts":{
"start": "webpack serve"
}
index.js(same for both apps)
We first require the index.js file as the app's entry point. Bootstrap.js, another file we are importing, renders the React application.
We require this additional indirection layer so that Webpack can have a chance to load all of the imports required to render the remote app.
If not, you will see a mistake similar to this:
The shared module is not accessible for immediate use.
|
//host-app/src/index.js //remote-app/src/index.js import("./bootstrap"); |
Note: If you don't dynamically import the bootstrap file using the import() statement, you'll get the same issue.
bootstrap.js(same for both apps)
The bootstrap.js file, which renders our React application, is then defined for both repos.
|
import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( < React. Strict Mode > < App / > </React.StrictMode> ); |
What are the Important Things to Consider?
- Name:- It is employed to set the modules apart.
- Remotes: This is where we specify which federated modules we want this app to use. You'll see that we define Remote as the internal name so that we can import ("Remote/") the components.
- Shared: It is how we distribute dependencies among modules. React has a global state, so you should never run more than one instance of React and ReactDOM in a single project. This is crucial for React. We are instructing webpack to consider React and ReactDOM as singletons in our design to do this, ensuring that the initial version loaded from any modules will be utilized throughout the entire app. Providing that it complies with the requiredVersion that we define. To reduce the number of duplicate dependencies amongst our modules, we are also importing all of our other dependencies from package.json and adding them here.
App for Remote
Starting with the webpack configuration file, shall we? We have some familiarity with Module Federation because we configured the host app:
- The plugins should contain the following code.
- The localhost:4000 address of our webpack development server.
- Remote is the name of the remote module.
- The document is named moduleEntry.js.
- By combining these, our host app will be able to locate the remote app's code at Remote@http://localhost:4000/moduleEntry.js
Conclusion
We discussed the basics of micro front-ends in this article, along with the procedures required to build them correctly using React.js development.
We currently have a working micro frontend application. We sincerely hope that you were able to keep up and that you learned some valuable lessons along the way.
Here at W3villa Technologies uses React to develop a micro-frontend architecture that has been successful so far. Since we have been doing it for years, we will keep researching, learning, and exchanging ideas as we try to refine our strategy that may benefit your business in the long run.
