This post is part of the "Building design system and micro frontends" series. See the first post for context. Source code for all the parts of this series can be found in this GitHub repository.

1. Building design system and micro frontends

2. Building and publishing design system

3. Building micro frontend consuming design system (you are here)

4. Building shell application for micro frontends

In this part, we will create a react application that consumes the design system. The app will have the capability to display itself as a standalone app or as a micro frontend in shell application.

The idea here is to create a react app that does not automatically mount to DOM but rather assigns two functions mount and unmount to a property on the window object. The page that wants to display this app will call mount function and give it a host DOMElment plus some configuration. In our case, the configuration will be one property isStandAlone that will indicate if the app should display its own shell or as embedded micro fronted. We will also create an `index.html` file which will be deployed along with the application. If someone tries to access our app directly, the server will serve index.html. HTML will contain a small script that will set up our app in stand-alone mode.

Create directory nutrition-portal in the same folder as design-systme (next to each other).

Run following commands from nutrition-portal directory to setup project dependencies:

Now we need a few files.

Create file ./.bablrc with the following content:

Create file ./src/App.js with the following content:

Make sure paths in lines 3 and 4 are reflecting where you placed your design system.

Create file ./src/index.js with the following content:

./src/index.js will be our entry point. The important part here is that it is not rendering our react app but rather defines two functions for mounting and unmounting our app. At the end mount and unmount functions are assigned to a property on window object.

Create file ./src/index.html with the following content:

After deployment, if anyone hits the correct domain he will see this micro frontend rendered in standalone mode. A little script at the end of body will mount application to the div. We also pass arguments to the app making clear it should render with its own shell.

Create file ./webpack.config.js with the following content:

This is a standard webpack setup for an react app.

Finally add following script to ./package.json file (scripts object):

You can run the application in stand-mode by running npm start; it should bind to port 7001. Open http://localhost:7001. You should see something like this:

For the other micro frontends you can repeat the setup or simply copy this application and change the following things in the copy:

• The application package name in package.json (property name at the top of the file). This is important for webpack. You won't be able to load two micro frontends with the same package name in one shell application.

• Port number in webpack.config.js (the setting is in devServer section, line 45)

• The name of mount and unmount functions in ./src/index.js (lines 13,14)

• The name of mount function in ./src/index.html (line 13)

• Micro frontend name in the App.js (label of the button, line 11).

In the repository with the code for this series I created additional copies: exercise-portal, meals-planner-portal, and recipes-portal.

What´s next?

In the next post, we will integrate micro frontends inside the shell application. It will be the last post in this series.