Example of Micro-Frontends using Single-Spa Framework and React

Why Microservices?

Resilience

Scalability

The right tool for the right task

Time to market

Debugging and maintenance

Improved ROI

Continuous delivery

Overview of the finished app

  1. A root container app “root-config” that serves as the main page container and coordinates the mounting and unmounting of the micro-frontend apps.
  2. A micro-frontend “nav-app” that’s always present on the page and displays the navbar.
  3. A micro-frontend “app 1” that only shows when it is active.
  4. A micro-frontend “app 2” that also only shows when it is active.

Lets get started

mkdir micro-frontend
cd micro-frontend
mkdir root-config
cd root-config
create-single-spa
  • Directory for new project => go with the default so just press enter.
  • Select type to generate => “single-spa root config”
  • Which package manager do you want to use? => i picked “npm” but yarn works also.
  • Will this project use Typescript? => i picked “No” but if you are planing to use Typescript then pick “yes”.
  • Would you like to use Single-spa Layout Engine? => “No”
  • Organization name => this is also up to you i entered “admcos”
cd ..
mkdir $app
cd $app
create-single-spa
  • Directory for new project => again use the default, so just press enter
  • Select type to generate => “single-spa application / parcel”
  • Which framework do you want to use? => i picked “react” but this is up to you
  • Which package manager do you want to use? => i picked “npm” but yarn works also.
  • Will this project use Typescript? => Again i picked “No” but if you are planing to use Typescript then pick “yes”.
  • Organization name (can use letters, numbers, dash or underscore) => enter the same organisation name as for the root config app in my case that is “admcos”
  • Project name (can use letters, numbers, dash or underscore) => here enter the app name.
All four apps generated. Each is hosted in its own repository.

Registering Micro-Frontend Apps

the newly created activity-functions.js file
The updated root-config .js file
  1. Add the following code inside the head tag to specify where each app can be found when running locally.
the updated index.ejs file
html syntax that we add to index.ejs

Local Test Run

  1. Open four terminal/command prompts, one for each app
  2. For the root config, in the root-config directory: `npm start` (runs on port 9000 by default)
  3. For the micro-frontend nav app, in the nav-app directory: `npm start --port 9001`
  4. For micro-frontend app 1, in the app1 directory: `npm start --port 9002`
  5. For micro-frontend app 2, in the app2 directory: `npm start --port 9003`
Its alive :)
"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",
The fabulous styling is applied to the application

Adding React Router

The updated root component of the nav-app
And we see that the react-router changes are working as expected

Getting Ready for Production

--

--

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
Admir Cosic

Admir Cosic

I am a developer who is passionate about stuff like IOT and home automation. Few tech that I enjoy working in are .net core, C#, Typescript and Azure.