From Monolithic To Micro Frontends - Part 2

Table Of Contents

• Migrating React Application

  • Migrate to single-spa application
  • Configure Root Config

• Migrating Angular Application

Migrating React Application

To migrate any existing React application I followed this documentation from single-spa and also You can find a complete working solution in this GitHub repo.
I am assuming you already have an existing React application.

Migrate to single-spa application

• Inside your React root folder application, install single-spa and single-spa-react using npm or yarn

npm i single-spa single-spa-react
// or with yarn
yarn add single-spa single-spa-react

• Create a file and name it root.app.js inside the src folder (you can choose whatever name you want)

touch src/root.app.js

inside this file, we will establish the root component, which is the top-level React component to be rendered. In our case, it will be App Component inside App.js
the code inside root.app.js should be looks like this

by the end of this point, we have now a single-spa application that we can register inside our root-config

Configure Root Config

Now let's configure our root-config, replace the code inside your index.js file with the code below

by doing this we are doing several steps, telling the single-spa to register your React application using registerApplication and start the application by calling the start() function.

Benefits of migration using this way

• We are using the same react-script.
• We don't have to configure webpack from scratch, as we are hijacking the current entry point, src/index.js, so there is no need to eject our React application and reconfigure the webpack.

You can run the application using the same scripts npm start.

---

Migrating Angular Application

To migrate any existing Angular application I followed this documentation from single-spa I am assuming you already have an existing Angular application.
in my case, I am using Angular version 10

• Inside your root folder run the following command

ng add single-spa-angular

According to single-spa documentation, this command will:

• Install single-spa-angular.
• Generate a main.single-spa.ts in your project src/.
• Generate single-spa-props.ts in src/single-spa/.
• Generate asset-url.ts in src/single-spa/.
• Generate an EmptyRouteComponent in src/app/empty-route/, to be used in app-routing.module.ts.
• Add an npm script npm run build:single-spa.
• Add an npm script npm run serve:single-spa.

and also will:

• Add single-spa as a dependency, you will need to install it, as it not installed by default, it will be only added to your package.json, you can install it manually

npm i single-spa

or in your root folder where your package.json located run

npm i

which will refresh your dependencies tree and install any missing package.

• Generate extra-webpack.config.js
• Update build option inside angular.json and use @angular-builders/custom-webpack instead of @angular-devkit/build-angular you will need to install other dependencies by running

npm i @angular-builders/custom-webpack
npm i @types/node@14.0.4 --saveDev

Extra Steps to complete the migration

Some of these steps are not documented in the single-spa documentation, and I figured it out while I was migrating the application

• Inside app.module.ts file

import {APP_BASE_HREF} from '@angular/common';

and add this object to the providers array

{provide: APP_BASE_HREF, useValue: '/'}

• Inside tsconfig.app.json, add node to types array "types": ["node"]

• In package.json, --deploy-url flag should be set to the host URL, In order for the webpack public path to be correctly set for your assets, see this Stack Overflow answer.

The result of this migration is a compiled JS file. After finishing the migration you can run the Angular application using this command

npm run serve:single-spa:angular-app

Which will start a dev server that is serving your js file, which will be located in http://localhost:4200/main.js

---

Conclusion

What have been done till now:

• Migrated an existing React application.
• Created our core config file.
• Migrated an existing Angular application.

A complete working solution can be found in this Github repo, and it will be updated accordingly with each part published.

In the next part, we will talk more about how to register your Angular application inside your root config file.