single-spa

What is single-spa?

single-spa is a JavaScript framework for front-end microservices. It allows you to build and manage multiple microfrontends that can coexist and interoperate within a single web application. This enables teams to work independently on different parts of a web application, using different frameworks if necessary.

What are single-spa's main functionalities?

Registering Applications

This feature allows you to register multiple applications with single-spa. Each application can be loaded dynamically and activated based on the URL path.

const singleSpa = require('single-spa');
singleSpa.registerApplication({
  name: 'app1',
  app: () => System.import('app1'),
  activeWhen: ['/app1'],
  customProps: {}
});
singleSpa.start();

Mounting and Unmounting Applications

This feature allows you to manually mount and unmount applications, giving you fine-grained control over which applications are active at any given time.

const singleSpa = require('single-spa');
singleSpa.registerApplication({
  name: 'app2',
  app: () => System.import('app2'),
  activeWhen: ['/app2'],
  customProps: {}
});
singleSpa.start();

// Manually mount an application
singleSpa.mountRootParcel('app2', { domElement: document.getElementById('app2-container') });

// Manually unmount an application
singleSpa.unmountRootParcel('app2');

Custom Events

This feature allows you to dispatch and listen for custom events, enabling communication between different microfrontends.

const singleSpa = require('single-spa');
singleSpa.registerApplication({
  name: 'app3',
  app: () => System.import('app3'),
  activeWhen: ['/app3'],
  customProps: {}
});
singleSpa.start();

// Dispatch a custom event
window.dispatchEvent(new CustomEvent('custom-event', { detail: { someData: 'data' } }));

// Listen for a custom event
window.addEventListener('custom-event', (event) => {
  console.log(event.detail.someData);
});

Other packages similar to single-spa

qiankun

qiankun is a micro-frontend framework based on single-spa. It provides additional features like sandboxing and lifecycle hooks, making it easier to manage microfrontends in complex applications.

mooa

mooa is a micro-frontend framework inspired by single-spa. It focuses on Angular applications and provides a simpler API for integrating multiple Angular microfrontends.

icestark

icestark is a micro-frontend framework developed by Alibaba. It offers a set of tools and conventions for building and managing microfrontends, with a focus on React and Vue applications.

README

single-spa

Join the chat on Slack

Donate to this project

Official single-spa hosting

A javascript framework for front-end microservices

Build micro frontends that coexist and can (but don't need to) be written with their own framework. This allows you to:

• Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you're using)
• Write new code, possibly with a new framework, without rewriting your existing app
• Lazy load code for improved initial load time.

Sponsors

To add your company's logo to this section:

• Become a recurring Open Collective sponsor of at least $100 a month.
• Become a recurring Github sponsor of at least $100 a month.
• Sponsor a core team member to implement a specific feature for single-spa. Pay our regular consulting rate. Inquire in our Slack workspace.

Documentation

You can find the single-spa documentation on the website.

Check out the Getting Started page for a quick overview.

Demo and examples

Please see the examples page on the website.

Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing on the single-spa website.

Contributing

The main purpose of this repository is to continue to evolve single-spa, making it better and easier to use. Development of single-spa, and the single-spa ecosystem happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving single-spa.

Code of Conduct

Single-spa has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to single-spa.