What is single-spa ?

This is the definition given on the official website — single-spa is a framework for bringing together multiple JavaScript microfrontends in a frontend application.

Lets Understand the problem & the need for single-spa?

So, suppose there is an organization ‘xyz’ that is going to build a web application and they have 3 teams and they have 3 use-cases namely home, payment and my profile.

This is the distribution of work and their choice of frameworks among teams

• Team 1 — will handle the use-case of home page and are willing to use Angular
• Team 2 — will handle the use-case of payment and are willing to use React
• Team 3 — will handle the use-case of my profile and are willing to use Vue.js

Now, there are some issues, so let’s discuss about the issues

• All teams have a preference to use different framework/lib for building the application.
• Even though if all 3 teams are on a same page to use a single frameworks, there might be issues such as style leak, merge conflict between teams.
• As the new feature will come in, this will mess up the codebase causing the readibilty, maintenance and scalibilty issues.

Is there any solution to that ?

The solution is to use single-spa. This is because single-spa facilitates microfrontend architecture rather than monolithic architecture where every part of your application can be built and deployed separately.

For above scenarion, all 3 teams can maintain their own separate source code in their preferred framework/lib.

what are the benefits of using single-spa? Let’s decode it

• single-spa is not tied to particular framework so you can use different framework in the application
• single-spa helps in increase of performance as it supports lazy-loading which means that modules will be loaded only when needed.
• single-spa helps to prevent conflicts or issues as it will help teams to have their own version of libaries they use and since parts of application will have separate source code, this will help in merge conflicts.
• single-spa has an advance feature know as parcel. We shall discuss this in some other blog

How ‘xyz’ organization can build their application using single-spa?

Let’s see how they can build the application

So, Firstly we need to create 3 different application (Microfrontend or MFE) in framework desired.

Setup your application or MFE

Let’s assume that the 3 application or MFEs has their own source code with package.json and required libraries and are working independently.

Use module bundler like Webpack

Now, we need to use some module bundler like webpack to bundle each application into Javascript Bundles like below, so firstly install webpack-cli

npm install webpack webpack-cli --save-dev

Bundle each application or MFE to Javascript Bundles

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'home.js', //this name can vary depending 
    path: path.resolve(__dirname, 'dist'), 
  },
};

Run the webpack to generate the bundle files and serve the bundle locally or through a host or CDN server.

Create a root application

Now create a root application and in your root application create a import-map.json file

import-map.json

{
"imports":
 {
  "home": "{path of file}/home.js",
  "payment": "{path of file}/payment.js",
  "profile": "{path of file}/profile.js",
 }
}

Now create a root-configuration file, then register the MFEs and load the modules on the specified path. Also, use a module loader like system js which allows to run modules in differen formats (such as ES6 or CommonJS)

root-config.js

import { registerApplication, start } from 'single-spa';

System.import('https://unpkg.com/systemjs@6.8.3/dist/system.min.js').then(() => {
  System.registerImportMap('{path to import-map}import-map.json').then(() => {
    registerApplication(
      'home',
      () => System.import('home'),
      location => location.pathname.startsWith('/home')
    );

    registerApplication(
      'payment',
      () => System.import('payment'),
      location => location.pathname.startsWith('/payment')
    );

    registerApplication(
      'my-profile',
      () => System.import('profile'),
      location => location.pathname.startsWith('/my-profile')
    );
    start();
  });
});

Now the setup is complete. You can run your root application and run your application built on different frameworks.

That’s all for the basics of single-spa. Thank you!