DOCSEARCHbyAlgolia
Submit Docs

single-spa Documentation

website·Indexed 29 days ago

https://single-spa.js.org/

A framework for bringing multiple JavaScript microfrontends together on the same page. Documentation covers registered applications, parcels, SSR, and layout definitions using HTML or JSON. Includes helper libraries for Vue, Angular, React, Svelte, Inferno, Alpine.js, and Backbone, as well as shared Webpack configurations and support for build tools like Vite and Snowpack. Supports versions 5.x and 6.x.

Tokens
122.3K
Snippets
560
Records
839
Agent score
71%

What's inside single-spa

  1. Overview of single-spa functionality

    single-spa acts as a top-level router for microfrontends. When a specific route becomes active, single-spa downloads and executes the code for the corresponding "application". Each application can be developed in its own git repository, have its own CI process, be deployed independently, and can be written in different JavaScript frameworks.

  2. Overview of single-spa-angular

    single-spa-angular is a library used to create Angular microfrontends. Each microfrontend is an Angular CLI project that can use its own version of Angular and be deployed independently. These applications are then integrated into a single web page where one or more applications can be active simultaneously.

  3. Overview of single-spa functionality

    single-spa acts as a top-level router for microfrontends. It downloads and executes the code for a specific "application" when its corresponding route becomes active. Each application can be developed in its own git repository, have its own CI process, be deployed independently, and be written in different (or the same) UI frameworks.

  4. Overview of single-spa-layout

    The single-spa-layout package is an optional add-on for single-spa that provides a routing API to control top-level routes, applications, and DOM elements. It simplifies DOM placement and ordering, loading UIs during application downloads, handling 404/Not Found pages, server-side rendering, and error pages. In the browser, it generates registration configurations from HTML/JSON and manages DOM layout during routing events. On the server, it constructs layout objects from HTML templates to send the correct HTML document based on the route.

  5. Overview of Server-Side Rendering (SSR) in single-spa

    In a microfrontend architecture, SSR involves assembling an HTML page from multiple separate microfrontends. Each microfrontend controls a fragment of the HTML sent from the server to the browser and is subsequently 'hydrated' (attaching event listeners) once initialized in the browser. The primary goals of SSR are improved initial page load performance and better Search Engine Optimization (SEO).

  6. Overview of single-spa microfrontend framework

    single-spa is a framework that allows multiple JavaScript microfrontends to coexist in a single frontend application. It enables developers to use multiple frameworks (e.g., React, Angular, Vue) on the same page without refreshing, deploy microfrontends independently, and lazy load code to improve initial load times. It supports ES5, ES6+, TypeScript, and various build systems like Webpack, SystemJS, Gulp, and Grunt, and is compatible with Chrome, Firefox, Safari, IE11, and Edge.

  7. Overview of single-spa microfrontend architecture

    single-spa is a framework that allows multiple JavaScript microfrontends to coexist in a single frontend application. It enables the use of multiple frameworks (e.g., React, Angular, Vue, Ember) on the same page without refreshing, independent deployments, and lazy loading of code.

    The architecture consists of two primary components:

    1. Root Config: Renders the HTML page and registers applications. Each registered application requires a name, a loading function, and an activity function (to determine when it should be active/inactive).
    2. Applications: Modularized single-page applications that must implement bootstrap, mount, and unmount lifecycles to coexist in the DOM without having their own dedicated HTML page.

  8. Overview of single-spa microfrontend architecture

    single-spa is a framework that allows multiple JavaScript microfrontends to coexist in a single frontend application. It enables the use of multiple frameworks (e.g., React, Angular, Vue) on the same page without refreshing, independent deployment of microfrontends, and lazy loading of code to improve initial load times. It supports ES5, ES6+, TypeScript, and various build systems like Webpack and SystemJS, and is compatible with Chrome, Firefox, Safari, Edge, and IE11 (with polyfills).

  9. Overview of single-spa-leaked-globals

    single-spa-leaked-globals is a helper library designed for single-spa applications that depend on global variables (common in older frameworks like AngularJS or Backbone). It ensures that specific global variables are added to the window object during the application's mount lifecycle and removed during the unmount lifecycle. This is particularly useful when different applications require different versions of the same global variable (e.g., Underscore.js vs Lodash both using _) or when the order of mounting affects global plugin availability.

  10. Overview of single-spa-angular

    single-spa-angular is a library used to create Angular microfrontends. In this architecture, each microfrontend is an Angular CLI project that can use its own version of Angular and be deployed independently. These applications are then integrated into a single web page where one or more can be active simultaneously.

  11. Overview of single-spa v6 features

    single-spa@6 introduces advanced features including async navigation cancelation and a parcel-only mode (via patchHistoryApi). It updates package configuration to use modern NodeJS and bundler features such as package entrypoints and "type": "module". Additionally, urlRerouteOnly now defaults to true to improve performance.

  12. Overview of single-spa-ember

    single-spa-ember is a helper library that simplifies the implementation of single-spa registered application lifecycle functions (bootstrap, mount, and unmount) for Ember.js applications. It also provides a utility to implement the loading function for the root application. It is available via npm and bower.