Micro-frontends gives you the ability to break your frontend into smaller pieces that make sense. This will allow you to test, build, develop, and deploy those pieces faster, since they’re independent. This article shows you how to build your own micro-frontend app from scratch using the single-spa angular framework.

1. How to Build a Micro-Application
using Single-Spa
By,
Shwetha Thomas, Senior Software Engineer

2. How to Build a Micro-Application using Single-Spa
© RapidValue Solutions 2
How to Create a Micro-Application using Single-Spa
Following are the steps to create a micro-application:
● Create an angular application with a unique prefix.
ng new --prefix app1
● Enter the command ng add single-spa-angular in our project which in turn will do the
following:
- Install single-spa-angular
- Generates a main.single-spa.ts in our project src/.
- Generates single-spa-props.ts in src/single-spa/
- Generates asset-url.ts in src/single-spa/
- Generates an EmptyRouteComponent in src/app/empty-route/, to be used in app-
routing.module.ts.
- Add an npm script npm run build:single-spa.
- Add an npm script npm run serve:single-spa.
● Install custom-webpack as dev dependency(npm install -D @angular-builders/custom-
webpack@9.1.0)
● Add providers: [{provide: APP_BASE_HREF, useValue: '/'}] to app-routing.module.ts
● Add {path: '**', component: EmptyRouteComponent} to our app-routing.module.ts routes.
● Add a declaration for EmptyRouteComponent in app.module.ts
● Register the micro-app in the index.html file and call single-spa.start() function.
For example,

3. How to Build a Micro-Application using Single-Spa
© RapidValue Solutions 3
Figure 1: Import single-spa
Here, we are using import maps to set the path for our micro-app. student is the micro app here
which we are registering. Since we are running locally, the localhosturl is given. Once we deploy
the micro app, we can replace local url by giving the deployed url. main.js is a javascript file with the
webpack which is created while running the app. While building the app, main-es2015.js file is
created in the dist folder with the webpack.
Figure 2: Register application
This script tag is given inside the body. Here we are registering the micro-app and then calling the
singleSpa.start(). In this example, the function returns true, which means the app will be loaded by
default. We can also specify a route, so the micro-app will be mounted only on calling the specific
route.
If the function returns, location.pathname.startsWith(‘/student’); student micro-app will be
loaded only on calling /student.
There are some script tags, which is needed on loading micro-apps which are given below:
<script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>

4. How to Build a Micro-Application using Single-Spa
© RapidValue Solutions 4
<script src="https://unpkg.com/zone.js"></script>
<script src="https://unpkg.com/import-map-overrides@1.6.0/dist/import-map-overrides.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-
register.min.js"></script>
Make sure each micro-app runs in a different port locally.
Serving a Micro-Application
To serve a micro-application, run the following command:
npm run serve:single-spa
For angular version greater than 9, app name will be appended to this command. Check the
package.json to know the exact command.
For example,
npm run serve:single-spa:app
Building a Micro-Application
.To build a micro-application, run the following command:
npm run build:single-spa
For angular version greater than 9, app name will be appended to this command. Check the
package.json to know the exact command.

5. How to Build a Micro-Application using Single-Spa
© RapidValue Solutions 5
For example,
npm run build:single-spa:app
This will create a dist folder.
How to Register the Micro-Apps into the Portal
We can load any number of micro-apps in a single application which is the portal. To create a portal application, we
need an HTML file where we can register our micro-apps and call singleSpa.start().
To register a micro-app into the portal,
● We must specify the main.js path of the micro-app in the portal
● Add the required scripts
● Register the micro-application
● Call singleSpa.start()
Take a look at the images given below for a better understanding.
Figure 1: Specify main.js path

6. How to Build a Micro-Application using Single-Spa
© RapidValue Solutions 6
Figure 2: Register micro-app and call start method
This part is the same as registering a micro-app to itself.
Following the above-mentioned steps ensures that the process of building and registering micro-applications in the
portal is as seamless as possible.

7. How to Build a Micro-Application using Single-Spa
© RapidValue Solutions 7
About RapidValue
RapidValue is a global leader in providing digital product engineering solutions including Mobility, Cloud,
Omni-channel, IoT and RPA to enterprises worldwide. RapidValue offers its digital services to the world’s
top brands, Fortune 1000 companies, and innovative emerging start-ups. With offices in the United
States, the United Kingdom, Germany, and India and operations spread across the Middle-East, Europe,
and Canada, RapidValue delivers enterprise service and solutions across various industry verticals.
Disclaimer:
This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No part of it may be used,
circulated, quoted, or reproduced for distribution outside RapidValue. If you are not the intended recipient of this report, you are
hereby notified that the use, circulation, quoting, or reproducing of this report is strictly prohibited and may be unlawful.
© RapidValue Solutions
www.rapidvaluesolutions.com/blog
www.rapidvaluesolutions.com
+1 877.643.1850 contactus@rapidvaluesolutions.com