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

4. Building shell application for micro frontends (you are here)

In this post, we will create the last piece of our micro frontends with the design system PoC. We now have a design system, several micro frontends consuming this design system, and we need now a shell application that will import micro frontends and display them. This shell application will import micro frontends using script tags and script URLs hardcoded in index.html in the real project, it would be driven by some sort of configuration.

This series will not cover two aspects: module federation and mounting microseconds to isolated virtual DOM. Module federation helps to lower the size of included script by requesting modules, used by more than one micro frontend, only once. If we want to increase isolation between micro frontend we can create a web component that will mount micro frontend to isolated virtual dom.

Create directory fitness-portal-shell in the same directory as design-system and micro frontends. Run the following commands, from the new directory to setup project dependencies:

Now we need a few files.

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

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

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

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

This is a naive implementation where we hard-code links to micro frontends' resources in a real project it would come from the configuration.

No we will configure build.

Create file ./.bablrc with the following content:

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

Open ./package.json and add following script to scripts section:

You should be able to build the shell app now. Run npm start. It should bind to port 7000. Remember to build and run micro frontends first.