Microfrontends Single-SPA Migration: Converting create-react-app to a Microfrontend app using Single-SPA Without Eject

The challenge of using Run-Time Microfrontends with create-react-app (CRA) has been escalating over the past year. There are multiple reasons that prohibit you from using CRA, here are the main two reasons:

1. CRA is built to use index.html for each SPA, while Microfrontends uses remote js files to live in one html.
2. CRA does not allow you to modify Webpack configurations without eject

You might ask the question: "Why depend on CRA?" Well, CRA saves a lot of time and Webpack configurations that most developers are trying to avoid. Facebook keeps releasing performance improvements and new features through react-scripts. If you eject from CRA, you will not receive any updates or bug fixes. You might have to own the configurations and learn Webpack to build sites from scratch. This is not an easy choice for most developers. There is a tool that was created to get around this issue is called CRACO (Create-React-App?Configuration?Override), which I will discuss in other articles

In this article, I will explain how to convert a project that was created with create-react-app to a Single-SPA Microfrontend application.

1. Setup your Mac with Node.js and NPM/Yarn

Please, follow the following article if you need to set up a new machine.

2. Create a react app project

please, follow the following article to create a new react app from scratch using create-react-app

3. Open the project in Visual Studio code.

4. Open package.json, and it should look as follows:

5. Delete the dependencies and the scripts highlighted above so that the file will be as follows:

Note, your file might look longer with more dependencies. Just search for the highlighted above and remove them and leave the rest.

Now, run npx create-single-spa to convert to a single-spa

npx create-single-spa        

Select the options the are shown in the image below. Of course, names will be different, and you may select npm if you want

After that, it will ask you to overwrite both package.json and .gitignore. Select y for both

Notice the changes single-spa added to package.json

When we were configuring Module Federation, we had to write those changes ourselves. The nice thing about single-spa, it will make the needed changes for you.

6. Delete the public folder

Since we will be using Webpack directly, let's delete the public folder. To be able to merge multiple Microfrontends together, we have to include them in a single index.html. Therefore we need to delete the one created by CRA.

Your directory will look close to the following image:

All the highlighted green files were created by create-single-spa

When you open the src folder, you will find three new files as shown, below

rany-react-app-1.js (organization-projectname.js): this is a replacement from index.js. It is named according to the options you provided to the create-single-spa command.

Let's delete index.js since we will be using rany-react-app-1.js

The file root.component.js is the replacement for App.js. However, we will keep using App.js because this is our main app. Let's delete root.component.js and replace the import on rany-react-app-1.js

To be as follows:

Also, import index.css inside rany-react-app-1.js.