single-spa Starter

This example demonstrates using single-spa with Module Federation on Vercel using Vercel Microfrontends. The application consists of two microfrontends that allows you to load multiple applications in a single page, enabling independent deployments and development.

Demo URL: https://microfrontends-single-spa-module-federation-root.labs.vercel.dev/

🚀 Deploy to Vercel

Deploy each microfrontend independently to experience the full power of distributed development:

Application	Description	Deploy
Root	Main shell application orchestrating single-spa and Module Federation
Content	Content microfrontend exposing landing page components

Getting Started

Prerequisites

To run the example, you will need the following prerequisites:

• Node.js installed on your machine.
• pnpm package manager installed.
• Git installed to clone the repository.

It is also recommended to have:

• Familiarity with single-spa and Module Federation concepts.
• Basic understanding of Vercel deployment process.
• A Vercel account to deploy the microfrontend applications.

Local Development Setup

Follow these steps to set up the example on your local machine. Make sure you have the prerequisites installed before proceeding.

1. Clone the repository:

   git clone https://github.com/vercel/examples.git
   cd microfrontends/single-spa
   

2. Install dependencies:

   pnpm install
   

3. Start the development environment:

   pnpm dev
   

   This command starts all applications simultaneously:

   • Root app
   • Content app

4. Access the application:

   Open http://localhost:3024 in your browser to see the federated application where components from different microfrontends are composed together using single-spa and Module Federation.

Key Components

1. Root Application (apps/root/)

   • Acts as the shell application and single-spa orchestrator
   • Dynamically imports components from content remotes
   • Manages the overall application layout and routing with single-spa
   • Configures federated remotes and manages dependencies

2. Content Application (apps/content/)

   • Exposes content-related components through Module Federation
   • Provides federated page components wrapped with single-spa lifecycle
   • Maintains its own styling and component logic
   • Mounted as a single-spa application in the root

3. Shared Packages (packages/)

   • Common TypeScript configurations across all applications
   • Shared ESLint rules and formatting standards
   • Ensures consistency across all microfrontends

Architecture Flow

architecture-beta

    group root_group(server)[Root]
    group content_group(server)[Content]

    service root(internet)[Single SPA] in root_group
    service landing(database)[Landing] in content_group

    root:L -- T:landing

Microfrontends configuration

The microfrontends are configured using the microfrontends.json file. This file defines the applications and their routing. The example uses the following configuration:

// apps/root/microfrontends.json
{
  "$schema": "https://openapi.vercel.sh/microfrontends.json\