Micro Frontend-101

Hello peeps, in this article we’ll try to learn what micro frontend exactly is by implementing it in a bare-bones project. You can view the entire code here.

What is Micro Frontend Architecture?

Micro Frontend Architecture is a design concept inspired from the micro services. It allows the frontend app to be made of small individual sub-apps. It contains all this inside a container app and that regulates the transmission of data and logic between the sub-apps. Despite of the sudden attention that micro frontend has garnered, there is still no dominant best approach or implementation, it depends on one’s requirements. We will see one of the implementation using Module Federation Plugin.

Module Federation is a Webpack plugin that loads code from another app(or its build/dist). Normally we use webpack in our project to generate production bundle or build and if its a single large app the main.js file is usually large to load. Dividing it into sub apps makes individual files small to load.

Lets see some code to get more clarity. We will have three separate folders(Products, Cart, Container)

First Sub App: Products

We’ll start with our first sub-app. Inside our products folder we have a package.json file. We install the different webpack packages and a faker package that helps us load dummy data.

Now lets create a webpack.config.js file:

Here we are importing the HTML Webpack Plugin we installed which simply put helps in the creation of html file to serve our webpack bundle. The other plugin we are importing here is the Module Federation Plugin. Here the name property and filename are important as they will be used ahead in our main container app to point the script file here.It can be thought of as the name of the sub-app and the remoteEntry file as a direction map on how to load sub-app files. The exposes property lists files we want to be accessible in the main app. The shared property is for common dependencies that can be shared among the sub apps so there is no need of multiple installations.

Our index.html inside of public will be pretty bare-bones with only a div inside the body

<div id=”dev-products”></div>

Create two files inside our src: index.js and bootstrap.js. Inside our index.js we’ll add an import statement to asynchronously import our files.

import(‘./bootstrap’);

Bootstrap.js

Here we are basically using faker module to render dummy data in our html. With this our first sub-app is complete. If we move to the terminal and run it using npm start we can see it running independently and displaying a bunch of dummy data.

Second Sub App: Cart

Our package.json here is similar to the previous one with same dependencies and script. So we move on to our webpack.config.js file:

We can see that this app will run on port 8082 and inside the Module Federation Plugin we’ve named it cart. The fileName property is conventionally kept as remoteEntry.js. The rest properties are same as before.

Index.html inside of public will also be pretty similar

<div id="dev-cart"></div>

Similarly index.js inside src is same as before. So we move to bootstrap.js

Here we are using faker module to generate dummy item numbers to render in our HTML. Now if we run the code and open port 8082 we must see something like:

Container App:

Container App will be the main app that controls and displays the sub apps. Without wasting time, inside our container folder we can install similar dependencies here also except that faker module. So, instead of faker we install nodemon.

Webpack.config.js

Inside our webpack.config.js file of container, we can see that it will run on port 8080. Inside our Module Federation Plugin we have pointed to our two sub apps(products and cart) using the remotes property using a syntax like:

appName: ‘appName@APP_URL/remoteEntry.js'

Now we can leverage this inside our container app by importing functions/methods from the appName. So inside our src/bootstrap.js, we can import the mount functions we wrote in both our sub-apps, pretty simple right.

We can render these functions to our index.html dom as we like:

<div id=”product-dev”></div>
<div id=”cart-dev”></div>

Now if we run the container app with our two sub apps also running than we can see our main app. As we can see our main app running on port 8080 contains our sub app cart running on port 8081 and sub app products running on port 8082.

It’s over!

Kudos you made it to the end, and hopefully learned about micro frontends and webpack along the way. Feel free to ask if you have any doubts or you can help yourself by stalking its GitHub .