Module Federation using Webpack 5. The Micro-frontend journey.

Context:

In large scale enterprises generally many teams work on a single, large and complex application which has several moving parts. If that is a monolithic frontend application, scaling them further becomes extremely difficult.

The idea of Micro-frontend is to break the big monolithic application into smaller chunks for easier maintenance, increased acceleration and scale the application rapidly.

So the best configuration would be for different teams to work on different parts of the entire application in their individual codebase, handling features independently along with independent releases and are all merged together in some way(lets look at the options below) to form one complete end user application.

Different Approaches:

To move away from the monolithic architecture in frontend applications, different approaches have been experimented with.

Sharing code between applications using Node packages have been the most common way and has been around for a while. A big disadvantage is keeping up with the changes in latest versions in each of the published packages. That corresponds to increase time in updating to the changes, incompatibility resolutions, testing and deployment. It also increases the size of application as more and more packages are added.

Another way to move away from the build time resolution to run time is to make each of the Micro-frontends deploy the JavaScript runtime packages to a CDN for consumption. The host application will then consume them and stitch at runtime. This requires custom logic to be written and handled by the framework. This puts lot of dependency on the framework and as and when the framework pushes updates, refactoring might be required in the application.

Webpack 5 and Module Federation:

To overcome all these issues, Micro-frontends using Module federation was created.

Module federation makes it easy to share components and information between many frontend applications and also enables to build out SPA’s and create a fully federated site.

It’s not a framework. It’s a JavaScript architecture and plugin added to Webpack. So there is no dependency on a particular framework and provides complete flexibility in development. It also happens at run time so there is no overhead involved in the build process.

It has many advantages such as:

1. Independent development by teams and dynamically import code from other applications at runtime. End results feels like an SPA.
2. Independent testing and deployment/release strategies.
3. Smaller and optimised bundle size of each micro app as shared components and dependencies are loaded only when required.
4. Each of the micro app can choose their own tech stack and not bound by a particular framework.

In Module federation applications there are mainly two entities:

1. Host or Container => The currently running application that is hosting federated remote modules.
2. Remote => A reference to an external federated module.
3. Expose => A module that is exported from an application is “exposed” for consumption.
4. Shared => A module that is shared across different remotes.

The overall working is for the remote micro-frontend to expose JavaScript modules. It can be components, primitive values, complex values. Basically any JavaScript module to be shared is to be exposed in the webpack.config.js file. These modules are consumed by the container application and the components are rendered to make up the application as a whole.

The code is downloaded during run time and if any dependency is missing then the host application downloads the dependency. If the dependency has been shared between the micro frontends then the same is used. This leads to less duplication and lesser code size.

To the end user, a single application is rendered. It’s a seamless experience, will have the benefits of performance, speed etc. and also not have the pitfalls of a monolithic application.

Creating a Module Federated application step-by-step:

Here, we will build an application which resembles a standard e-commerce platform which contains a Left Navigation section, Top Navigation section and a middle container which presents all the details of an item etc.

Left Nav micro-frontend application: https://github.com/priyavarun/wp5-mf-left-nav

Top Nav micro-frontend application: https://github.com/priyavarun/wp5-mf-top-nav

Item details micro-frontend application: https://github.com/priyavarun/wp5-mf-item-details

Shell container: https://github.com/priyavarun/wp5-mf-shell

Architecture/Interaction diagram between all the microapps.

Each of them are React applications using Webpack 5. (I have created a custom and minimal application instead of bootstrapping with create-react-app)

Overall the applications are very similar to existing React applications that we are familiar with. The main change is in the Webpack configuration and the inclusion of the Module Federation Plugin and the configs passed to it.

Left Nav Micro-frontend:

Top Nav Micro-frontend:

Item Details Micro-frontend:

Shell Container:

To run the complete application, download using this links for each of the repo’s provided above.

Install the dependencies running “yarn install” command in the terminal. This will install all the dependencies such as React, Webpack 5 and many more provided in package.json.

To start the application run “yarn start” command in the terminal. This will boot up in the port specified as part of webpack config “devServer” and run the application on the browser at the specific port.

This will start up the Left navigation, Top navigation, Item Details applications on individual ports such as 3001, 3002, 3003. The micro-frontends are consumed by the shell container application running on 3004.

The following are the outputs of running each of the Micro frontends in the standalone mode. This enables for individual teams to develop, test and deploy the apps separately and only the stitching would be done by the Shell or host container application.

The left nav section is coming from an application deployed on http://localhost:3001

Left Navigation Standalone Micro-Frontend on port 3001

The top nav section is coming from an Application deployed on http://localhost:3002

Top Navigation Standalone Micro-Frontend on port 3002

The item details section is coming from an application deployed on http://localhost:3003

Item Details Standalone Micro-Frontend on port 3003

Once we have the individual Micro-frontends up and running, now it comes to stitching them together in the container shell app.

And Voila! Application running on port 3004 is complete application which is federated and composed of multiple Micro frontends that the users see and is seamlessly rendered at runtime as if it were a SPA.

Complete Federated Application composing of Left Nav(MFE), Top Nav(MFE) & Item Details(MFE)

Overall, Module Federation provides a clean and simplified way with minimal configuration to consume components across different Micro-frontends and really powerful feature in Webpack.

This gives teams complete flexibility to develop, deploy independently and to the end user, its a seamless single page application with enhanced performance.

In the upcoming articles will be adding much more information on the inner workings of Webpack, plugins/loaders, performance improvements, analytics etc.

Please keep posted! :)