From Monolithic To Micro Frontends - Part 3

#javascript #react #angular #webdev

Prerequisites
Application Registration
- index.html
- index.js
Start The Application
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

Inside your Angular application open main.single-spa.ts file, and insert this line of code

import "zone.js/dist/zone.js";

Run your Angular application

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

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

Open index.html inside the public folder, and add these scripts which are responsible to load systemjs library

<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

<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

<script>
   window["@angularApp"] = () => System.import("@angularApp");
</script>

The final result for index.html should be like this

index.js

Open index.js file inside your React application and, add this snippet to register your application before start()

registerApplication(
  '@angularApp',
  window["@angularApp"],
  (location) => true
);

The final result for index.js should be like this

Start The Application

Now run your React application using the same script

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 by implementing the activity function inside registerApplication for more info check the documentation, in my case, I want to run the two applications on the same page, so I just returned true.

Conclusion

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.