From Monolithic To Micro Frontends - Part 3
Tags: javascript, react, angular, webdev
Published: 2021-01-15 17:35:06

## Table Of Contents
- [Prerequisites](#Prerequisites)
- [Application Registration](#ApplicationRegistration)
  - [index.html] (#indexHtml)
  - [index.js] (#indexJS)

- [Start The Application](#startApp)
- [Conclusion](#Conclusion)

This will be the last part of the series and, we will see how can we register our **Angular** application inside our **React** application.
## Prerequisites <a name="Prerequisites"></a>
- Inside your **Angular** application open **main.single-spa.ts** file, and insert this line of code
```js
import "zone.js/dist/zone.js";
```
- Run your **Angular** application
```sh
npm run serve:single-spa:angular-app
```

And now you should have your **Angular** application running and its **main.js** file serving using this URL: http://localhost:4200/main.js

## Application Registration <a name="ApplicationRegistration"></a>
To register your **Angular** application you will need to use **systemjs** to load your **Angular** application module from the URL

Note: if you used **systemjs** directly to import your module inside your **React** application you might face this error
**'System.import' is restricted from being used. Please use import()**, so we will use a workaround to register the application.
### index.html <a name="indexHtml"></a>
- Open **index.html** inside the public folder, and add these scripts which are responsible to load **systemjs** library
```html
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.min.js"></script>
```
- Create our import map JSON object, which will contain a key value for our **Angular** application the key will be a unique name and the value will be the URL of the module, and also will contain the shared dependencies, read more about it from [here](https://single-spa.js.org/docs/getting-started-overview/#add-shared-dependencies)
```html
<script type="systemjs-importmap">
  {
    "imports": {
      "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.5/lib/system/single-spa.min.js",
      "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
      "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
      "@angularApp": "http://localhost:4200/main.js"
    }
  }
</script>
```
- Create a new script tag and inside it, we will define our function which will be used to load our **Angular** application module
```html
<script>
   window["@angularApp"] = () => System.import("@angularApp");
</script>
```
The final result for **index.html** should be like this
{% gist https://gist.github.com/Abdelrahman-H-Mahmoud/89696938213880d015607fc8035909c7 %}

### index.js <a name="indexJS"></a>
- Open **index.js** file inside your **React** application and, add this snippet to register your application before `start()`
```js
registerApplication(
  '@angularApp',
  window["@angularApp"],
  (location) => true
);
```
The final result for **index.js** should be like this
{% gist https://gist.github.com/Abdelrahman-H-Mahmoud/3fc5bb892902357d818262350abe2c76 %}

## Start The Application <a name="startApp"></a>
Now run your **React** application using the same script 
```sh
npm start
```
and your application should be started and working fine, you can access it using this URL: http://localhost:3000/.
Now the two applications are running on the same page. you can control when to load or unload the application from the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) by implementing the activity function inside `registerApplication` for more info check the [documentation](https://single-spa.js.org/docs/configuration), in my case, I want to run the two applications on the same page, so I just returned `true`.

## Conclusion <a name="Conclusion"></a>
Alright, that is all for now, and I hope it was useful for you. You should now have a basic knowledge of what is **micro frontends** and how **single-spa** managed it. Also, I will leave below some references you can get back to it anytime.
- A complete working demo in this Github [Repo]. (https://github.com/Abdelrahman-H-Mahmoud/single-spa-demo)
- Micro frontends architecture [here](https://martinfowler.com/articles/micro-frontends.html)
- single-spa [documentation](https://single-spa.js.org/docs/getting-started-overview)