Build a Micro-Frontend Application with React

Annoyed by React errors?
Bugpilot is the error monitoring platform for React. Catch unexpected errors, troubleshoot, and fix with our AI assistant. Learn more and create an account to start your 14-day free trial.

Introduction

Micro-frontend architecture is an architectural pattern that allows you to break down a web application into smaller and more manageable parts. Each part, known as a micro-frontend, can be developed and deployed independently. This enables different teams within an organization to work on different parts of the application without stepping on each other's toes.
In this guide, we will explore how to create a micro-frontend application using React. React is a popular JavaScript library for building user interfaces. With its component-based approach, React is well-suited for building modular and reusable UI elements, making it a natural choice for micro-frontend architecture.

Prerequisites

Before we dive into building a micro-frontend application with React, make sure you have the following:

Node.js installed on your machine. You can download it from the official website: https://nodejs.org.
A basic understanding of React and JavaScript. If you are new to React, you may want to check out the official React documentation: https://reactjs.org/docs/getting-started.html.

Setting Up the Development Environment

To get started, let's set up our development environment. Open your terminal and follow these steps:

Create a new directory for your project:

1$ mkdir micro-frontend-app
2$ cd micro-frontend-app

Initialize a new Node.js project:

$ npm init -y

Install React and other necessary dependencies:

$ npm install react react-dom

Create a new file named index.js:

1// index.js
2import React from "react";
3
4import ReactDOM from "react-dom";
5
6const App = () => (
7  <div>
8    <h1>Welcome to the Micro-Frontend App!</h1>
9    <p>This is a sample micro-frontend application built with React.</p>
10  </div>
11);
12ReactDOM.render(<App />, document.getElementById("root"));
13

Create an HTML file named index.html:

1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Micro-Frontend App</title>
8</head>
9<body>
10  <div id="root"></div>
11  <script src="index.js"></script>
12</body>
13</html>

Integrating with a Shell Application

Now that we have our micro-frontend application set up, let's integrate it with a shell application. The shell application will act as the main application that pulls in and orchestrates the micro-frontend modules.

Create a new directory named shell-app inside the root directory of your project:

$ mkdir shell-app

Navigate to the shell-app directory:

$ cd shell-app

Repeat steps 2 and 3 from the previous section to set up the shell application's development environment.
In the shell application's index.html file, add a placeholder <div> that will be used to mount the micro-frontend app:

1<!-- shell-app/index.html -->
2<!-- ... -->
3<body>
4  <div id="micro-frontend"></div>
5  <!-- ... -->
6</body>

In the shell application's index.js file, import the micro-frontend app and mount it in the placeholder <div>:

1// shell-app/index.js
2import React from "react";
3
4import ReactDOM from "react-dom";
5
6const MicroFrontend = () => (
7  <iframe
8    src="http://path/to/micro-frontend-app"
9    width="100%"
10    height="100%"
11    frameBorder="0"
12    title="Micro-Frontend App"
13  />
14);
15ReactDOM.render(<MicroFrontend />, document.getElementById("micro-frontend"));
16

Start both the micro-frontend and shell applications in separate terminals:

1$ npm start
2$ npm start

Conclusion

In this guide, we have learned how to build a micro-frontend application with React. We explored the concept of micro-frontend architecture and its benefits. We also went through the process of setting up a development environment and integrating a micro-frontend app with a shell application. By following this guide, you are now equipped with the knowledge to build scalable and maintainable web applications using the micro-frontend approach with React.
Remember, micro-frontend architecture is just one of the many architectural patterns you can use when building web applications. It is important to evaluate the specific requirements and constraints of your project before choosing an architecture. With React's flexibility and the power of micro-frontends, you can unleash the full potential of your web applications. Happy coding!