Micro frontends

4 min readMar 1, 2023

Micro frontends are an approach to software development where a frontend application is composed of multiple smaller, independent applications that work together to provide the overall functionality of the application. Each micro frontend is responsible for a specific part of the application and can be developed, deployed, and scaled independently of the other micro frontends.

In this tutorial, we’ll build a simple e-commerce website using micro frontends. Our website will have three micro frontends — a product listing micro frontend, a cart micro frontend, and a checkout micro frontend.

We’ll be using React for our micro frontends, and we’ll use a library called “single-spa” to orchestrate the loading and unloading of the micro frontends.

Here are the high-level steps we’ll follow:

Create a new React application for each micro frontend.
Set up single-spa to orchestrate the loading and unloading of the micro frontends.
Create a main application that will load the micro frontends.
Test the application to make sure everything is working.

Let’s get started!

Step 1: Create the micro frontends

We’ll start by creating a new React application for each micro frontend. You can use Create React App to create a new application.

For the product listing micro frontend, run the following commands:

npx create-react-app product-listing
cd product-listing
npm start

For the cart micro frontend, run the following commands:

npx create-react-app cart
cd cart
npm start

For the checkout micro frontend, run the following commands:

npx create-react-app checkout
cd checkout
npm start

Each of these commands will create a new React application with the necessary files and dependencies. You can start each application by running npm start.

Step 2: Set up single-spa

Now that we have our micro frontends, we need to set up single-spa to orchestrate the loading and unloading of the micro frontends.

To do this, we’ll create a new file called root-config.js in the root of our project. This file will be responsible for loading and unloading the micro frontends.

Here’s what the file should look like:

import { registerApplication, start } from "single-spa";

registerApplication(
  "product-listing",
  () => import("./product-listing/src/App"),
  (location) => location.pathname.startsWith("/")
);
registerApplication(
  "cart",
  () => import("./cart/src/App"),
  (location) => location.pathname.startsWith("/cart")
);
registerApplication(
  "checkout",
  () => import("./checkout/src/App"),
  (location) => location.pathname.startsWith("/checkout")
);
start();

This code does a few things:

It imports the registerApplication and start functions from single-spa.
It registers each micro frontend using the registerApplication function. This function takes three arguments:
The name of the micro frontend. A function that returns a promise that resolves to the root component of the micro frontend. A function that returns true if the micro frontend should be active for the current URL.
It starts single-spa using the start function.

Step 3: Create the main application

Now that we have our micro frontends and single-spa set up, we need to create the main application that will load the micro frontends.

Create a new file called index.html in the root of your project. This file will be the entry point for our application.

Here’s what the file should look like:

<!DOCTYPE html>
<html>
  <head>
<title>Micro Frontend Example</title>
</head>
  <body>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/cart">Cart</a></li>
        <li><a href="/checkout">Checkout</a></li>
      </ul>
    </nav>
    <div id="root"></div>
    <script src="https://unpkg.com/single-spa@5.9.1/lib/umd/single-spa.min.js"></script>
    <script src="root-config.js"></script>
    <script>
      singleSpa.start();
    </script> 
  </body>
</html>

This code does a few things:

It creates a navigation bar with links to the different micro frontends.
It creates a div with an id of root where the micro frontends will be rendered.
It includes the single-spa library and our root-config.js file.
It starts single-spa using the singleSpa.start() function.

Step 4: Test the application

To test our application, start each of the micro frontends by running npm start in each directory. Then, open a new terminal window and run npm start in the root directory of the project. This will start the main application.

Navigate to http://localhost:8080 in your browser. You should see the navigation bar and the home page. Click on the "Cart" link in the navigation bar. You should see the cart micro frontend loaded below the navigation bar. Click on the "Checkout" link in the navigation bar. You should see the checkout micro frontend loaded below the navigation bar.

Congratulations! You have successfully built a simple e-commerce website using micro frontends.

Conclusion

In this tutorial, we built a simple e-commerce website using micro frontends. We used React for our micro frontends, and we used the single-spa library to orchestrate the loading and unloading of the micro frontends.

Micro frontends are a powerful approach to software development that allows for independent development, deployment, and scaling of frontend applications. They are particularly useful for large-scale applications that require multiple teams to work together.It can also help with code reusability, testing, and maintenance. By breaking down a large application into smaller, more manageable parts, it becomes easier to make changes and add new features without disrupting the entire system.

In this tutorial, we only scratched the surface of what is possible with micro frontends. There are many more tools and techniques that can be used to build more complex and sophisticated applications.

I hope this tutorial has been helpful in introducing you to the world of micro frontends. Good luck with your future projects!