Integrating with Single-SPA

1. Introduction

Single-SPA is a framework for building micro frontends. It allows multiple frameworks to coexist on the same page without conflicts, enabling a modular architecture for large applications.

2. Key Concepts

2.1 Micro Frontends

Micro frontends is an architectural style where independently deliverable frontend applications are composed together into a single application.

2.2 Single-SPA

Single-SPA stands for "Single Single Page Application". It allows you to build your application using multiple frameworks like React, Angular, and Vue.

3. Step-by-Step Integration

Note: Ensure you have Node.js and npm installed.

Set up a new Single-SPA application using the Single-SPA CLI:

npx create-single-spa

Choose the framework for your root application (e.g., React).
Install the desired micro frontend applications:

npm install --save-dev single-spa-react

Create a new micro frontend. For example, the following command creates a React micro frontend:

npx create-single-spa --moduleType app-react --orgName my-org

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

// Registering an application
registerApplication({
    name: "@my-org/my-app",
    app: () => System.import("@my-org/my-app"),
    activeWhen: ["/my-app"],
});

// Start the single-spa
start();

4. Best Practices

Encapsulate each micro frontend in its own repository.
Use a shared design system to maintain consistent UI.
Lazy load micro frontends to improve performance.
Ensure clear communication between micro frontends using events.

5. FAQ

What is Single-SPA?

Single-SPA is a JavaScript framework that enables developers to manage multiple micro frontends in a single application.

Can I use Single-SPA with different frameworks?

Yes, Single-SPA allows using multiple frameworks (e.g., React, Angular, Vue) in the same application seamlessly.

How do I handle routing with Single-SPA?

Routing can be managed using the activeWhen property in the registerApplication function to define the path when a micro frontend should be displayed.