Micro Frontends with single-spa — Step-by-Step Guide

Microservices have gained in popularity in recent years, with many organizations adopting this architectural style to escape the limitations of massive, monolithic backends. Many organizations continue to struggle with monolithic frontend codebases, despite the fact that much has been written about this style of building server-side applications.

Good frontend development is difficult. But more difficult is scaling frontend development so that many teams can work on a huge and complex product at the same time.

There is a recent trend of breaking down frontend monoliths into several smaller, easier to manage, independent applications. This architecture can stimulate teams to contribute to the frontend codebases more effectively.

In this article, we’ll go through the pros and cons and then a simple, step-by-step guide of how we can set up a single-page container application containing micro frontends.

single-page container application containing micro frontends

Pros:

  • codebases that are smaller, more coherent, and easier to manage
  • organisations of decoupled, autonomous teams that are more scalable
  • the opportunity to patch, redesign, or even completely rewrite parts of the frontend in a more gradual manner than previously possible

Cons:

  • independently-built JavaScript bundles can cause duplication of common dependencies, resulting in an increase in the number of bytes sent over the network to our end users.
  • more stuff to manage, more repositories, more pipelines

Create Micro Frontends with single-spa — Step-by-Step

To prove this is technology/framework agnostic, we will use two different frameworks (Angular and React, all served in a single-page application).

Create the root container application

  1. Create a folder for your root application
  2. Run npx create-single-spa — moduleType root-config This will create your root application.
Run npx create-single-spa — moduleType root-config — This will create your root application.
Run npx create-single-spa — moduleType root-config — This will create your root application.

Note:

  • The organization name needs to be consistent across all your micro frontends, as it is considered a namespace to enable in-browser module resolution. (For the purpose of this demo only, I put “Medium” as the organization name.)
  • single-spa Layout Engine is recommended for server-side rendering

3. Run npm install

4. Run npm start

Run npm start to serve the root-config app (container app) on localhost:9000
Run npm start to serve the root-config app (container app) on localhost:9000

5. This will serve on localhost:9000 your root application. On the landing page, you will find the next steps.

This will serve on localhost:9000 your root application. On the landing page you will find the next steps
This will serve on localhost:9000 your root application. On the landing page you will find the next steps

A. Create the Angular micro frontend

  1. Create another folder that will be the repository for your Angular application.
  2. Run npx create-single-spa — moduleType app-parcel and select angular as the framework.
Run npx create-single-spa — moduleType app-parcel and select angular as the framework.

3. In the app.routing.module of the newly created angular application add { provide: APP_BASE_HREF, useValue: ‘/’ } as a provider.

In the app.routing.module of the newly created angular application add { provide: APP_BASE_HREF, useValue: ‘/’ } as a provider
In the app.routing.module of the newly created angular application add { provide: APP_BASE_HREF, useValue: ‘/’ } as a provider

4. In the tsconfig.json make sure you have set “target”: “es2015” and “module”: “esnext”.

In the tsconfig.json make sure you have set “target”: “es2015” and “module”: “esnext”
In the tsconfig.json make sure you have set “target”: “es2015” and “module”: “esnext”

5. Build the application using npm run build:single-spa:<angular-app-name>

6. Run the application using npm run serve:single-spa:<angular-app-name>

7. For the angular app, you may need to add in main.single-spa.ts the following import: import ‘zone.js/dist/zone’;

B. Create the React micro frontend

  1. Create another folder that will be the repository for your React application.
  2. Run npx create-single-spa — moduleType app-parcel and select react as the framework.
Run npx create-single-spa — moduleType app-parcel and select react as the framework.

3. Run the application using npm start

4. For the React app only you need to add the following imports add this in your root’s index.ejs

  • “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"
For the React app only you need to add the following imports add this in your root’s index.ejs
For the React app only you need to add the following imports add this in your root’s index.ejs

Register the applications

  1. In the importmap script from the index.ejs you can register the following applications.
In the importmap script from the index.ejs you can register the following applications.

2. If you are using single-spa Layout Engine, you can edit microfrontend-layout.html file and register the applications inside the main route.

<application name=”<ANGULAR-OR-REACT-APP-NAME”></application>

If you are using single-spa Layout Engine, you can edit microfrontend-layout.html file and register the applications inside the main route.
If you are using single-spa Layout Engine, you can edit microfrontend-layout.html file and register the applications inside the main route.

Check localhost:9000. We now have two different applications served on a single page.

Micro frontends are tied in with cutting up huge and complex codebases into smaller, more sensible pieces, and afterward being unequivocal about the dependencies between them. Our software development teams, our codebases, and our delivery processes should all have the option to work and develop freely of one another, without unreasonable coordination.

Sources:

Software developer working in fintech. Studied Human-Computer Interaction. Passionate about User Experience and Developer Experience.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store