Create Microfrontend Application using Single SPA framework

Microfrontend Architecture has been created for a large-scale web application that is managed or developed by several teams across the geolocation. It is a big benefit for the developers and the business as several teams can choose different technology or an existing monolith application can be scale as a micro app working loosely. Microfrontend is a Microservice based approach for web development. (Microservice - Microservices is an architecture style, that structures an application as a collection of loosely coupled services.)

Suppose, a large web application has been build over the years, and due to version change, functionality change it becomes difficult to manage the code later days. This type of application is called the Monolith application. To overcome this sort of problem, Microforntend Architecture has been introduced. Microfrontend application can be managed by different teams, different CI/CD pipelines, different hosting, and altogether easy to manage based on the availability of resources.

Microfrontend application works as a platform where multiple independent, individual application works together as a whole and serving same user experience.

Microfrontend Architecture can be achieved in the following way -

iframe
External app bootstrapping
Single-SPA library

iFrame as a Microfrontend:

In the HTML world iframe is very common to use, where external sub-application can run independently. Sometimes, iframes are good, but typically they should not be used unless they can be managed in different ways. iFrames are not responsive, the content inside the iframe is ignored by search engines. If you are using iframes multiple times in your application, the page rendering and interaction will go down as the same connection pool will be used for data communications. Mainly iframe could be used for widget integration, there is a postMessage API or we may pass GET parameters to the iframe’s page but it’s not that straightforward as with the JavaScript-only approach.

External App Bootstrapping as a Microfrontend:

In such cases application build in separately followded by indipendent deployment. And each part of application communicate using Window Object, Event Bus. Using Angular, angular elements (ng add @angular/elements) works well to achieve microfrontend pattern, Where main application knows other application as a tag (<custom-card-element></custom-card-element> etc) and each application bundle needs to be added in index.html file separately. There is a one method called 'ngDoBootstrap()' helps to bootstrapping other web apps. Below is the following code -

ngDoBootstrap() {

const myCustomElement = createCustomElement(GreetingsCardComponent, { injector: this.injector });

customElements.define('custom-greetings-card', myCustomElement);

}

Single-SPA framework for Microfrontend:

Single-SPA is one of the best frameworks used for Microforntend apps. It has full support for Angular, React, Vue like technology and by using a single spa framework, it is possible to create a loosely coupled microfrontend application. Here, it's demonstrated how to create a basic application using Single SPA framework, deploy in a different server (for the time being its http-server) and put all together into one single application.

Single-SPA framework has an official site you can check the deployed code and examples as well there.

Using Single-SPA framework, application build in Angular & React, deployed separately and run all micro application into one application.

Let's start building an application using Single SPA:

Here, are the following 4 applications deployed on a different ports, using http-server.

Main Container Application (Vanilla JavaScript)
Navigation Application for routing control (Angular)
Profile Application (React)
Country List Application (Angular)

Whenever you are working with Single SPA, the following steps are needed to follow for creating an Angular application - (The above application is build using Angular v. 8 and React v. 16)

Step 1: Creation of container application

Step 2: Creation of Angular application with the latest version (ng - 8)

ng new subapp-ng (with router & scss support)
ng add single-spa-angular (After installation, changes will happen automatically as follows)
- angular.json – build serve command will change with custom-webpack
- main file will replace with – main.single-spa.ts file
- single-spa folder will be added under src.
- extra-webpack.config.js file will be added under project root folder
- tsconfig.json & tslint.ts file changes

In application main routing module, add the below as a provider.

Provider: [ { provide: APP_BASE_HREF, useValue: ’/’ } ]

Run command in terminal – npm run serve:single-spa

During integration of single-spa-angular if you ever receive any global / buffer error due to 3^rd party library, please use the following to resolve the issue -

Please follow the either solution 1 or solution 2.

Solution 1: (In polyfill.ts file)

(window as any).global = window

Solution 2: (in terminal)

npm i buffer && npx browserify -r buffer/ | npx babel-minify -c -m > buffer.min.js

Step 3: Creation of react application using single-spa-react.

But for that, it is suggested, to follow the uploaded application in GitHub as it is a bit tricky.

Last but not least, there are some difficulties in Single SPA, and those are as follows -

Cons using Microfrontend using Single SPA:

A different version of the library can be used, which may cause dependency issues.
Having same look and feel is a bit difficult as multiple teams has been involved.
As sub application’s data transaction will happen by event, so addEventListner & removedEventLister is developers' responsibility not to get memory leaks.
Duplicate code can be downloaded from different applications.
Application performance might be slower than a complete Angular / react application.
Managing SEO will be difficult.
As multiple team, different CI/CD pipeline has been involved for microfrontend application deployment, so need to be super causes on deployement the application.

Demo Time:

Checkout the following video how it works.

Microfrontend Application deployment in AWS:

The main container application should be deployed to an actual server. If you are using AWS, then create a EC2 instance or serverless lambda function for main application. Install nginx server and run the both js file into the server -

config file - webpack.config.config.dev.js
common dependencies - webpack.common-deps.config.dev.js

Rest of the applications can be used as a static web hosting from S3 and configure each application as CDN with route53. It can also be used by own VPC for each application. So, each and every application can be access securely.

Lastly, change the index.html file systemjs-importmap with updated public facing URL for each application.

GitHub Link for complete codebase: A Web Application using Micro frontend Architecture with Single-SPA framework. Feel free, to comment and provide suggestions.

Happy Coding!