How to create React Micro Frontends from scratch using single-spa framework

Artem Diashkin
Mar 16 · 5 min read

In this article I will show you how you can create a React single-spa applications (microfrontends) from scratch using create-single-spa CLI tool.

You can check more here:

⚠️ NOTE: If you want to create a React single-spa application from an already existed React application created by create-react-app script — this article is not for you. Because of a create-react-app webpack configuration, we will need to override those settings.

What will be covered in this article?

  • Creating single-spa root config
  • Creating single-spa React application
  • Adding links to shared modules
  • Adding link to the navbar-app module
  • Registering application
  • Setting custom port and starting the configured app

Github repo:

Creating single-spa root config

We will start by creating a root configuration application that will manage our single-spa apps (communication, routing, etc)

First, let’s create an empty project:

Next, we will need to create a root config using create-single-spa CLI. If you wish to have create-single-spa globally available, run the following command in a terminal

npm install --global create-single-spa# oryarn global add create-single-spa

Then run the following:

create-single-spa

All questions with answers I have used for this demo you can see on a screenshot attached below:

After the script run you will see a new root-app folder inside your project:

If we will start this single-spa root-app application using yarn start command…

… we will get this result:

Cool. Root-app is created and running. Now let’s create our first React single-spa application.

Creating single-spa React application

Now we will create our first React microfrontend application using exactly the same approach we used while creating root config, but this time we will need to create a single-spa application instead of a single-spa root config .

After the script run you will see a new navbar-app folder:

root.component.tsx :

Add an entry for modules that will be shared across your dependencies. For example, a React application generated with create-single-spa will need to add React and ReactDOM to the import map.

"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react...",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom..."

Add links for “react” and “react-dom” libraries:

You can get the required links from JSDeliver service:

Example:

Why medium-navbar.js ?

You can check the name of your JS file by running build script inside your app folder. After the build, you will see a nearly create dist folder with the JS file:

Why localhost:9001?

By default, if you will run navbar-app it will run on PORT 8080. We will set PORT to 9001 later, be patient 😉

Before we will run our navbar-app we will need to register it in the root-app, in the <company-name>-root-config.ts file.

⚠️ NOTE: The single-spa application name should be exactly the same as in the navbar-app 's package.json file:

Our final step will be setting a custom port you want to use for your application. This is totally optional. If you will not set your custom port — your react application will run on a port 8080.

But if you will have multiple React/Angular/Vue micro frontend applications (which is the point 🙂) you will need to run your applications on a different port [9000, 9001, 9002, etc]

Now, let’s start our navbar-app by running yarn start inside the navbar-app folder (don’t forget to run root-app too) and see the results:

Result:

You have created your first React microfrontend single-spa application. Congratulation 🎉.

Create as many single-spa applications as you want → just React or React with Vue, or React + Vue + Angular, etc…

P.S. Have you noticed this icon?

This is the single-spa inspector, google chrome extension.

You can inspect your applications → which are mounted and which are not, check your applications url and even override them.

Happy coding 🎉

LITSLINK

LITSLINK’s team is sharing their experience

By LITSLINK

It's a test newsletter! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK

LITSLINK

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK

LITSLINK

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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