Understanding Micro Frontend

Using Module Federation Plugin

Introduction:

“An architectural style where independently deliverable front end applications are composed into a greater whole”.

Micro frontend divides the monolithic application into multiple, smaller applications and each smaller application is responsible for a distinct feature of the product.

To understand micro frontend architecture let’s consider two different applications: Product Listing and Shopping Cart.

Each application is a separate independent application (which is one of the major benefits of micro frontend) and the teams working on these independent applications can make their own technical decisions like choosing technology (like Angular, React, or Vue).

Here we try to prevent any direct communication between these two distinct applications.

Instead, our Product application might make some kind of API request that manages all the data inside the Cart application and whenever our cart application gets loaded to see the products added, the cart application will make the same API request and get the list of products in the cart. So, there is no direct communication between these two applications.

So, to show each application on screen we need to create a container micro frontend application and have 3 small projects.

In this article, we will only create a Product and Container application and similarly, we can make our Shopping cart application.

This is how we structure each application.

Let’s create our Product application first.

We can install the dependencies using the below command.

npm install webpack@5.68.0 webpack-cli@4.9.2 webpack-dev-server@4.7.4 faker@5.1.0 html-webpack-plugin@5.5.0

In product index.js, we are using the faker library to generate some fake data for the product list. Below is the sample code.

We are going to use Webpack dependency to run this code.

A little background on Webpack:

It is a tool that lets you bundle your JavaScript applications with all dependencies.

to run our application please change the script to Webpack inside your package.json file in the Product application.

Then create a webpack.config.js file and add a Webpack dev server, which takes the output from the Webpack process and makes it available in the browser, and gives it port 8081.

We are using HtmlWebpackPlugin which takes a look at different files coming out of the Webpack and automatically updates the HTML document(we have our index.html file inside the public folder).

product/webpack.config.js

product/public/index.html

Now, let’s create our container application and figure out how we can create two micro frontend apps (product and container).

Install all the dependencies and we will create the folders for container src>index. js, public>index. HTML and webpack.config.js

Implementing Module Federation:

We need to add ModuleFederationPlugin in our webpack.config.js for the integration of Product and Container applications.

Our host (container) needs to decide which file we want to get from the remote (product) and the only file that gets access inside our host is the index.js file from the product. For this, we require ModuleFederationPlugin in our product’s webpack.config.js file.

product/webpack.config.js

container/webpack.config.js

Now inside the host (container), we will reflect the entry point to load the product index.js file asynchronously, so we are creating a bootstrap.js file inside the container src directory.

Inside container src/bootstrap.js

import ‘products/ProductsIndex’;
console.log(‘Container!’);

Inside container src/index.js

we will use the import function to load the file asynchronously.

Because we are running the code from our product application in the container application, we need to add the “dev-products” id inside our container’s index.html and try running our container app at localhost:8080 using npm run start.

Here is what our container application looks like:

Understanding Module Federation Plugin:

a) Module Federation Plugin inside product webpack.config.js file:

Module Federation Plugin will give us

1. remoteEntry.js file, which is a manifest file that lists all the files emitted by the module federation plugin and also has directions on how to make use of them.
2. src/index.js file is the version of src/index.js that can be safely loaded into the browser.
3. faker.js file, a version of faker that can be safely loaded into the browser.

b) Module Federation Plugin inside container wbpack.config.js file:

We have created a bootstrap.js file during the integration process and an index.js (where we are using an asynchronous import function) file, allowing Webpack to realize that before executing the bootstap.js file (container file), we have to fetch some code from the Product application.

Understanding configuration options:

This is important to understand the Module Federation Plugin options.

1. For container application

So, the first option is “name”. Name is not used whenever we are creating a host module, but remember our container is the host and it is trying to use code from remote (product application). It is usually the convention to add it anyways.

The second option is remote. Remote controls how Webpack is going to try to decide whether or not to load up that remoteEntry.js file. As we can see inside our container bootstarp.js we have import products/ProductsIndex.

Hence when we build our products and it gets compiled by Webpack, Webpack is going to see that we are trying to import a module that begins with the word “products”.

And if Webpack can not find the product’s dependency inside our node module directory, it is going to take a look at ModuleFederationPlugin, specifically the remotes object, and see if there are any keys inside with the word “products”.So the word “products” (form bootstrap.js) is going to match with “products” (key inside the remote object) and then Webpack will load the remoteEntry.js file listed inside products.

2. For products application

Here, the name string has to be identical to the container’s name string. Beyond that, we have a filename that controls the name of the remoteEntry.js file.

And finally, we have exposed. Exposes object controls which modules or files inside our product application we are going to expose to the outside world (container in our case). Here we are exposing the module product index and if anyone tries to import the product index then we will give them the src/index file.

Conclusion:

The basic idea of micro frontends is splitting your frontend into a series of independently deployable and loosely coupled frontend applications (called micro frontends). These micro frontends are then merged/bundled to create a single frontend application.

Module Federation plugin gives developers a way to create multiple separate builds that form a single application. Any JavaScript application that is bundled with Webpack 5.0 or greater can dynamically load or share code and dependencies with any other at runtime.