What is single-spa?
You can check more here:
single-spa | single-spa
Use multiple frameworks in a single-page application, allowing you to split code by functionality and have Angular…
⚠️ 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
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:
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:
Adding links to shared modules
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.
Add links for “react” and “react-dom” libraries:
You can get the required links from JSDeliver service:
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than…
Adding link to the navbar-app module
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:
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
⚠️ NOTE: The single-spa application name should be exactly the same as in the
Setting custom port and starting the configured app
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:
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 🎉