Single SPA using single-spa-react and ModuleFederationPlugin
 |
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 actual feature code or components between separately bundled applications is unfeasible, unproductive, and unprofitable.”
For example lets say we had a company X which has 2 different portals one for insurance and another for core banking, both portals have account profile screen to show the account details of the customer, both of the portals have similar look and feel, so the company decided to develop a common code and share between the 2 portals.
One solution to solving above use case is develop a npm package contains account profile screen code and the portals can add it as dependency and compile it, but the challenge is whenever there is a new version of the dependency is added, we have to re build both the portals with the new dependency and deploy. Which means portals and shared code is tightly coupled.
So we need a solution where we dont need to rebuild and the change can be pulled dynamically.
ModuleFederationPlugin helps us to load the modules dynamically. which is similar to that of use case of Micro Frontends where we have a host application which is integrated with multiple remotes. This integration can be achieved at runtime through ModuleFederationPlugin.
In the last 2 articles we used single-spa framework using systemjs to develop single page applications with micro frontend architecture.
But ModuleFederationPlugin is simply a plugin in webpack that helps us to load the remotes during runtime, there by it is easy even to convert the existing application into Microfrontend application without any additional framework dependencies.
In this tutorial we will use the single-spa framework along with ModuleFederationPlugin to develop and integrate host and remote applications.
Lets create a 2 different application using single-spa package as shown in part 1 and part 2 tutorials, let say the applications names as mfe01 and mferootapp, where mfe01 is the remote application and mferootapp is the host application integrates the remote application using MFP.
Create mfe01 application
create mferootapp application
Lets modify the mfe01 application configuration to make the application up and running as standalone app.
create main.tsx — the code to render the root component.
The code is self explanatory.
index.js — just to import main module, there is a reason for following this way will be explained in the next tutorial.
create a new file called index.ejs which is an index page for our application as shown below.
Line 12 we are loading our entry point in our application
Lets make changes to webpack.cofing.js file as shown below.
Line 20: adds a entry point to our application points to index.ts
Line 26: adds public path to our assets like javascript from where to load these assets. It is added like <script src=“http://localhost:8082/remoteEntry.js”/> in our target html file.
Line 29 -31: adds the HtmlWebpackPlugin to take the template and inject the assets created and create the output html file.
Line 32 - 54: is the actual configuration of ModuleFederationPlugin.
Line 33: is the name of module which will be exposed for the consumption of other modules.
Line 34: is the name asset created by webpack plugin.
Line 35-37: is the map of the submodules exposed by this module, here we are exposing only the root component whose module is the lifecycle methods of single-spa application.
Line 38-51: is the list of shared dependencies, these are the dependencies which will be share among remotes and host applications, will discuss about the advantage of these in next tutorial
Run application using “npm run start -- --port=8082”
If everything is configured correctly, you can see the similar screen as below.
Now lets see the configuration of root/host app to integrate the above created remote MFE application.
Lets create the same file of main.js file as shown below
Line 9: single-spa function to register the single-spa application, here we are registering the remote application.
Line 10: is the name of the single spa application in the host app
Line 11: is the loading function which contains the single-spa lifecycle methods, here we the import we are using is based on the ModuleFederationPlugin config provided in the webpack.config.js file. for webpack config see the next screenshot.
Line 12: tells when the application is active. location object is provided by the single-spa framework to this function. The return type of this function is boolean, true means the app is mounted, otherwise unmounted. Here the application is active when the url start with “/”
Lets create a index.js file, which simply imports the main.js
Index.ejs file is created same as mentioned above for mfe01 application.
Add webpack.config.js file as shown below.
All the configuration is same as that of mfe01 application except the remotes configuration.
Line 37 - 39: here we provide provide the url of the remote application to be loaded here mfe001 — is the module name given in the mfe01 app, http://localhost:8082/remoteEntry.js is the location of our remote file.
If everything goes well you will see the screen similar to below.
All the code discussed in this article is uploaded to GitHub at
https://github.com/satish-nag/mfe
In the next tutorial we will into concepts of how the ModuleFederationPlugin works in the context of the developed in this article.
References:
https://indepth.dev/posts/1173/webpack-5-module-federation-a-game-changer-in-javascript-architecture
Comments
Post a Comment