single-spa

single-spa is an open source JavaScript router for micro-frontends that mounts and unmounts independent applications, possibly written in different frameworks, as the URL changes.

The core of single-spa is a small router. You register applications and tell it when each one is active. It then calls their lifecycle functions as the URL changes. Each application exports three functions: bootstrap, mount and unmount. Helper packages such as single-spa-angular and single-spa-react generate these functions for each framework.

The contract consists only of those lifecycle functions, so single-spa can run different frameworks on the same page. That makes it a frequent choice for migrations in which an AngularJS application and a modern one have to coexist.

Example

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

registerApplication({
  name: 'legacy',
  app: () => import('legacy-app'),
  activeWhen: ['/admin'],
});

registerApplication({
  name: 'reports',
  app: () => import('reports-app'),
  activeWhen: ['/reports'],
});

start();

When the user goes from /admin to /reports, single-spa unmounts the legacy application and mounts the new one.

Common misunderstanding

single-spa orchestrates when applications mount. It does not decide how their code is loaded or how dependencies are shared. That part is left to import maps, SystemJS or a federation tool, and you have to choose and configure one.

It also does not isolate applications from each other. Global CSS, global variables and several copies of a framework can still collide. For a comparison with other migration routes, see Rewrite, hybrid or micro-frontends.

Related terms

• Import maps
• Micro-frontend
• Web components (custom elements)