Getting Started with Micro Frontends in React using single-spa and TypeScript

Introduction

Micro Frontends are an architectural approach that allows developers to break down monolithic frontend applications into smaller, manageable pieces. Each smaller application, known as a Micro Frontend, is responsible for a specific feature or functionality. In this article, we'll explore how to leverage React, TypeScript, and single-spa to build scalable and modular Micro Frontends.

What are Micro Frontends?

Micro Frontends follow the same principles as Microservices but for the frontend. The idea is to divide the frontend monolith into smaller, decoupled applications that can be developed, deployed, and maintained independently. Each Micro Frontend can be developed by a separate team, using different technologies if needed, allowing for faster development and continuous deployment.

Some key advantages of Micro Frontends include:

1. Independent Development: Teams can work on different Micro Frontends without stepping on each other's toes, making it easier to manage large codebases.
2. Simplified Maintenance: Since each Micro Frontend is isolated, updates and bug fixes can be made in a focused manner.
3. Enhanced Reusability: Components or features can be shared across different Micro Frontends, promoting code reuse.
4. Autonomous Deployment: Micro Frontends can be deployed independently, reducing the risk of deployment-related issues.

Introducing React and TypeScript

Before we dive into Micro Frontends, let's briefly introduce React and TypeScript, which are the core technologies we'll be using:

• React: React is a popular JavaScript library for building user interfaces. Its component-based architecture allows developers to create reusable UI components, making it easier to manage complex UI interactions.
• TypeScript: TypeScript is a superset of JavaScript that introduces static typing. By adding types to JavaScript code, TypeScript provides enhanced code clarity, early error detection, and improved tooling support.

Combining React with TypeScript enables us to build robust, maintainable, and scalable frontends.

Setting Up the Project

To get started, make sure you have Node.js and npm installed on your machine. We'll create a new React application with TypeScript support:

npx create-react-app my-micro-frontend --template typescript
cd my-micro-frontend
npm start

        

Now that we have our base React application set up, let's proceed to integrate single-spa.

Using single-spa for Micro Frontends

single-spa is a JavaScript framework that simplifies the process of orchestrating multiple Micro Frontends. It allows us to combine different frontend applications, regardless of the framework they were built with, into a single cohesive application.

Let's install single-spa and its required peer dependencies:

npm install single-spa react react-dom @single-spa/react        

Creating Micro Frontends

For the sake of simplicity, we'll create three Micro Frontends: Header, Home, and Footer. Each will represent a basic component of a web application.

• Header Micro Frontend:

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


const Header: React.FC = () => {
? return <header>My Header Component</header>;
};


export default Header;

Home Micro Frontend:
        

• Home Micro Frontend:

// src/Home.tsx
import React from 'react';


const Home: React.FC = () => {
? return <main>Welcome to the Home Page</main>;
};


export default Home;

        

• Footer Micro Frontend:

// src/Footer.tsx
import React from 'react';


const Footer: React.FC = () => {
? return <footer>&copy; 2023 My Company</footer>;
};


export default Footer;

        

With our Micro Frontends created, let's proceed to set up the shell application to host and orchestrate them.

Building the Shell Application

The shell application acts as the container for our Micro Frontends. It loads and orchestrates the different Micro Frontends based on the user's navigation.

// src/root-config.ts
import { registerApplication, start } from 'single-spa';


registerApplication(
? '@my-micro-frontend/header',
? () => import('@my-micro-frontend/header'),
? (location) => location.pathname.startsWith('/header')
);


registerApplication(
? '@my-micro-frontend/home',
? () => import('@my-micro-frontend/home'),
? (location) => location.pathname.startsWith('/home')
);


registerApplication(
? '@my-micro-frontend/footer',
? () => import('@my-micro-frontend/footer'),
? (location) => location.pathname.startsWith('/footer')
);


start();

        

The registerApplication function is used to register each Micro Frontend. It takes three arguments: the name of the Micro Frontend, a function to load the Micro Frontend dynamically, and a function to determine when the Micro Frontend should be active based on the current URL.

Integrating Micro Frontends with single-spa

To integrate our Micro Frontends into the shell application, we need to add links to navigate between them. Update the App.tsx file in the src folder as follows:

// src/App.tsx
import React from 'react';
import { Link } from 'react-router-dom';


const App: React.FC = () => {
? return (
? ? <div>
? ? ? <nav>
? ? ? ? <Link to="/header">Header</Link>
? ? ? ? <Link to="/home">Home</Link>
? ? ? ? <Link to="/footer">Footer</Link>
? ? ? </nav>
? ? </div>
? );
};


export default App;

        

Communicating between Micro Frontends

One challenge with Micro Frontends is inter-communication between them. Since each Micro Frontend is isolated, they cannot directly access each other's state or functions.

There are several approaches to handling communication between Micro Frontends, including custom events, shared Redux stores, or using a state management library like Zustand.

Deployment

For deployment, each Micro Frontend can be deployed independently, which promotes faster releases and minimizes the risk of breaking the entire application during updates.

Conclusion

Micro Frontends offers a powerful approach to building modular, scalable, and maintainable frontend applications. By leveraging React, TypeScript, and single-spa, we can create a flexible architecture that fosters independent development and enhances the user experience.

In this article, we've explored the fundamentals of Micro Frontends and how to implement them with React, TypeScript, and single-spa. As you delve further into Micro Frontends, you'll find endless possibilities to customize and optimize your frontend development workflow.