How to Micro Frontend with React - Robin Wieruch

Micro Frontends are the equivalent for Microservices: Whereas microservices are an architecture to split up monolithic backend applications into smaller services, micro frontends can be used to achieve the same on the frontend. But they are not as popular as microservices yet.

For my last client, I made a experimental spike for a Micro Frontend React with Webpack scenario. Here I want to share what I came up with. The finished experimental micro frontend application can be found here .

We will start with this advanced React with Webpack setup . Also you will need an installation of React Router. Let’s go through the React components step by step. This is our src/index.js root entry point:

From there, we have a App component in src/App/index.js :

The App component takes care of the routing with React router, therefore displays the navigation with links, and renders depending on the route a Programming or Installation component. Both of these components will be our micro frontends. But more about this later.

For the sake of completeness, this is the src/constants/routes.js file:

Each micro frontend component, here Installation and Programming, exist in their own folder. One in src/Installation/index.js and one in src/Programming/index.js :

The folder structure should look similar to this one:

So far, all components are pretty much coupled to each other. The App component renders the Installation and Programming components. Let’s move over to our Webpack setup to enable the micro frontend architecture with these React components.

We will start with the package.json file and move all the layers down to our Webpack configuration file. Previously we had only one script to start this React application. Now we extend it with two more commands to start one of our micro frontends:

The only thing changed to the previous start script are these new --env micro flags. That’s how we can distinguish in Webpack which application should start as micro frontend. Our build-utils/webpack.config.js file looks like this one:

Note: The environment config depends on the other env flag that is passed in to evaluate between development or production build. The getAddons function is optional, if you have Webpack addons in place. Check again how to set up a build process and addons with Webpack .

Now we change this implementation to the following:

This change assumes that our build-utils/webpack.common.js file doesn’t export a configuration object anymore, but a function which return the configuration object. Essentially depending on the micro flag, this function returns an appropriate configuration. We are doing this for the common Webpack configuration here, but it would work the same with the development or production Webpack configuration files, if the flag would be needed there.

Now in the build-utils/webpack.common.js file, we only have to adjust two things. We transform the following object:

To a function which returns an object, has the micro flag as argument, and returns depending on whether we want to return a micro frontend or not the appropriate entry point file. If there is no micro flag, we return the standard src/index.js file which renders the App component, if there is a micro flag we return a dynamic file from our source folder:

We don’t have this standalone.js file yet. We need to offer these new entry point files for our micro frontends in our source folder. That happens next.

Let’s go through the first micro frontend standalone.js file which is src/Installation/standalone.js :

This file takes the regular Installation component, which has been used in the App component before, and wraps it into another React component (here InstallationStandalone). This new wrapping component is then used to render everything with React DOM.

What’s important about this new wrapper component (InstallationStandalone) is that you can provide any information to the Installation component which isn’t coming from the App component anymore. Previously the App component may would provide data to the Installation component. Now this data isn’t available anymore, because the Installation component has to render on its own. That’s where the InstallationStandalone component comes into play to provide this data as props.

We can apply the same for the second micro frontend standalone.js file which is src/Programming/standalone.js . Notice the isStandalone flag, which helps us later to identify in the micro frontend component (here Programming) whether its rendered standalone as micro frontend or as one part of a larger monolith.

The isStandalone flag can be used in each component. We will use it to render a link to the other micro frontend component, but only if the component itself isn’t a micro frontend. In src/Installation/index.js we do:

And in src/Programming/index.js we do:

Now you can try to run your new micro frontend npm scripts. Whereas npm start create the whole monolith application with the App component, the other new npm scripts only create the micro frontends:

You are able to run both micro frontends on their own. If they are run on their own, their standalone wrapper component is used to be render in HTML and to provide additional props which would normally come from the App component.

What you have seen is only a first spike on how to create a micro frontend architecture with Webpack and React. There are still a lot of more things to consider:

Anyway, if you were looking for how to create a micro frontend with React, I hope this walkthrough has helped you to get an idea about how to achieve it.