Skip to content

Single-SPA Tutorials

Single-SPA is a framework for bringing together multiple JavaScript micro frontends on one page. This complete course covers the root config, lifecycles, routing, import maps, parcels, framework integration with React, Angular, and Vue, deployment, and best practices.

What Is Single-SPA?

Single-SPA is a JavaScript router for front-end microservices. It lets you register multiple applications — even built with different frameworks — and controls when each one mounts and unmounts based on the current route, all on a single page.

Why Learn Single-SPA?

Single-SPA is one of the most established ways to build micro frontends. It lets teams work independently, mix frameworks during migrations, and deploy applications separately while presenting users with one cohesive experience.

What You Will Learn

This course is organized into focused lessons so you can learn step by step. You will start with the root config, lifecycles, and routing, then move through import maps, parcels, framework integration with React, Angular, and Vue, shared utilities, deployment, testing, performance, and best practices.

Complete Single-SPA Roadmap

Follow this structured Single-SPA roadmap to learn every important topic with examples, cheatsheets, and practical usage guidance.

01

Single-SPA Basics

Single-SPA Article Series • 5 lessons

Covers Single-SPA - Introduction, Single-SPA - Basics, and 3 more lessons.

Start Learning
02

Micro Frontend Architecture

Single-SPA Article Series • 5 lessons

Covers Micro Frontends, Micro Frontend Architecture, and 3 more lessons.

Start Learning
03

Core Concepts

Single-SPA Article Series • 5 lessons

Covers Root Configuration, Single-SPA Applications, and 3 more lessons.

Start Learning
04

Application Registration

Single-SPA Article Series • 5 lessons

Covers registerApplication, start() Method, and 3 more lessons.

Start Learning
05

Lifecycle Methods

Single-SPA Article Series • 5 lessons

Covers Lifecycle Methods, Bootstrap Lifecycle, and 3 more lessons.

Start Learning
06

Routing

Single-SPA Article Series • 5 lessons

Covers Single-SPA Routing, Path-Based Routing, and 3 more lessons.

Start Learning
07

Layout Engine

Single-SPA Article Series • 5 lessons

Covers Single-SPA Layout, Layout Definition, and 3 more lessons.

Start Learning
08

Import Maps

Single-SPA Article Series • 5 lessons

Covers Import Maps, Import Map Configuration, and 3 more lessons.

Start Learning
09

SystemJS

Single-SPA Article Series • 5 lessons

Covers SystemJS, SystemJS Modules, and 3 more lessons.

Start Learning
10

React Integration

Single-SPA Article Series • 5 lessons

Covers Single-SPA with React, single-spa-react, and 3 more lessons.

Start Learning
11

Angular Integration

Single-SPA Article Series • 5 lessons

Covers Single-SPA with Angular, single-spa-angular, and 3 more lessons.

Start Learning
12

Vue Integration

Single-SPA Article Series • 5 lessons

Covers Single-SPA with Vue, single-spa-vue, and 3 more lessons.

Start Learning
13

Web Components

Single-SPA Article Series • 5 lessons

Covers Single-SPA with Web Components, Single-SPA with Lit, and 3 more lessons.

Start Learning
14

Cross-Framework Integration

Single-SPA Article Series • 5 lessons

Covers Cross-Framework Integration, React and Angular Integration, and 3 more lessons.

Start Learning
15

Parcels

Single-SPA Article Series • 5 lessons

Covers Single-SPA Parcels Overview, mountRootParcel, and 3 more lessons.

Start Learning
16

Utility Modules

Single-SPA Article Series • 5 lessons

Covers Utility Modules Overview, Shared API Client, and 3 more lessons.

Start Learning
17

Communication

Single-SPA Article Series • 5 lessons

Covers Application Communication, Custom Events, and 3 more lessons.

Start Learning
18

State Management

Single-SPA Article Series • 5 lessons

Covers Micro Frontend State Management, Shared State, and 3 more lessons.

Start Learning
19

Shared Dependencies

Single-SPA Article Series • 5 lessons

Covers Shared Dependencies, Dependency Management, and 3 more lessons.

Start Learning
20

Styling

Single-SPA Article Series • 5 lessons

Covers Single-SPA Styling, CSS Isolation, and 3 more lessons.

Start Learning
21

Design Systems

Single-SPA Article Series • 5 lessons

Covers Design Systems with Single-SPA, Shared Component Library, and 3 more lessons.

Start Learning
22

Authentication

Single-SPA Article Series • 5 lessons

Covers Single-SPA Authentication, Shared Login, and 3 more lessons.

Start Learning
23

Error Handling

Single-SPA Article Series • 5 lessons

Covers Single-SPA Error Handling, Global Error Handlers, and 3 more lessons.

Start Learning
24

Testing

Single-SPA Article Series • 5 lessons

Covers Single-SPA Testing, Unit Testing, and 3 more lessons.

Start Learning
25

Local Development

Single-SPA Article Series • 5 lessons

Covers Local Development, Local Import Map Overrides, and 3 more lessons.

Start Learning
26

Build Configuration

Single-SPA Article Series • 5 lessons

Covers Build Configuration, Single-SPA with Webpack, and 3 more lessons.

Start Learning
27

Deployment

Single-SPA Article Series • 5 lessons

Covers Single-SPA Deployment, Independent Deployment, and 3 more lessons.

Start Learning
28

CI/CD

Single-SPA Article Series • 5 lessons

Covers Single-SPA CI/CD, GitHub Actions, and 3 more lessons.

Start Learning
29

Performance

Single-SPA Article Series • 5 lessons

Covers Single-SPA Performance, Lazy Loading Applications, and 3 more lessons.

Start Learning
30

Security

Single-SPA Article Series • 5 lessons

Covers Single-SPA Security, Content Security Policy, and 3 more lessons.

Start Learning
31

Observability

Single-SPA Article Series • 5 lessons

Covers Micro Frontend Observability, Centralized Logging, and 3 more lessons.

Start Learning
32

Governance

Single-SPA Article Series • 5 lessons

Covers Micro Frontend Governance, Team Contracts, and 3 more lessons.

Start Learning
33

Migration

Single-SPA Article Series • 5 lessons

Covers Single-SPA Migration, Monolith to Micro Frontends, and 3 more lessons.

Start Learning
34

Advanced

Single-SPA Article Series • 5 lessons

Covers Advanced Single-SPA Architecture, Nested Applications, and 3 more lessons.

Start Learning
35

Troubleshooting

Single-SPA Article Series • 5 lessons

Covers Single-SPA Debugging, Application Not Mounting, and 3 more lessons.

Start Learning
36

Reference

Single-SPA Article Series • 5 lessons

Covers Single-SPA Best Practices, Single-SPA Do's and Don'ts, and 3 more lessons.

Start Learning
37

Interview

Single-SPA Article Series • 2 lessons

Covers Single-SPA Interview Questions, Single-SPA Quiz.

Start Learning

Who Is This Single-SPA Tutorial For?

This tutorial is useful for frontend and full-stack engineers, architects, and teams adopting micro frontends who want clear explanations of single-spa paired with practical, real-world examples.

Start Learning Single-SPA

Begin with the introduction lesson and continue through the sidebar in order. Each lesson explains one concept clearly and shows how to apply it confidently in real micro frontend projects.