Step by step integration of microfrontends with react web application.
All we know about Microservices, which helps to develop, deploy and maintain applications individually. Like Uber where booking and payment services are individually developed and deployed. Same way we can develop, deploy react applications individually. It means, your application is divided into various individual applications and easy to maintain, that concept known as Micro Frontends.
Today, we will see a React Website using Micro Frontends where we create three applications, Blogs App, Header App and Container App (Which glue Blog & Header and represent a single web application).
Create React Applications -
Let’s create three react application,
Blogs (Website Blogs App),
Header (Website Header),
Container (Actual Website, Where we merged Blog & Header)
Blogs Application -
Let’s create Constant add array of blogs,
Let’s do code for Blogs Listing, Create a file Blog.js
Blogs are located at url.com/blogs, So we need to set up react-router-dom and history.
To see blog detail we need to setup code for BlogDetail, create file BlogDetail.js
Finally, We have Constant, Blogs and BlogDetail. Now Let’s do code for Blogs, BlogDetail routing. Replace App.js code with following,
Now, it’s time to run the application. We can see the list of Blogs and on press of the blog it redirect users to blog detail.
Header Application -
Here, We simply add header div to demonstrate Header Application. So, let’s add all required dependencies.
Let’s modify code for App.js
Now, let’s run the application, It will show a Simple Header.
So, we have two applications ready, Blogs Application — where we do code for Blogs Listing, Header Application — Where we do code for Showing Header In Application.
Container Application -
Now, it’s time to setup our Container Application which actually use/merge both Header and Blogs Application into our Container Application (Our Main Website)
Let’s add react-router-dom, history to Container Application. After that let’s update code for App.js
SetUp Micro Frontends -
Think, how my Container app knows about Header Application and Blogs Application. Let’s set it up one by one.
SetUp Web Application Port -
Container Application — Port 3000
Header Application — Port 3001
Blogs Application — Port 3002
To do this, update package.json,
Container Application,
Header Application,
Blogs Application,
Now, Create .env file in root directory of Container Application,
REACT_APP_HEADER_HOST=http://localhost:3001
REACT_APP_BLOGS_HOST=http://localhost:3002
You know, React App bundle entire applications to main.js, Where we have functions to render, mount, unmount components.
Render Function Name: render{ApplicationName}
UnMount Function Name: unmount{ApplicationName}
So, Your Blogs App looks like,
renderBlogs
unmountBlogs
Same way, Header App looks like,
renderHeader
unmountHeader
Let’s create a MicroFrontend.js file in Container App, which has business logic for mount, unmount components.
As you can see MicroFrontend component will take name, host and history as params. See the fetch function which fetch the asset-manifest.json from the host and create a script object using the main.js and it will use the render function to mount components.
SetUp Micro Frontends for Blogs Application -
Let’s install react-app-rewired package which overrides the build config without ejecting the app.
Create config.overrides.js in the root directory of blogs application and add the following code.
Now, let’s update scripts section of package.json file,
And final step in Blogs Application to update index.js,
SetUp Microfrontends for Header Application -
- Install react-app-rewired
- Update package.json
- Update index.js file
Finally, We run the Container App (Our Main Web Application)
What Next?
Thanks for reading full article!
Read More Technical Articles
KPITENG || hello@kpiteng.com ||DIGITAL TRANSFORMATION
