Getting started with micro frontends

As the size of a frontend application grows, its scalability and maintainability become a complex task for the team. To solve this problem, micro frontends are growing in popularity and adoption. But what are micro frontends? Is it another buzzword that will die in near future? I believe not since micro frontends are based on the microservice architecture. The philosophy behind micro frontends is a huge web application that is divided into smaller and independently or semi-independently working chunks of web apps that can be maintained by different teams.

A micro frontend architecture can offer crucial benefits that are listed as follows

• The size of the codebase becomes easier and simpler to maintain.
• Any number of independent teams can collaborate hence increasing their autonomy for them.
• The continuous deployment is easy and fast.
• The ability to scale, refactor or upgrade the frontend is simplified.

Even with a big list of benefits, there are some challenges with the micro frontend architecture.

• The architecture can require more resources than a simple monolith codebase. If a company is small and has a limited number of people working for it, then microarchitecture can be a bit load on them..
• Since there are multiple independently working mini-web applications, there can be times when all of them can require the same packages or code. This can increase the bundle size for the user.
• There can be communication challenges among different teams that might disturb the cohesiveness of the UX for the product.

But I believe that these issues are avoidable or can be minimised if the right decisions are taken before adopting the micro frontends architecture.

As of now, there are a few micro frontend frameworks that are quite popular in the space. Since we are aware of micro frontends to some extent, let us take a look into the solutions and set up our own micro frontend with my personal favorite!

Single-spa

Single-spa is a framework that focuses on connecting and running different cross-platform web applications under a single hood. The approach for single-spa is simple as it uses a root config that renders and registers all the javascript applications working inside it. Even though single-spa makes things a lot easier but it mainly handles a single area for the micro frontends which are cross-platform frontend frameworks, lacking other needed features for a solid micro framework. For example, module and code sharing among the apps can be troublesome to implement. You can read more about single-spa here.

Module federation

It is an approach that has been introduced in web pack 5 with a plugin. With module federation, it is possible for the applications in the micro frontend to share the resources. Let's suppose App A needs package B which is located in App B. With module federation, App B can expose its package to App A but it requires a lot of Webpack configuration. There is nothing set out of the box for the user and hence, it can become a bit overwhelming.

Piral

Piral is a solid framework that makes it a piece of cake to create a large-scale web application based on micro frontends. Piral has a root instance containing all the micro applications that are called pilets in the ecosystem. Along with this, it offers a feed service that delivers the pilets to the frontend. In this article, I will be using Piral to create a simple micro frontend to show how easy it is to use!

Getting started with Piral

The first step is to install the piral-cli which can be done by using the following command in the terminal.

npm i piral-cli -g

As we know, the whole application is handled by Piral Instance and we can create it with the following command.

piral new --target my-app


Now navigate to the folder and run the next command to start the instance in debug mode on the browser.

npx piral debug


After a successful build, head over to localhost:1234 and you’ll see the instance up and running!

Creating Pilets.

Pilets require the application instance for their development which can be done by creating an npm package of it using the following command.

npx piral build


You will notice a tar file created in the directory as follows.

This is the application shell needed by the pilets. Now navigate out of the application shell directory and enter the following command to create pilet.

pilet new ./my-app/dist/emulator/my-app-1.0.0.tgz --target my-pilet


This will generate a pilet my-pilet having a similar file structure to the instance. We have the index.tsx which has a setup function for the configuration of the pilet. To run the pilet, navigate to the directory of it and run the command below.

npx pilet debug


The browser will show the following output.

Notice the difference? Yes, our pilet is running in the application shell. This is how we create a simple micro frontend with Piral.

We can create as many pilets as we want and share them via a feed service that is provided by Piral. The feed service can be created or Piral also provides its own Piral Feed Service which has a basic community version perfect for smaller projects.

The Piral Feed Service.

The Piral Feed Service makes it ridiculously easy to serve the pilets that are created. We just need to publish the pilets and consume them in the application shell. Let us see how we can publish our pilets with the Piral Feed Service.

Signup and log in to see the following dashboard.

Click on the New feed button and give your feed a name along with a description.

After which you will be redirected to the following page.

Now, we have to create an API key that will be needed to publish our pilet to the cloud.
Head to Manage API Keys, generate the key, store it safely and open the pilet directory to run the following command.

pilet build


This will create the production build in the current directory.

Now, we are ready to publish our pilet and it can be done with a simple command given below.

npx pilet publish --fresh --url https://feed.piral.cloud/api/v1/pilet/my-feed-example --api-key <api-key>

To check if everything went fine, the output will look like.

Also, the uploaded pilet will appear in the dashboard as well.

We can use this pilet in our application shell!
In the src, we have index.tsx that looks like as follows.

import "piral/polyfills";
import { renderInstance } from "piral";
import { layout, errors } from "./layout";

// change to your feed URL here (either using feed.piral.cloud or your own service)
const feedUrl = "https://feed.piral.cloud/api/v1/pilet/empty";

renderInstance({
 layout,
 errors,
 requestPilets() {
   return fetch(feedUrl)
     .then((res) => res.json())
     .then((res) => res.items);
 },
});

Currently, it fetches the data from empty feed url, let us replace it with our created feed.

import "piral/polyfills";
import { renderInstance } from "piral";
import { layout, errors } from "./layout";

// change to your feed URL here (either using feed.piral.cloud or your own service)
const feedUrl = "https://feed.piral.cloud/api/v1/pilet/my-feed-example";

renderInstance({
 layout,
 errors,
 requestPilets() {
   return fetch(feedUrl)
     .then((res) => res.json())
     .then((res) => res.items);
 },
});

Run the npx piral debug command again and open localhost for the result.

We have been successful in fetching the pilet we created and uploaded to the Piral Feed!

Conclusion.

In this article, we saw how Piral can be used to created micro frontends effortlessly. Along with this, the Piral Feed Service is an excellent feature to centralize the pilets in a single place with little to none configuration. I hope you had fun reading the tutorial!