What is single-spa 😲 ?

Well, single-spa is nothing more than one more approach to achieve micro-frontend.

Single-spa is a framework where you can bring multiple Javascript frontend applications into a single-page application. Here you can merge different tech stack micro frontends.

Architectural Overview

single-spa apps consist of the following:

1. A single-spa root config, which renders the HTML page and the JavaScript that registers applications. Each application is registered with three things:

• A name
• A function to load the application’s code
• A function that determines when the application is active/inactive

2. Applications that can be thought of as single-page applications packaged up into modules. Each application must know how to bootstrap, mount, and unmount itself from the DOM. The main difference between traditional SPA and single-spa applications is that they must be able to coexist with other applications as they do not each have their own HTML page. For example, your React or Angular SPAs are applications. When active, they can listen to URL routing events and put content on the DOM. When inactive, they do not listen to URL routing events and are totally removed from the DOM.

How hard will it be to use single-spa?

single-spa works with ES5, ES6+, TypeScript, Webpack, SystemJS, Gulp, Grunt, Bower, ember-CLI, or really any build system available. You can npm install it or even just use a <script> tag if you prefer.

While our objective is to make using single-spa as easy as possible, we should also note that this is an advanced architecture that is different from how front-end applications are typically done. This will require changes to existing paradigms as well as an understanding of underlying tools.

If you’re not starting your application from scratch, you’ll have to migrate your SPA to become a single-spa application.

single-spa works in Chrome, Firefox, Safari, Edge, and IE11 (with polyfills).

Single Spa offers three different types based on the place’s needs.

• Single-Spa applications
• Single-Spa Parcel
• Utility modules

Don’t talk 😏 , show me code 👨‍💻

Talking makes me bored, implementing things is something which attracts my interest …….some anonymous

This is a git repo, which you can use to follow up quickly.

https://github.com/dixitayush5085/single-spa-demo

So yeah let's get started with single-spa project development. Here, in this story, I will be integrating one angular application into a single-spa root application… sounds good? let's get started now.

Root Or Host Or Container Application

Let's start with our host application

1. Create a folder for the shell app:

mkdir demo-host && cd demo-host

2. Invoke create-single-spa to generate a root-config by running:

npx create-single-spa --moduleType root-config

and you will get some questions like this

Now we are good with our host application. You can launch it with this command

npm start

Now let’s understand the root project and how it works.

Firstly, check the index.ejs file here you will find a few lines

  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js",
        "@iamcyberster/root-config": "//localhost:9000/iamcyberster-root-config.js"
      }
    }
  </script>
  <% } %>

in the above code snippet we are mapping the micro frontend,

"@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js",

this is the micro frontend which is given by single-spa that can be removed just to show us they added it. Similarly in the import object, we will be adding our micro frontend 😃.

Now again in the same file, there is one more code snippet

  <script>
    System.import('@iamcyberster/root-config');
  </script>

here we will be importing the micro frontend.

Now, go to the microfrontend-layout.html file. In this file, we are using the micro frontend. like this

  <main>
    <route default>
      <application name="@single-spa/welcome"></application>
    </route>
  </main>

Let's Dive into our micro frontend development

We will be writing our micro frontend in angular, the beauty of single-spa is that there is not much difference in its implementation, the most complex one is angular so I am picking an angular-based micro frontend.

1. Create an Angular application.

ng new angular-mfe

then

cd angular-mfe

2. Now we can add a single-spa package to our project using this command

ng add single-spa-angular

After this command, the console will some questions

Would you like to proceed? (Y/n) => Y

Does your application use Angular routing? (Y/n) => n

What port should your project run on? (4200) => press enter

and then run

npm i

After running this command, some changes will happen in our project.

The following changes will be seen after adding the package.

1. Install single-spa-angular.
2. Generate a main.single-spa.ts in your project src/.
3. Generate single-spa-props.ts in src/single-spa/
4. Generate asset-url.ts in src/single-spa/
5. Generate an EmptyRouteComponent in src/app/empty-route/, to be used in app-routing.module.ts.
6. Add an npm script npm run build:single-spa.
7. Add an npm script npm run serve:single-spa.

Changes Explanation:

Point 1: It will add and install a single-spa package into your angular project.

Point 2: Earlier for building/running purposes we were using the main.ts file but single-spa applications will have different bundle requirements. This helps the angular project to understand the bundling requirement for the single-spa host application.

Point 3: This single-spa-props.ts is created for the communication use case. Our micro frontend can communicate with other micro frontends with the help of this file.

Point 4: As we all know bundle can’t have your assets in it. So in this file, you can keep the assets URL which will be used across the project.

Point 5: This file is created for the safe side of routing cases, sometimes if your application encounters any accident wherein it doesn’t know what to do with the current path, then this file comes into play.

Points 6 & 7: Just added two commands to run and build a single-spa application.

That’s it for the Angular application (without routing). Routing Integration will explain in some other article.

Now we are good with our app, we can integrate it.

To proceed, we have to start with index.ejs

 <script type="systemjs-importmap">
    {
      "imports": {
        "@phenom/root-config": "//localhost:9000/phenom-root-config.js",
        "angular-demo": "http://localhost:4200/main.js"
      }
    }
  </script>

and then in same file at the bottom

 <script>
    System.import('@phenom/root-config');
    
    // here 👇
    System.import('angular-demo');

  </script>

then you have uncomment the script tag here

  <!--
    If you need to support Angular applications, uncomment the script tag below to ensure only one instance of ZoneJS is loaded
    Learn more about why at https://single-spa.js.org/docs/ecosystem-angular/#zonejs
  -->
  <script src="https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js"></script>

After this, we have to do changes in microfrontend-layout.html

 <main>
      <application name="angular-demo"></application>
  </main>

After doing these changes go to your angular app and start it with

ng serve 

OR

npm run serve:single-spa:angular-mfe

Now your angular application has started.

We have to start our shell/root/container application with this command

npm start

The root application will start at 9000

http://localhost:9000/

going on this page, you will be able to see your angular app running.

That’s it!!!!!!!!!!!!

You have successfully integrated your micro frontend app into the host application. 🥳

here’s my git repo.

https://github.com/dixitayush5085/single-spa-demo

Conclusion:

In my last article, I explained angular element which is also a good approach. You can check it out here.

Micro frontend exists 🤔 (Angular Elements)

Please do let me know if you get stuck somewhere.

Thank you so much. If you have followed till here. If this article has helped you in some manner please consider following and clapping. 😄