From Monolithic To Micro Frontends - Part 2
Tags: javascript, react, angular, webdev
Published: 2021-01-08 15:27:51

## Table Of Contents
- [Migrating React Application](#Migrating_React_Application)
  - [Migrate to single-spa application] (#Migrate_to_single-spa_application)
  - [Configure Root Config] (#Configure_Root_Config)

- [Migrating Angular Application](#Migrating_Angular_Application)

## Migrating React Application <a name="Migrating_React_Application"></a>
To migrate any existing **React** application I followed this [documentation](https://single-spa.js.org/docs/4.x/migrating-react-tutorial/) from [single-spa](https://single-spa.js.org/) and also You can find a complete working solution in this GitHub [repo](https://github.com/Abdelrahman-H-Mahmoud/single-spa-demo).
I am assuming you already have an existing React application.
### Migrate to single-spa application <a name="Migrate_to_single-spa_application"></a>
- Inside your React root folder application, install [single-spa](https://www.npmjs.com/package/single-spa) and [single-spa-react](https://www.npmjs.com/package/single-spa-react) using `npm` or `yarn`
```sh
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)
```sh
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
{% gist https://gist.github.com/Abdelrahman-H-Mahmoud/37d8f12083116dca7ed811755a4817cc %}
by the end of this point, we have now a single-spa application that we can register inside our **root-config**

### Configure Root Config <a name="Configure_Root_Config" ></a>
Now let's configure our **root-config**, replace the code inside your **index.js** file with the code below

{% gist https://gist.github.com/Abdelrahman-H-Mahmoud/a396c07c832911fcb3368cab70a1cddc %}
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 <a name="Migrating_Angular_Application"></a>
To migrate any existing **Angular** application I followed this [documentation](https://single-spa.js.org/docs/4.x/ecosystem-angular) from [single-spa](https://single-spa.js.org/) 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
```sh
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 
```sh
npm i single-spa
```
or in your root folder where your `package.json` located run
```sh
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
```sh
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
```js
import {APP_BASE_HREF} from '@angular/common';
```
and add this object to the `providers` array
```js
{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](https://stackoverflow.com/questions/47885451/angular-cli-build-using-base-href-and-deploy-url-to-access-assets-on-cdn).

The result of this migration is a compiled JS file. After finishing the migration you can run the Angular application using this command
```sh
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](https://github.com/Abdelrahman-H-Mahmoud/single-spa-demo), 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.