Micro Frontend and implementation using single-spa-react framework and SystemJS — Part 02

A diagram showing 3 applications independently going from source control, through build, test and deployment to production


 This is the continuation of the article https://mytechlearns.blogspot.com/2022/06/micro-frontend-and-implementation-using.html, where we had developed the single-spa standalone application (Remote app in terms of micro frontend),


Now we are going to create the Host application which integrates the remote application we developed earlier.


create a new application using single spa as show below



this time we selected the "single-spa root config" as the type to generate.


based on the type of the application, single-spa framework is going to create required templates and files.

Lets check the application by running npm start

if everything goes well you will see the default welcome screen provided by single-spa framework.




Lets modify the config to integrate the screen we developed in the previous tutorial in the host application



add lines from 52 to 54 as shown above

Line 52: location of our remote application js file which contains single-spa lifecycle methods

Line 53 & 54: react and react-dom are the external mentioned in webpack config hence we need to load them externally here


if we don't add line 53 & 54 we get the below error:

Uncaught Error: application '@testorg/testorg-mf01' died in status LOADING_SOURCE_CODE: Unable to resolve bare specifier 'react' from http://localhost:7081/testorg-mf01.js 


2 different ways to load our remote module

    1. change at line 22 in microfrontend-layout.html file like shown below

     


    2. Register the remote application as show in below image in testorg-root-config.js file



registerApplication function takes 4 arguments

1. appName -- name of the application with in the host

2. loadingFunction -- the function to load the remote module which contains single-spa lifecycle methods.

3. activityFunction -- this function tells the application when it should be active, the function will get location object. here we mentioned it should be active when the url starts with /, generally we mention the routes when the app should be active.

Line 9: start function should be called to start the single-spa application.

if everything goes well you should see output as shown in the below screen based on the name you specified in line 4.



As shown in the network tab the module is loaded from remote app,

Any changes in the remote app will be reflected in the host app as shown below



The code discussed here is uploaded to Github in the below url

https://mytechlearns.blogspot.com/2022/06/micro-frontend-and-implementation-using_27.html

Comments

Post a Comment

Popular posts from this blog

How shared libraries work in ModuleFederationPlugin.

Image
courtesy: https://scriptedalchemy.medium.com/micro-fe-architecture-webpack-5-module-federation-and-custom-startup-code-9cb3fcd066c This is in continuation to the previous article https://mytechlearns.blogspot.com/2022/06/single-spa-using-single-spa-react-and.html . Application discussed below refers to the application mentioned in the previous article and code is shared in GitHub In this article lets see how shared libraries work in the ModuleFederationPlugin and also how we can run the two different versions of react can run in the host application (host uses the react version of 17.0.2 and remote uses version 18.2.0). Lets take a look into the shared section of MFP. Shared section represents the shared libs that will be shared with the host application or with the other remote application or with both. Similar to split chunks plugin, MFP splits your application into multiple chunks based on the shared dependencies provided. For example with the above configuration if we run webpa...
Read more

Single SPA using single-spa-react and ModuleFederationPlugin

Image
  SPA applications using single-spa framework and SystemJS is discussed in the below 2 articles Part1: https://mytechlearns.blogspot.com/2022/06/micro-frontend-and-implementation-using.html Part2 : https://mytechlearns.blogspot.com/2022/06/micro-frontend-and-implementation-using_27.html In this article we will see how to integrate remotes with host using ModuleFederationPlugin (MFP), and also we will use the single-SPA framework also (although not required using MFP) as discussed in the above 2 articles. What is a ModuleFederationPlugin (available in webpack v5.0+): As per the author of the plugin  “ A scalable solution to sharing code between independent applications has never been convenient, and near impossible at scale. The closest we had was externals or DLLPlugin, forcing centralized dependency on a external file. It was a hassle to share code, the separate applications were not truly standalone and usually, a limited number of dependencies are shared. Moreover, sharing ...
Read more

Micro Frontend and implementation using single-spa-react framework and SystemJS

Image
  What is a Micro Frontend: If you are familiar with backend development you might have heard about the Micro services, micro frontend also carries the same meaning, behaviour and advantages carried from micro services but from UI perspective. In Micro Frontend Architecture we break down a big monolith UI application to multiple separate UI applications, where each UI has its own separate development, testing and deployment. Lets take a banking website example, on a high level we have following screens. Account screen — account management Pay & Transfer screen — manage payments and transfer related actions Investments screen — investments related activities Profile screen — manage your profile If we follow micro frontend architecture we have following advantages, Each screen mentioned above can be developed, Tested and deployed separately. Each screen can be developed with its own UI frameworks, for example account screen can be be developed using angular, profile screen...
Read more