DEV Community 👩‍💻👨‍💻

Cover image for Microfrontends With React
kpiteng
kpiteng

Posted on

Microfrontends With React

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).

Please download full source code from our GitHub.

Create React Applications -

Let’s create three react application,

  • Blogs (Website Blogs App)
  • Header (Website Header)
  • Container (Actual Website, Where we merged Blog & Header)
npx create-react-app container
npx create-react-app blogs
npx create-react-app header
Enter fullscreen mode Exit fullscreen mode

Blog Application -
Let’s create Constant add array of blogs,

export const arrBlogs = [
    {
      "blogID": 1,
      "blogName": "React Navigation",
      "blogDetail": "Hello Developers! Let's see what's new in React Navigation 6.x.",
      "blogURL": "https://www.kpiteng.com/blogs/react-nativagation-6.x"
    },
    {
      "blogID": 2,
      "blogName": "Securing React Native Application",
      "blogDetail": "Discover a ways to develop secure react native application.",
      "blogURL": "https://www.kpiteng.com/blogs/securing-react-native-application"
    },
    {
      "blogID": 3,
      "blogName": "Top 10 React Tricks Every Developer Should Use",
      "blogDetail": "Discover a set of React best coding practices, tips and tricks that should be known by all developers.",
      "blogURL": "https://www.kpiteng.com/blogs/top-10-react-tricks-every-developer-should-use"
    }
  ] 
Enter fullscreen mode Exit fullscreen mode

Let’s do code for Blogs Listing, Create a file Blog.js

import React, { useState, useEffect } from "react";
import {arrBlogs} from './Constant';
import {
 Link
} from "react-router-dom";
import "./App.css";

function App() {
 return (
   <div className="container mt-5">
     <div className="row">
     {
       arrBlogs.map((blog, index) => {
         return (
           <div className="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 mb-5">
             <div className="card">
               <Link to={{pathname: `/blogdetail/${blog.blogID}`, id: blog.blogID, item: blog}} >
                 <div class="card-body">
                   <h5 class="card-title">{`#${blog.blogID}`}</h5>
                   <p class="card-text">{blog.blogName}</p>
                   <p class="card-text">{blog.blogDetail}</p>
                 </div>
               </Link>
             </div>
           </div>
         )
       })
     }
     </div>
   </div>
 );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Blogs are located at url.com/blogs, So we need to set up react-router-dom and history.

yarn add react-router-dom history
Enter fullscreen mode Exit fullscreen mode

To see blog detail we need to setup code for BlogDetail, create file BlogDetail.js

import React, { useState, useEffect } from "react";
import {arrBlogs} from './Constant';
import "./App.css";

function BlogDetail(props) {

 const [blogDetail, setBlogDetail] = useState({});

 useEffect(() => {
   const blogID = parseInt(props.match.params.blogid);
   const index = arrBlogs.findIndex((blog) => blog.blogID === blogID);
   if (index !== -1){
     setBlogDetail(arrBlogs[index])
   }
 }, []);

  return (
   <div className="container mt-5">
     <div className="row">
       <div className="card">
         {
           Object.keys(blogDetail).length > 0 && <>
           <p>{`#${blogDetail.blogID}`}</p>
           <p>{blogDetail.blogName}</p>
           <p>{blogDetail.blogDetail}</p>
           <p>{blogDetail.blogURL}</p>
           </>
         }
         {
           Object.keys(blogDetail).length === 0 &&
           <p>We're sorry, Cound't find Blog</p>
         }
       </div>
     </div>
   </div>
 );
}

export default BlogDetail;
Enter fullscreen mode Exit fullscreen mode

Finally, We have Constant, Blogs and BlogDetail. Now Let’s do code for Blogs, BlogDetail routing. Replace App.js code with following,

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from "history";
import Blogs from './Blogs';
import BlogDetail from './BlogDetail';
import "./App.css";

const defaultHistory = createBrowserHistory();

function App({ history = defaultHistory }) {
 return (
   <Router>
     <Switch>
       <Route exact path="/" component={Blogs} />
       <Route exact path="/blogdetail/:blogid" component={BlogDetail} />
     </Switch>
   </Router>
 );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

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.

yarn add react-router-dom history
Enter fullscreen mode Exit fullscreen mode

Let’s modify code for App.js

import React from "react";
import { createBrowserHistory } from "history";
import "./App.css";

const defaultHistory = createBrowserHistory();

function App({ history = defaultHistory }) {
 return (
   <div>
     <p>KPITENG (Header Application)</p>
   </div>
 );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

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

import React, { useState } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { createBrowserHistory } from "history";
import MicroFrontend from "./MicroFrontend";

import "./App.css";

const defaultHistory = createBrowserHistory();

const {
 REACT_APP_HEADER_HOST: headerHost,
 REACT_APP_BLOGS_HOST: blogHost,
} = process.env;

function Header({ history }) {
 return <MicroFrontend history={history} host={headerHost} name="Header" />;
}

function Blogs({ history }) {
 return <MicroFrontend history={history} host={blogHost} name="Blogs" />;
}

function BlogDetail({history}) {
 return (
   <div>
     <MicroFrontend history={history} host={blogHost} name="Blogs" />
   </div>
 );
}


function Home({ history }) {

 return (
   <div className="container">
      <Header />
      <Blogs />
   </div>
 );
}

function App() {
 return (
   <BrowserRouter>
     <React.Fragment>
       <Switch>
         <Route exact path="/" component={Home} />
         <Route exact path="/blogdetail/:blogid" component={BlogDetail} />
       </Switch>
     </React.Fragment>
   </BrowserRouter>
 );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

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,

"scripts": {
   "start": "PORT=3000 react-app-rewired start",
 },
Enter fullscreen mode Exit fullscreen mode

Header Application,

"scripts": {
   "start": "PORT=3001 react-app-rewired start",
 },
Enter fullscreen mode Exit fullscreen mode

Blogs Application,

"scripts": {
   "start": "PORT=3002 react-app-rewired start",
 },
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

So, Your Blogs App looks like,

renderBlogs
unmountBlogs
Enter fullscreen mode Exit fullscreen mode

Same way, Header App looks like,

renderHeader
unmountHeader
Enter fullscreen mode Exit fullscreen mode

Let’s create a MicroFrontend.js file in Container App, which has business logic for mount, unmount components.

import React, { useEffect } from "react";

function MicroFrontend({ name, host, history }) {
 useEffect(() => {
   const scriptId = `micro-frontend-script-${name}`;

   const renderMicroFrontend = () => {

     window[`render${name}`](`${name}-container`, history);
   };

   if (document.getElementById(scriptId)) {
     renderMicroFrontend();
     return;
   }

   fetch(`${host}/asset-manifest.json`)
     .then((res) => res.json())
     .then((manifest) => {
       const script = document.createElement("script");
       script.id = scriptId;
       script.crossOrigin = "";
       script.src = `${host}${manifest.files["main.js"]}`;
       script.onload = () => {
         renderMicroFrontend();
       };
       document.head.appendChild(script);
     });

   return () => {
     window[`unmount${name}`] && window[`unmount${name}`](`${name}-container`);
   };
 });

 return <main id={`${name}-container`} />;
}

MicroFrontend.defaultProps = {
 document,
 window,
};

export default MicroFrontend;
Enter fullscreen mode Exit fullscreen mode

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.

yarn add react-app-rewired
Enter fullscreen mode Exit fullscreen mode

Create config.overrides.js in the root directory of blogs application and add the following code.

module.exports = {
   webpack: (config, env) => {
     config.optimization.runtimeChunk = false;
     config.optimization.splitChunks = {
       cacheGroups: {
         default: false,
       },
     };
      config.output.filename = "static/js/[name].js";
      config.plugins[5].options.filename = "static/css/[name].css";
     config.plugins[5].options.moduleFilename = () => "static/css/main.css";
     return config;
   },
 };
Enter fullscreen mode Exit fullscreen mode

Now, let’s update scripts section of package.json file,

"scripts": {
   "start": "PORT=3002 react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-app-rewired eject"
 },
Enter fullscreen mode Exit fullscreen mode

And final step in Blogs Application to update index.js,

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

window.renderBlogs = (containerId, history) => {
 ReactDOM.render(
   <App history={history} />,
   document.getElementById(containerId),
 );
};

window.unmountBlogs = containerId => {
 ReactDOM.unmountComponentAtNode(document.getElementById(containerId));
};

if (!document.getElementById('Blogs-container')) {
 ReactDOM.render(<App />, document.getElementById('root'));
}
Enter fullscreen mode Exit fullscreen mode

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)

Please download full source code from our GitHub.

Thanks for reading Blog!

KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - Linkedin | Facebook | Instagram

Top comments (22)

Collapse
 
code913 profile image
code913 • Edited on

This was more of a Free code for anyone to copy than a tutorial. The grammar is... speechless. The config.js file assumes everyone uses webpack but some people use esbuild or vite or other stuff.

Collapse
 
iamrommel profile image
Rommel C. Manalo

How do you deal with talking for each sub-frontend. If I want to pass state to another sub-frontend. Putting all the states to the main/parent application will be bad design i guess, and it will not be scalable.

Collapse
 
jennyphan profile image
Jenny Phan

We are currently using Micro Front-Ends for our application. It makes sense when you have a large application that accesses different domains. Each Micro Front-End is it's own independent team and the team is cross-functional. I would try not to share state between the Micro Front-Ends, but if you need to pass data from one to another, I would pass the least amount of data possible and let the retrieving Micro Front-End get it's own data. If you are sharing state between all Micro Front-Ends, you could use session storage but again I would limit the data being stored/passed.

Collapse
 
ameybhavsar profile image
Amey Bhavsar

That's pretty cool. I'm curious about the performance advantages using micro frontends.

Collapse
 
m4rcoperuano profile image
Marco Ledesma

One of the best use cases is if you have an application with multiple modules. For example: an application that deals with invoicing may also have receipts, modifying an invoice, and more. All that can be contained in a frontend. Later, you may want to support reporting. Reporting may require multiple pages of its own. For reporting, I would consider a separate front end, just to keep the context of the code small. Interesting pattern

Collapse
 
permanar profile image
Richie Permana

Awesome.
What is this use case for this kind of solution?

Collapse
 
kpiteng profile image
kpiteng Author

Consider you have own Website, having Home, About, Contact Us, Blogs, Service Section.

Instead of keeping all modules in one react application, Create Separate Applications and Merge into a Main Application.

Here, You have Blogs Section, You can create Separate React Application for Blogs and Use it inside main React Application.

Collapse
 
simbo1905 profile image
Simon Massey

Look at the introduction chapter of the book “Microfrontends In Action”. It is about independence teams building independent microfrontends that are composed into one UX for the users. So it’s about scaling up to many semi-autonomous teams who can deploy independently without a big integration of many developers into a “mega-app” which is hard “at scale”.

Collapse
 
ashishjshetty profile image
Ashish J shetty

Is this approach better than the module federation approach ? especially considering that using the module federation approach we can share the common npm packages when running the apps within the container thus reducing the bundle size.

Collapse
 
ashishjshetty profile image
Ashish J shetty

@kpiteng is this approach better than the web pack module federation approach ?
also in Module federation approach we can kind of can share the the common npm packages without increasing the bundle size. is it possible via this approach ?.

Collapse
 
tonyftannous profile image
TonyFTannous

Hi. can i use lazy load, in a microfrontend app. why i ask this question because one of the rule of the microfrontend app is: when the container app tries to load the MFE, everything should be in one JS file, so we must disable the chunking. if this is true how the lazy load work??? if the chunking file will be disabled and everything should be in one JS

Collapse
 
vickywar profile image
vickywar

but isn't this what the code splitting of react does ? with the use of Suspense and lazy load. the bundle size reduces anyways .. what is the exception in this method of implementation when compared to code split ?

Collapse
 
bhagat profile image
Veldurthi1996

Why can't I use props children in micro frontend, I'm moving my entire react application to micro frontend, I'm using props children in few places mostly when I'm using useContext(), but seems like I'm unable to access children in props

Collapse
 
simbo1905 profile image
Simon Massey

Take a look at the book “Microfrontends In Action” that discusses exchanging state.

Essential the approach doesn’t come “for free” in terms that “fragments” as the book calls them are more “isolated” from each other than a normal app. So two things come into play: if they are closely related they should probably be in the same “frontend”. If they are truly two separate “fragments” that should be owned by different dev teams and deployed independently (which is the whole point of doing microfrontends) then you need to look at specific details of what to send “events” between the fragments that they can respond to.

I am currently looking at what the different options are for that. In some of our cases sending events via the backend makes sense for a few of our use cases. Just because the reason we need to update many fragments on the UI is exactly because the uses have pushing work to the server.

In other cases it’s is truly the case that we want to sync state across the fragments without any writes to the server. In which case the book discusses that.

Collapse
 
atlanter profile image
Michał Śnieżyński

so, you did not push commits, I don't see react-app-rewired changes

Collapse
 
atlanter profile image
Michał Śnieżyński

and it looks like it's mostly inspired by
blog.bitsrc.io/how-to-develop-micr...

Collapse
 
kpiteng profile image
kpiteng Author

react-app-rewired are there in web-app-blogs and web-app-header application.

Collapse
 
jagajastic profile image
Ibrahim Joseph M.

I am curious to know, what about a situation where one of the microFrontnend host have issue responding, what ways can you handle that considering the user experince?

Collapse
 
jennyphan profile image
Jenny Phan

You can display an error message if there is an error loading the Micro Front-End.

Collapse
 
ecarrera profile image
Emisael Carrera

Excellent explanation @kpiteng , I was wondering how to deal with the routing to render each microfront this is why I came here. Thank you very much for this guide.

Collapse
 
fahad07_khan profile image
Fahad Khan

As I have learnt, this pattern can be useful for development purpose beacuse it's easy to maintain & pretty clean code. How about app performance ?

Collapse
 
kpiteng profile image
kpiteng Author

App Performance will be faster because your app divided into multiple web apps according your requirement so bundle size reduced and performance increased.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!