Micro frontends create and share using Webpack module federation
Why Micro frontend -: let's consider a mid or large-scale web app. A single web page composition of multiple feature sets and its grows in time to a large monolith web page. The problem of having a large monolith web page is given below.
- Sharing one feature with another page or with another web app page is not easy.
- As multiple changes go in at the same pages multiple times it's not easy for a developer to develop and release the same as everything in one workspace.
What is a Micro frontend -: Micro frontend is an architecture style to decompose our monolith web page into features separately which can be handle by a team each having a separate build or workspace.
The idea is to build a webpage where each feature can be independently developed and merged to be a single page or can be shared with multiple other applications if required.
let’s run through an example scenario of Setmore.com calendar page. If we move to the calendar page of Setmore we would see something like this.
We would not go into detail about all features it has. On the macro level, this page has some basic feature sets like we can create an appointment and upgrade to premium and
As I have not a premium customer we can upgrade the option there.
As we see on the macro level this Appointment popup and upgrade frontend feature can be created as a micro frontend and share inside to other pages or outside of our web app.
A few Key problem micro frontends bring to the table is
- Sharing your frontend package requires dependency to be share if we do include it inside the package then it adds duplication.
- Real-time sharing of the library is difficult to execute and manage.
To solve these we would look into Webpack module federation which is available from Webpack 5. It helps build and share micro frontend real-time with inbuild build performance, web performance, and can share the library.
In this article, we would look into how to share our micro frontend with other applications using Webpack federation. A simple demo app with complete code can be found here.
https://github.com/pravanjan/javascript-module-federationTo add Simplicity I have created two apps to demonstrate one-way sharing. If we go into the example we have two workspace
- producer -: Creator of a login.js feature, uses for its own page, and expose it to another consumer.
- consumer -: It consumes the exposed login.js library from the producer
let’s look into producer app webpack configuration. Module federation Plugin exposing file login.js as Login.
I have tried to make the example very simple(Because I m lazy :)). if we visit producer login.js it uses vaadin webcomponent for a login template. The complete code looks like this.
Now if we checkout and run the producer app
$ git clone https://github.com/pravanjan/javascript-module-federation.git
$ cd producer
$ npm install
$ npm start
The goal is to reuse the producer’s login micro frontend. Now let’s look into consumer app webpack configuration.
As we can see the module federation plugin has a remotes attribute that points to the producer.js file (The name which we have given in producer webpack config file).
Consumer apps can simply use dynamic import to use the same micro frontend.
$cd consumer
$ npm install
$ npm start
That’s it. We have successfully created a micro frontend hosted in port localhost:3001 and share the same with other applications i.e to port localhost:3002.
Few key reference which helped me to write this article.
and
https://github.com/module-federation/module-federation-examples
