Build Micro Frontends with single-spa: A Guide

TL;DR: Using single-spa to build micro frontends makes it easier to split a large app into small, independent pieces so different teams can work on parts without affecting others. This blog shows how to create Angular and React micro frontends, connect them to a root config, and deploy them.

Micro Frontends have become a popular architectural style for scaling frontend apps, particularly when multiple teams work on different parts of a user interface. By breaking down monolithic frontends into smaller, independent modules, teams can deploy, update, and scale parts of an app separately. This article will discuss how to create and connect micro frontends of different frameworks using single-spa.

Introduction to single-spa

Single-spa is a JavaScript-based framework designed for micro frontend architecture. It allows you to build micro frontends using frameworks like Angular, React, and Vue and serve them as a single app. It maintains a register of connected apps and uses routes to redirect users to different apps.

Using a single-SPA framework has many benefits, such as choosing different languages for different parts of the app, independent development and deployment of micro frontends, and scalability. So, let’s get started with creating a single-spa.

Creating a single-spa

Prerequisites

To implement a single-spa, it is important to have Node.js and npm installed. To install them, go to the Node.js website and download the latest version for your operating system. Run the installer to complete the installation.

Then, verify the node.js and npm installation by executing the following commands in the command prompt.

npm - version
node - version

Step 1: Setting up the project

In this example, two simple micro frontends will be created using Angular and React. A root-config will serve the two micro frontends.

Create an app

We can create a simple Angular micro frontend app by executing the following command.

ng new angular-spa-frontend

Once the project has been created, execute the next command to install the single-spa library.

ng add single-spa-angular

Once the library has been installed properly, a file named main.single-spa.ts will be created in the Angular project, which contains all the configurations related to single-spa.

Refer to the configuration code.

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

It is required to provide an APP_BASE_HREF value to work as a single-spa.

Furthermore, upon adding the single-spa library, package.json will contain two additional scripts.

npm - version
node - version

The angular.json file will be modified using the following configurations.

ng new angular-spa-frontend

“main”: “src/main.ts” will be replaced with “main”: “src/main.single-spa.ts”. A new build configuration will be added as a JavaScript module.

Once the configurations are completed and verified, we can serve the Angular app using the following command.

ng add single-spa-angular

Now that we have successfully created the micro frontend app, let’s look at how to implement the root-config.

Root-config

Execute the following command to create the root-config.

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Upon entering this command, a series of configurations will be presented to create the root-config.

After selecting the previous configurations, the root config will be created to serve multiple frontends.

To connect the created micro frontend to the root-config, we need to modify the root-config.ts and index.ejs files.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

As mentioned in the previous code block, the created micro frontend should be imported in the root-config.ts file.

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

The following scripts should be added to the index.ejs file.

npm run serve:single-spa:angular-spa-frontend

Created micro frontend ( @org/angular-spa-frontend ), along with the URL ( http://localhost:4200/main.js ) in which the micro frontend has been hosted, has to be added in the import map.

Then, execute the following command to run the app.

npx create-single-spa

Assuming these steps are done correctly, we should be able to see the final single-spa in the view, similar to the following image.

Step 2: Deployment in production

When deploying these micro frontends in production, it is recommended that each micro frontend app be deployed as an independent, standalone app. The root configuration will presumably load each app dynamically, depending on the app routes set in the registerApplication.

Step 3: Adding more micro frontends

To add more micro frontends, repeat the previously mentioned steps. Let’s look at how to integrate a React micro frontend into the same root-config.

Create a new React micro frontend using the following command.

npm - version
node - version

Then, navigate inside the created project and install single-spa-react.

ng new angular-spa-frontend

Modify the entry file to export lifecycle methods to make the app compatible with single-spa.

ng add single-spa-angular

Once the configurations are completed, we can serve the React micro frontend using the following command.

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

To integrate the created micro frontend with the existing root-config , implement the following modifications to the files in root-config.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

You also need to update the index.ejs file with the main bundle path of the React app.

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

GitHub reference

Check out the complete code example of this single-spa application in this GitHub demo.

Conclusion

Using single-spa to build micro frontends makes it easier to split a large app into small, independent pieces. This way, different teams can work on their parts without affecting others and use the frameworks they prefer, like Angular or React. Following the steps in this guide, you can set up a single-spa project, connect multiple micro frontends, and give users a smooth experience. Single-spa makes it simple to grow your app over time and add new features as needed.

Related Blogs

• Master Asynchronous JavaScript with RxJS
• Axios and Fetch API? Choosing the Right HTTP Client
• TypeScript Utility Types: A Complete Guide
• Secure JWT Storage: Best Practices

The above is the detailed content of Build Micro Frontends with single-spa: A Guide. For more information, please follow other related articles on the PHP Chinese website!