Building Micro Frontends Using Single-SPA Framework
By: Charuka Herath
Tags: JavaScript, Angular, Frontend, React, Frontend Development

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.

Configuring the APP

Keep the directory for the new project as the current 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 .

(out of the three options appear) as the . Select the package manager (yarn or npm). Here I chose yarn.

(yarn or npm). Here I chose yarn. I only selected JavaScript for the project language.

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.

The folder structure of the APP

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.

Single-SPA root config App

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.

Creating single-SPA for header APP

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.

Final file structure for the APP

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/react@16.13.1/umd/react.production.min.js",

"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/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

index.ejs file

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 is charuka95-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:

name Project identifier, which has a format of @organization/project app : SystemJS import call that makes a call to the App in order which helps bring into the root-config application. 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”

Add the single-SPA application into the import map

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

And BOOM you are done!!

Final output in the browser

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