Modern web apps are becoming more and more complex over time. It makes it challenging to release software quickly without sacrificing quality.

As a solution, Micro frontends came into the picture with the objective of building, testing, and deploying pieces of the frontend independently.

In this article, I will show you the steps of developing a Micro frontend App using single-SPA.

Introduction to Single-SPA

“Single-SPA is a JavaScript framework for building, testing, and deploying multiple JavaScript Micro frontends independently in a single frontend application.”

Single-SPA Apps consist of two main parts:

• The container App — single-SPA-root-config

The container App is responsible for rendering the HTML page and the JavaScript that applications(second part).

• Applications

Single-page applications are packaged up into modules and combine with the container app. These applications can be built on top of different frameworks and libraries such as React, Angular, Vue, Ember, etc. However, each application should know how to load mount and unmount itself from the DOM.

Architecture

Runtime MFs vs Build-time MFs

In my demo app, I will have three Micro frontends: the App header, home page, and a test page. All three Microfrontends are independent React applications.

Using the Single SPA framework acts as a container to compose these Micro frontends at runtime.

Even though I chose a runtime composition of MFs, it is important to note that a composition of independent micro-apps during build-time is still a valid solution. In many cases, it even makes more sense than the alternatives.

You can read more about build-time MFs, in Bit’s blog post about building their product with MFs using their own tool — Bit.

Step by Step Guide

Step 01: Creating the Root Configuration Application

First, we need to start by setting up the Root configuration application using
create-single-SPA CLI tool, which is provided by Single-SPA.

npm install -g create-single-spa
yarn global add create-single-spa

However, it is not mandatory to install create-single-spa globally.

Next, create the root configuration App using the following commands.

//create a directory for the App
mkdir single-spa-demo-root-config
cd single-spa-demo-root-config//initializing the single-SPA
npx create-single-spa

After running these commands, you will need to config the single-SPA as the root config application. So, you can choose the given options as follows.

• Keep the directory for the new project as the current directory.
• Select single-SPA roof config (out of the three options appear) as the type to generate.
• Select the package manager (yarn or npm). Here I chose yarn.
• I only selected JavaScript for the project language.
• Since this APP will be a simple single-SPA, I do not choose the Layout Engine.
• You can give any name to your Organization name.

Then relevant application setup will be configured, and you are good to go.

charuka95-root-config.js: File, which will be used to register all Microfrontends using in the application.

Index.ejs: he file which will be using as an index.html file after compilation. The file keeps common modules that can be used by different applications, navigation codes, etc.

Run yarn start , and the App will start to serves locally on the browser port 9000.

Step 02: Registering Three Applications

Here we are using the same commands we used to initialize the root-config application except selecting single-SPA roof config as the type to select. Instead, select single-SPA application/parcel and give appropriate project names.

Note: organization name should be the same name which used in the root-config App configuration.

Here, I have created 03 new folders for the header, home, and the test-page in the root folder for my Microfrontends and initialize three react single-SPA applications for each.

The final file structure for the Microfrontends APP can be seen below.

Then three Apps can be served at 03 separate ports.

yarn start --port 9001
yarn start --port 9002
yarn start --port 9003

Step 03: Configuring the Root App — Add Shared Dependencies

Navigate into the root-config App in the browser and find below two lines of code and add them into the systemjs-import map import map in the root-config project’s index.ejs file.

"react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"

“Here, we add entries for modules that will be shared across your dependencies. For example, a React application generated with create-single-SPA will need to add React and ReactDOM to the import map.”

The output can be seen as below

Step 04: Register Applications

First, navigate into one of your Microfrontend APPs. Here, I will take mine spa-demo-header as the first APP. Then, locate the package.json file and find and copy the project name. (Mine is @charuka95/spa-demo-home )

Go back to the root-config App and locate the @organization_name-root-config.js file(Mine ischaruka95-root-config.js ) Then copy and paste the registerApplication() function in the file.

registerApplication({
    name: “@charuka95/spa-demo-home”,
    app: () => System.import(“@charuka95/spa-demo-home”),
    activeWhen: [“/”]
});

The registerApplication() function is the function that is responsible for registering Microfrontend Apps to single-SPA.

There are three arguments in the function:

1. name Project identifier, which has a format of @organization/project
2. app: SystemJS import call that makes a call to the App in order which helps bring into the root-config application.
3. activeWhen: Manage when the single-SPA application should be activated or deactivated.

Step 05: Add the Single-SPA Application into the Import Map

Finally, locate back the index.ejs file in the root-config app and add the registered Microfrontend App to the import map of the root-config App.

“@charuka95/root-config”:“//localhost:9000/charuka95-root-config.js”

After that, you need to follow steps 04 and step 05 for all other Microfrontend applications.

And BOOM you are done!!

You can clone the full code from my project repositories listed below.

Summary

As we saw throughout the article, there are a massive amount of benefits such as:

• Can be to handle each Microfrontend independently.
• Can deploy independently.
• Ownerships can be distributed.
• Testing is faster than the traditional approaches.
• Each Microfrontend can use a framework of choice.

However, the main challenge here is the upfront efforts to create the structure of the application.

So, in my opinion, unless you are building a complex application, it’s easier to stay with a single frontend and follow component-based development using tools like Bit.

Thank you for reading. Feel free to leave a comment down below and share your experience.