Single-spa Introduction

Single-spa Introduction

Information drawn from

single-spa is a framework for bringing together multiple JavaScript microfrontends in a frontend application. Architecting your frontend using single-spa enables many benefits, such as:

Demos and Examples

See our examples page.

Architectural Overview

single-spa takes inspiration from modern framework component lifecycles by abstracting lifecycles for entire applications.

Born out of Canopy’s desire to use React + react-router instead of being forever stuck with our AngularJS + ui-router application, single-spa is now a mature library that enables frontend microservices architecture aka “microfrontends”.

Microfrontends enable many benefits such as independent deployments, migration and experimentation, and resilient applications.

single-spa apps consist of the following:

  1. A single-spa root config, which renders the HTML page and the JavaScript that registers applications. Each application is registered with three things:
  1. Applications which can be thought of as single-page applications packaged up into modules. Each application must know how to bootstrap, mount, and unmount itself from the DOM.

The main difference between a traditional SPA and single-spa applications is that they must be able to coexist with other applications as they do not each have their own HTML page.

For example, your React or Angular SPAs are applications. When active, they can listen to url routing events and put content on the DOM. When inactive, they do not listen to url routing events and are totally removed from the DOM.

The single-spa core team has put together documentation, tools, and videos showing the currently encouraged best practices with single-spa. Check out these docs for more information.

How hard will it be to use single-spa?

single-spa works with ES5, ES6+, TypeScript, Webpack, SystemJS, Gulp, Grunt, Bower, ember-cli, or really any build system available. You can npm install it or even just use a <script> tag if you prefer.

While our objective is to make using single-spa as easy as possible, we should also note that this is an advanced architecture that is different from how front-end applications are typically done. This will require changes to existing paradigms as well as understanding of underlying tools.

If you’re not starting your application from scratch, you’ll have to migrate your SPA to become a single-spa application.

single-spa works in Chrome, Firefox, Safari, Edge, and IE11 (with polyfills).

Isn’t single-spa sort of a redundant name?



Last update on 28 Apr 2022