Creating Scalable Web Applications with Micro Frontends and React using Single-spa

6 min readMar 2, 2023

Micro Frontend is an approach to building web applications that involves breaking down the frontend of a web application into multiple, smaller, and more manageable parts. This approach is similar to microservices, where the backend of an application is broken down into smaller, independent services that can be developed, deployed, and scaled independently. In this article, we will discuss what micro frontends are, their benefits, and how to implement them with a code example.

What are Micro Frontends?

Micro Frontends are small, self-contained frontend applications that can be developed, deployed, and maintained independently. These small frontend applications can be developed using different technologies, frameworks, and languages, and they can communicate with each other through a common API.

The main idea behind Micro Frontends is to break down the frontend of a web application into smaller, more manageable parts. Each part can be developed, tested, and deployed independently, making it easier to maintain and update the application over time.

Benefits of Micro Frontends

There are several benefits to using Micro Frontends, including:

Scalability: Micro Frontends allow you to scale your frontend independently, so you can add more resources to the parts of your application that need them.
Flexibility: Micro Frontends allow you to use different technologies, frameworks, and languages to build different parts of your application.
Reusability: Micro Frontends can be reused across multiple applications, so you can save time and effort when building new applications.
Easier Maintenance: Micro Frontends are smaller and more manageable, making it easier to maintain and update your application over time.

Implementing Micro Frontends with a Code Example

To implement Micro Frontends, we will be using a simple example of a web application that has three different parts: a header, a sidebar, and a content area. We will be using React to build each part of our application, but you can use any frontend framework or technology that you prefer.

Step 1: Set up the Project

To set up our project, we will create a new React application using create-react-app. We will also install two packages that we will be using later: single-spa and single-spa-react.

npx create-react-app micro-frontends-example
cd micro-frontends-example
npm install single-spa single-spa-react

Step 2: Create the Header Micro Frontend

Next, we will create the header micro frontend. This micro frontend will contain the header of our web application. To create the header micro frontend, we will create a new React component called Header and export it as a single-spa application.

// src/Header.js
import React from 'react';

export default function Header() {
  return (
    <header>
      <h1>Micro Frontends Example</h1>
    </header>
  );
}// src/header.app.js
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Header from './Header';const headerApp = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Header,
  domElementGetter: () => document.getElementById('header'),
});export default headerApp;

In the code above, we first create a new React component called Header that contains the header of our web application. We then use single-spa-react to export this component as a single-spa application. We specify the rootComponent as Header and the domElementGetter as a function that returns the div with an id of header.

Step 3: Create the Sidebar Micro Frontend

Next, we will create the sidebar micro frontend. This micro frontend will contain the sidebar of our web application. To create the sidebar micro frontend, we will create a new React component called Sidebar and export it as a single-spa application.

// src/Sidebar.js
import React from 'react';

export default function Sidebar() {
  return (
    <aside>
      <h2>Sidebar</h2>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </aside>
  );
}// src/sidebar.app.js
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Sidebar from './Sidebar';const sidebarApp = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Sidebar,
  domElementGetter: () => document.getElementById('sidebar'),
});export default sidebarApp;

In the code above, we create a new React component called Sidebar that contains the sidebar of our web application. We then use single-spa-react to export this component as a single-spa application. We specify the rootComponent as Sidebar and the domElementGetter as a function that returns the div with an id of sidebar.

Step 4: Create the Content Micro Frontend

Finally, we will create the content micro frontend. This micro frontend will contain the main content of our web application. To create the content micro frontend, we will create a new React component called Content and export it as a single-spa application.

// src/Content.js
import React from 'react';

export default function Content() {
  return (
    <main>
      <h2>Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis massa sit amet purus ultricies bibendum. Curabitur id felis ac enim interdum ultricies.</p>
    </main>
  );
}// src/content.app.js
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Content from './Content';const contentApp = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Content,
  domElementGetter: () => document.getElementById('content'),
});export default contentApp;

In the code above, we create a new React component called Content that contains the main content of our web application. We then use single-spa-react to export this component as a single-spa application. We specify the rootComponent as Content and the domElementGetter as a function that returns the div with an id of content.

Step 5: Register the Micro Frontends with Single-spa

To register the micro frontends with single-spa, we need to import them and use the registerApplication method to register them.

// src/index.js

import { registerApplication, start } from 'single-spa';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';const headerApp = {
  name: 'header',
  app: () => import('header/HeaderApp'),
  activeWhen: () => true,
};const sidebarApp = {
  name: 'sidebar',
  app: () => import('sidebar/SidebarApp'),
  activeWhen: () => true,
};const contentApp = {
  name: 'content',
  app: () => import('content/ContentApp'),
  activeWhen: () => true,
};registerApplication({
  name: 'header',
  app: headerApp,
  activeWhen: () => true,
});registerApplication({
  name: 'sidebar',
  app: sidebarApp,
  activeWhen: () => true,
});registerApplication({
  name: 'content',
  app: contentApp,
  activeWhen: () => true,
});start();

In the code above, we register each micro frontend with single-spa using the registerApplication method. We specify the name of the micro frontend, the application object, and the activeWhen function. The activeWhen function determines when the micro frontend should be active based on the URL. In this example, we have set it to always be active by returning true.

Step 6: Serve the Micro Frontends

To serve the micro frontends, we need to build and serve each micro frontend as a standalone application. We can do this by adding a build and serve script to each micro frontend’s package.json file.

// header/package.json
{
  "scripts": {
    "build": "webpack --mode production",
    "serve": "webpack-dev-server --open"
  },
  "dependencies": {
    "single-spa": "^5.9.3",
    "single-spa-react": "^4.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

// sidebar/package.json
{
  "scripts": {
    "build": "webpack --mode production",
    "serve": "webpack-dev-server --open"
  },
  "dependencies": {
    "single-spa": "^5.9.3",
    "single-spa-react": "^4.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

// content/package.json
{
  "scripts": {
    "build": "webpack --mode production",
    "serve": "webpack-dev-server --open"
  },
  "dependencies": {
    "single-spa": "^5.9.3",
    "single-spa-react": "^4.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

In the code above, we add a build and serve script to each micro frontend's package.json file. The build script builds the micro frontend for production, and the serve script serves the micro frontend using webpack-dev-server.

To serve the micro frontends, we can run the serve script in each micro frontend's directory using the following command:

npm run serve

Conclusion

In this article, we have learned about micro frontends and how to create them using single-spa and React. We have created three micro frontends - header, sidebar, and content - and registered them with single-spa. We have also served each micro frontend as a standalone application using webpack-dev-server.

Micro frontends can help teams build scalable and maintainable web applications by allowing them to independently develop and deploy parts of the application. They can also help improve the performance of the application by allowing the browser to load only the parts of the application that are needed for a given page.

I hope this article has been helpful in understanding micro frontends and how to create them. If you have any questions or comments, please feel free to leave them below.