MFE using Single Spa

Creating a React micro-frontend application using Single-Spa allows multiple applications or components to coexist on a single web page. Single-Spa provides a flexible way to build micro-frontends by loading each app independently, making it easier to scale and maintain. Here’s how to set up a basic micro-frontend structure in React using Single-Spa.

Overview

We’ll create:

1. Root Config: The main application that sets up the Single-Spa environment and registers applications.
2. Micro-Frontend Apps (React Apps): Independent React applications that Single-Spa loads as micro-frontends.

Steps to Create the MFE with Single-Spa

1. Set Up the Project Structure

Create a new directory for your project:

   mkdir single-spa-react-mfe
   cd single-spa-react-mfe

Create directories for the root config and each micro-frontend app:

   mkdir root-config
   mkdir mfe-header
   mkdir mfe-footer

2. Set Up the Root Config

The root config sets up Single-Spa and registers each micro-frontend.

Navigate to the root-config folder and install Single-Spa CLI:

   cd root-config
   npx create-single-spa

Configure Single-Spa:

• Choose root-config for project type.
• Name the project (e.g., root-config).
• Choose single-spa as the framework.

Install Additional Dependencies:
Install necessary dependencies:

   npm install react react-dom

Update single-spa.config.js to register the applications:

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

   registerApplication({
     name: "@mfe/header",
     app: () => System.import("@mfe/header"),
     activeWhen: ["/"],
   });

   registerApplication({
     name: "@mfe/footer",
     app: () => System.import("@mfe/footer"),
     activeWhen: ["/"],
   });

   start();

Configure SystemJS:
SystemJS is used to load the micro-frontends. Update index.ejs to add the SystemJS paths for each micro-frontend.

   <!-- root-config/public/index.ejs -->
   <script type="systemjs-importmap">
     {
       "imports": {
         "@mfe/header": "http://localhost:3001/header.js",
         "@mfe/footer": "http://localhost:3002/footer.js"
       }
     }
   </script>

Run the Root Config:

   npm start

The root config will now serve the Single-Spa setup.

3. Create the Micro-Frontend Apps

For each micro-frontend (e.g., Header and Footer apps), follow these steps:

A. Micro-Frontend Header (mfe-header)

Navigate to the mfe-header folder:

   cd ../mfe-header

Create the Header App:

   npx create-single-spa

• Choose application for project type.
• Use react as the framework.
• Name the project (e.g., mfe-header).

Create a Header Component in mfe-header/src/root.component.js:

   // mfe-header/src/root.component.js
   import React from "react";

   export default function Root(props) {
     return (
       <header style={{ background: "#282c34", color: "white", padding: "10px" }}>
         Micro-Frontend Header
       </header>
     );
   }

Run the Header App:

   npm start -- --port 3001

Your Header micro-frontend should now be available at http://localhost:3001.

B. Micro-Frontend Footer (mfe-footer)

Navigate to the mfe-footer folder:

   cd ../mfe-footer

Create the Footer App:

   npx create-single-spa

• Choose application for project type.
• Use react as the framework.
• Name the project (e.g., mfe-footer).

Create a Footer Component in mfe-footer/src/root.component.js:

   // mfe-footer/src/root.component.js
   import React from "react";

   export default function Root(props) {
     return (
       <footer style={{ background: "#333", color: "white", padding: "10px", marginTop: "auto" }}>
         Micro-Frontend Footer
       </footer>
     );
   }

Run the Footer App:

   npm start -- --port 3002

Your Footer micro-frontend should now be available at http://localhost:3002.

4. Test the Micro-Frontend Application

Make sure each application (root-config, mfe-header, mfe-footer) is running on its own port:

• Root Config: http://localhost:9000
• Header: http://localhost:3001
• Footer: http://localhost:3002

Open http://localhost:9000 in your browser. You should see the Header component at the top and the Footer component at the bottom of the page.

Summary

In this setup:

• Root Config manages the main Single-Spa configuration, including loading micro-frontends dynamically.
• Micro-Frontends (Header and Footer) are independent React applications, each running on its own server and port.
• SystemJS maps the remote paths of each micro-frontend to load them dynamically.

This approach provides a clean and scalable micro-frontend architecture, allowing each app to be developed, tested, and deployed independently.