single-spa

https://single-spa.js.org/docs
Admin
single-spa is a JavaScript framework for building micro frontends that allows you to use multiple...
Tokens:77,649
Snippets:854
Trust Score:8.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### Calling start() to Mount Applications

Source: https://single-spa.js.org/docs/configuration

Illustrates the necessity of calling the start() API from single-spa to enable applications to be mounted. Calling start() before registering apps allows immediate mounting without waiting for initial setup.

```javascript
import { start } from "single-spa";

/* Calling start before registering apps means that single-spa can immediately mount apps, without
 * waiting for any initial setup of the single page app.
 */
start();

// Register applications....
```

--------------------------------

### Quickstart: single-spa-react with React <=17

Source: https://single-spa.js.org/docs/ecosystem-react

This example demonstrates how to set up single-spa-react for applications using React version 17 or earlier, utilizing the older ReactDOM API.

```javascript
import React from "react";  
import ReactDOM from "react-dom";  
import rootComponent from "./path-to-root-component.js";  
import singleSpaReact, { SingleSpaContext } from "single-spa-react";  
  
export const { bootstrap, mount, unmount } = singleSpaReact({  
  React,  
  ReactDOM,  
  rootComponent,  
  errorBoundary(err, info, props) {  
    // https://reactjs.org/docs/error-boundaries.html  
    return <div>This renders when a catastrophic error occurs</div>;  
  },  
});  
```

--------------------------------

### Run create-single-spa

Source: https://single-spa.js.org/docs/create-single-spa

Executes the create-single-spa CLI after global installation to start the project creation process via an interactive prompt.

```bash
create-single-spa  
```

--------------------------------

### Routing setup in single-spa-angular v3.x

Source: https://single-spa.js.org/docs/ecosystem-angular

Example of how to configure routing with single-spa-angular v3.x, including importing `getSingleSpaExtraProviders`.

```typescript
import { NgZone } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import singleSpaAngular, { getSingleSpaExtraProviders } from 'single-spa-angular';

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<app-root />',
  Router,
  NavigationStart,
  NgZone,
});

```

--------------------------------

### CDN Usage Example with single-spa

Source: https://single-spa.js.org/docs/ecosystem-html-web-components

Example of how to use single-spa-html when installed via CDN, registering an application with single-spa.

```javascript
const webComponentApp = window.singleSpaHtml.default({  
  template: (props) =>  
    `<x-my-web-component attr="${props.attr}"></x-my-web-component>`,  
});  
  
singleSpa.registerApplication({  
  name: "name",  
  app: webComponentApp,  
  activeWhen: () => true,  
});  

```

--------------------------------

### Path Prefix Routing Example

Source: https://single-spa.js.org/docs/configuration

Demonstrates how a path prefix is used to match the start of a URL, allowing any characters after the prefix. This is useful for routing to specific applications.

```plaintext
'/app1'
    ✅ https://app.com/app1    ✅ https://app.com/app1/anything/everything    🚫 https://app.com/app2
```

```plaintext
'/users/:userId/profile'
    ✅ https://app.com/users/123/profile    ✅ https://app.com/users/123/profile/sub-profile/    🚫 https://app.com/users//profile/sub-profile/    🚫 https://app.com/users/profile/sub-profile/
```

```plaintext
'/pathname/#/hash'
    ✅ https://app.com/pathname/#/hash    ✅ https://app.com/pathname/#/hash/route/nested    🚫 https://app.com/pathname#/hash/route/nested    🚫 https://app.com/pathname#/another-hash
```

```plaintext
['/pathname/#/hash', '/app1']
    ✅ https://app.com/pathname/#/hash/route/nested    ✅ https://app.com/app1/anything/everything    🚫 https://app.com/pathname/app1    🚫 https://app.com/app2
```

--------------------------------

### Install single-spa-riot

Source: https://single-spa.js.org/docs/ecosystem-riot

Install the single-spa-riot package using npm.

```bash
npm install --save single-spa-riot  

```

--------------------------------

### Install Single-spa Dependencies

Source: https://single-spa.js.org/docs/contributing-overview

Navigate to the project root and run this command to install single-spa's dependencies.

```bash
yarn
```

--------------------------------

### Install single-spa-dojo

Source: https://single-spa.js.org/docs/ecosystem-dojo

Install the single-spa-dojo package using npm or yarn.

```bash
npm install --save single-spa-dojo  

# or
yarn add single-spa-dojo  
```

--------------------------------

### Install create-single-spa Globally

Source: https://single-spa.js.org/docs/create-single-spa

Installs the create-single-spa CLI globally for easy access. Use this if you prefer having the tool available system-wide.

```bash
npm install --global create-single-spa  

# or  
yarn global add create-single-spa  
```

--------------------------------

### start

Source: https://single-spa.js.org/docs/api

Starts the single-spa framework, enabling applications to be bootstrapped, mounted, and unmounted. Can optionally disable rerouting.

```APIDOC
## start

### Description
Starts the single-spa framework, enabling applications to be bootstrapped, mounted, and unmounted. Can optionally disable rerouting.

### Method
`singleSpa.start()`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
singleSpa.start();

// Optionally, you can provide configuration
singleSpa.start({
  urlRerouteOnly: true,
});
```

### Response
#### Success Response (200)
`undefined`

#### Response Example
None
```

--------------------------------

### Install single-spa-cycle

Source: https://single-spa.js.org/docs/ecosystem-cycle

Install the single-spa-cycle package using npm.

```bash
npm install --save @pcmnac/single-spa-cycle  

```

--------------------------------

### Quickstart: single-spa-react with React 18+

Source: https://single-spa.js.org/docs/ecosystem-react

Use single-spa-react to create and export single-spa lifecycle functions from your application's entry file. This example is for React 18+ using ReactDOMClient.

```javascript
import React from "react";  
import ReactDOMClient from "react-dom/client";  
import rootComponent from "./path-to-root-component.js";  
// SingleSpaContext is a react@16.3 (if available) context that provides singleSpa props  
import singleSpaReact, { SingleSpaContext } from "single-spa-react";  
  
export const { bootstrap, mount, unmount } = singleSpaReact({  
  React,  
  ReactDOMClient,  
  rootComponent,  
  errorBoundary(err, info, props) {  
    // https://reactjs.org/docs/error-boundaries.html  
    return <div>This renders when a catastrophic error occurs</div>;  
  },  
});  
```

--------------------------------

### Install Preact

Source: https://single-spa.js.org/docs/ecosystem-preact

Install Preact as a dependency for your project.

```bash
npm install --save preact  

```

--------------------------------

### Inferno Application Setup with single-spa

Source: https://single-spa.js.org/docs/ecosystem-inferno

Use this snippet in your Inferno application's entry file to register it with single-spa. Ensure you have installed `single-spa-inferno` and have your root component and DOM element getter configured.

```javascript
import Inferno from "inferno";  
import rootComponent from "./path-to-root-component.js";  
import singleSpaInferno from "single-spa-inferno";  
  
const infernoLifecycles = singleSpaInferno({
  Inferno,
  createElement,
  rootComponent,
  domElementGetter: () => document.getElementById("main-content"),
});  
  
export const bootstrap = infernoLifecyles.bootstrap;  
export const mount = infernoLifecyles.mount;  
export const unmount = infernoLifecyles.unmount;  

```

--------------------------------

### Install single-spa-css

Source: https://single-spa.js.org/docs/ecosystem-css

Install the single-spa-css npm package using npm, pnpm, or yarn.

```bash
npm install single-spa-css  

```

```bash
pnpm install single-spa-css  

```

```bash
yarn add single-spa-css  

```

--------------------------------

### Install single-spa-web-server-utils

Source: https://single-spa.js.org/docs/create-single-spa

Installs the single-spa-web-server-utils package, which provides utility functions for implementing web servers, particularly for inlining import maps into HTML files.

```bash
npm install --save single-spa-web-server-utils  

# alternatively  
yarn add single-spa-web-server-utils  
```

--------------------------------

### Install single-spa-react

Source: https://single-spa.js.org/docs/ecosystem-react

Install single-spa-react using npm or yarn. Alternatively, you can use it via a script tag.

```bash
npm install --save single-spa-react  

# or  
yarn add single-spa-react  
```

--------------------------------

### Install single-spa-layout

Source: https://single-spa.js.org/docs/layout-overview

Install the layout engine into your root config. This is not needed for other applications.

```bash
npm install --save single-spa-layout  

# or  
yarn add single-spa-layout  
```

--------------------------------

### Quickstart: single-spa-dojo Entry File

Source: https://single-spa.js.org/docs/ecosystem-dojo

Configure the entry file for your single-spa application using single-spa-dojo. This allows your application to be downloaded as an in-browser ES module.

```javascript
import { renderer } from "@dojo/framework/core/vdom";  
import { v, w } from "@dojo/framework/widget-core/d";  
import singleSpaDojo from "single-spa-dojo";  
import App from "./app";  
  
const dojoLifecycles = singleSpaDojo({
  // required  
  renderer,
  
  // required  
  v,
  
  // required  
  w,
  
  // required  
  appComponent: App,  
  
  // optional - see https://dojo.io/learn/creating-widgets/rendering-widgets#mountoptions-properties  
  mountOptions: {
    // optional  
    registry: myRegistry,

    // optional - one will be provided by single-spa automatically  
    domNode: document.getElementById("myContainer"),  

    // optional  
    sync: true,  
  },
});  
  
export const bootstrap = dojoLifecycles.bootstrap;  
export const mount = dojoLifecycles.mount;  
export const unmount = dojoLifecycles.unmount;  
```

--------------------------------

### Starting single-spa

Source: https://single-spa.js.org/docs/api

Call this function to bootstrap, mount, and unmount applications. Optionally, configure rerouting behavior.

```javascript
singleSpa.start();
```

```javascript
singleSpa.start({
  urlRerouteOnly: true,
});
```

--------------------------------

### Initialize create-single-spa without Global Installation

Source: https://single-spa.js.org/docs/create-single-spa

Initializes create-single-spa without needing a global installation. This is useful for one-off project creations or when avoiding global package management.

```bash
npm init single-spa  

# or  
npx create-single-spa  

# or  
yarn create single-spa  
```

--------------------------------

### Quickstart single-spa-preact Integration

Source: https://single-spa.js.org/docs/ecosystem-preact

Integrate single-spa-preact into your project's entry file by importing necessary modules and configuring the lifecycles. Ensure the root component and domElementGetter are correctly specified.

```javascript
import preact from "preact";  
import rootComponent from "./path-to-root-component.js";  
import singleSpaPreact from "single-spa-preact";  
  
const preactLifecycles = singleSpaPreact({
  preact,
  rootComponent,
  domElementGetter: () => document.getElementById("main-content"),
});

export const bootstrap = preactLifecycles.bootstrap;
export const mount = preactLifecycles.mount;
export const unmount = preactLifecycles.unmount;  

```

--------------------------------

### Install single-spa-angular with yarn

Source: https://single-spa.js.org/docs/ecosystem-angular

Use yarn to install the single-spa-angular package. This is an alternative to npm for manual installation.

```bash
yarn add single-spa-angular
```

--------------------------------

### Example package.json for Vite Root Config

Source: https://single-spa.js.org/docs/ecosystem-vite

Illustrates the package.json structure for a Vite-based root config project, highlighting dependencies and scripts to be managed.

```json
{
  "name": "my-vite-based-root-config",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    // ---------- DELETE 1 LINE ----------
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    // ---------- DELETE 4 LINES ----------
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "@tsconfig/svelte": "^5.0.2",
    "svelte": "^4.2.12",
    "svelte-check": "^3.6.7",

    "tslib": "^2.6.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }

}
```

--------------------------------

### Configure Jest Setup File for SystemJS Mocking

Source: https://single-spa.js.org/docs/testing/units

Use this setup file to mock SystemJS.import for testing microfrontends. It allows you to resolve specific module imports to predefined mocks, ensuring predictable behavior during tests.

```javascript
// jest.setup.js  
// import Mocks for SystemJS mock below  
import peopleApplication from "@react-mf/people";  
// Mock SystemJS  
global.System = {  
  import: jest.fn(mockImport),  
};

function mockImport(importName) {  
  // What you do in mock import will depend a lot on how you use SystemJS in the project and components you wish to test  

  /* If I had already created a mock for `@react-mf/people` and I wanted to test this component:  
   *  https://github.com/react-microfrontends/planets/blob/main/src/planets-page/selected-planet/selected-planet.component.js#L5  
   * I would want `System.import('@react-mf/people')` to resovle to my mock one way to accomplish this would be the following  
   */  
  if (importName === "@react-mf/people") {  
    return Promise.resolve(peopleApplication);  
  } else {  
    console.warn("No mock module found");  
    return Promise.resolve({});  
  }
}

```

--------------------------------

### Install single-spa-angularjs

Source: https://single-spa.js.org/docs/ecosystem-angularjs

Install the single-spa-angularjs package using npm. Alternatively, you can use a CDN link.

```bash
npm install --save single-spa-angularjs  
```

--------------------------------

### Install single-spa-angular with npm

Source: https://single-spa.js.org/docs/ecosystem-angular

Use npm to install the single-spa-angular package. This is part of the manual installation process for older Angular versions or when not using Angular CLI.

```bash
npm install single-spa-angular
```

--------------------------------

### Install single-spa-angular with pnpm

Source: https://single-spa.js.org/docs/ecosystem-angular

Use pnpm to install the single-spa-angular package. This is another alternative to npm for manual installation.

```bash
pnpm install single-spa-angular
```

--------------------------------

### Install single-spa via Vue CLI

Source: https://single-spa.js.org/docs/ecosystem-vue

Use the Vue CLI plugin to automatically set up your project for single-spa.

```bash
vue add single-spa  

```

--------------------------------

### Install Snowpack Plugins

Source: https://single-spa.js.org/docs/ecosystem-snowpack

Install the necessary Snowpack plugins for webpack integration and SystemJS public path management.

```bash
npm install --save-dev systemjs-webpack-interop @snowpack/plugin-webpack
```

```bash
yarn add --dev systemjs-webpack-interop @snowpack/plugin-webpack
```

```bash
pnpm install --save-dev systemjs-webpack-interop @snowpack/plugin-webpack
```

--------------------------------

### Import Specifier Examples

Source: https://single-spa.js.org/docs/recommended-setup

Demonstrates examples of import specifiers, which are strings indicating which module to load. Bare specifiers like 'react' can be aliased to URLs using import maps.

```javascript
// ./thing.js is the import specifier
import thing from "./thing.js";

// react is the import specifier
import React from "react";

```

--------------------------------

### Install webpack-config-single-spa and webpack-merge

Source: https://single-spa.js.org/docs/shared-webpack-configs

Install the necessary packages for using shared single-spa webpack configurations. This includes webpack-config-single-spa and webpack-merge.

```bash
npm install --save-dev webpack-config-single-spa webpack-merge  
  
# or  
yarn add --dev webpack-config-single-spa webpack-merge  
```

--------------------------------

### Install @angular/elements

Source: https://single-spa.js.org/docs/ecosystem-angular

Install the necessary Angular Elements package using npm, yarn, or pnpm.

```bash
npm install @angular/elements  
# Or if you're using yarn  
yarn add @angular/elements  
# Or if you're using pnpm  
pnpm install @angular/elements  

```

--------------------------------

### Install single-spa-leaked-globals via npm or yarn

Source: https://single-spa.js.org/docs/ecosystem-leaked-globals

Install the single-spa-leaked-globals package using npm or yarn. This is the recommended method for most projects.

```bash
npm install --save single-spa-leaked-globals  

# or  
yarn add single-spa-leaked-globals  
```

--------------------------------

### Skip Installation with --skipInstall

Source: https://single-spa.js.org/docs/create-single-spa

Skips the automatic npm/yarn/pnpm installation step after project files are generated. This allows for manual dependency management.

```bash
create-single-spa --skipInstall  
```

--------------------------------

### Install single-spa-html with npm or yarn

Source: https://single-spa.js.org/docs/ecosystem-html-web-components

Use npm or yarn to add single-spa-html to your project dependencies.

```bash
npm install --save single-spa-html  
  
# or  
yarn add single-spa-html  

```

--------------------------------

### Install single-spa-alpinejs with npm or yarn

Source: https://single-spa.js.org/docs/ecosystem-alpinejs

Install the single-spa-alpinejs package using either npm or yarn. Consider locking the package to a specific version for stability.

```bash
npm install --save single-spa-alpinejs  
  
# or  
yarn add single-spa-alpinejs  
```

--------------------------------

### Install webpack-config-single-spa-react and webpack-merge

Source: https://single-spa.js.org/docs/shared-webpack-configs

Install the necessary packages for using shared single-spa React webpack configurations. This includes webpack-config-single-spa-react and webpack-merge.

```bash
npm install --save-dev webpack-config-single-spa-react webpack-merge  
  
# or  
yarn add --dev webpack-config-single-spa-react webpack-merge  
```

--------------------------------

### Import Map Before Deployment

Source: https://single-spa.js.org/docs/ssr-overview

Shows an example of an import map configuration before a new version of a microfrontend is deployed. This configuration points to version 1 of the 'navbar' microfrontend.

```json
{
  "imports": {
    "@org-name/navbar/": "https://cdn.example.com/navbar/v1/"
  }
}

```

--------------------------------

### registerApplication (Configuration object)

Source: https://single-spa.js.org/docs/api

Registers an application using a configuration object, allowing for more complex setups including dynamic customProps.

```APIDOC
## registerApplication (Configuration object)

### Description
Registers an application using a configuration object, allowing for more complex setups including dynamic customProps.

### Method
`singleSpa.registerApplication({ name: "appName", app: () => System.import("appName"), activeWhen: "/appName", customProps: { authToken: "xc67f6as87f7s9d" } })`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
singleSpa.registerApplication({
  name: "appName",
  app: () => System.import("appName"),
  activeWhen: "/appName",
  customProps: {
    authToken: "xc67f6as87f7s9d",
  },
});

singleSpa.registerApplication({
  name: "appName",
  app: () => System.import("appName"),
  activeWhen: "/appName",
  // Dynamic custom props that can change based on route
  customProps(appName, location) {
    return {
      authToken: "xc67f6as87f7s9d",
    };
  },
});
```

### Response
#### Success Response (200)
`undefined`

#### Response Example
None
```

--------------------------------

### Mount and Unmount CSS Manually

Source: https://single-spa.js.org/docs/ecosystem-css

Example demonstrating the mechanics of mounting and unmounting CSS. In practice, this is often handled by tools like css-loader, style-loader, or single-spa-css.

```javascript
// This code is an example of the mechanics of mounting + unmounting + remounting CSS. 
// In practice, this is often done via tools like css-loader, style-loader, or  
// single-spa-css (rather than manually).  
const style = document.createElement("style");  
style.textContent = `.settings {color: blue;}`;  
  
export const mount = [  
  async () => {  
    document.head.appendChild(styleElement);  
  },  
  reactLifecycles.mount,  
];  
  
export const unmount = [  
  reactLifecycles.unmount,  
  async () => {  
    styleElement.remove();  
  },  
];  

```

--------------------------------

### Configure Backbone App with Production Build

Source: https://single-spa.js.org/docs/ecosystem-backbone

Use this setup when loading a single production bundle that includes all application dependencies. The `DomElementSetter` is crucial for specifying where the Backbone application will be mounted.

```javascript
import singleSpaBackbone from "@emtecinc/single-spa-backbone";  
  
const backBoneLifecycles = singleSpaBackbone({
  BasePath: "appBasePath",  
  App: {  
    AppPath: "src/app",  
  },
  DomElementSetter: domElementSetter,
});  
  
export const bootstrap = backBoneLifecycles.bootstrap;  
  
export const mount = backBoneLifecycles.mount;  
  
export const unmount = backBoneLifecycles.unmount;  
  
function domElementSetter() {  
  //use the same element id to render into, in the backbone app  
  let el = document.getElementById("shell-container");  
  if (!el) {  
    el = document.createElement("div");  
    el.id = "shell-container";  
    document.body.appendChild(el);  
  }
}
```

--------------------------------

### CDN Usage: Registering an Alpine.js App

Source: https://single-spa.js.org/docs/ecosystem-alpinejs

Example of using single-spa-alpinejs when installed via CDN. The library is accessed globally via the window object, and the Alpine.js app is registered with single-spa.

```javascript
const alpinejsApp = window.singleSpaAlpinejs({  
  template: `  
    <div class="rounded overflow-hidden shadow-lg font-sans p-1 m-1"   
         x-data="{ open: false }">  
      <div class="font-bold p-1">Example for x-show attribute</div>  
      <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold   
      hover:text-white py-2 px-4 border border-blue-500   
      hover:border-transparent rounded" @click="open = !open">Open/Close</button>  
      <div x-show="open" class="text-4xl">  
          Hey, I'm open  
      </div>  
    </div>`,  
});  
  
singleSpa.registerApplication({  
  name: "name",  
  app: alpinejsApp,  
  activeWhen: () => true,  
});  
```

--------------------------------

### Create a single-spa Root Config

Source: https://single-spa.js.org/docs/getting-started-overview

Use the create-single-spa utility to generate a starter root-config project. Follow the prompts to configure your project, including optional server-side rendering support and the organization name for module resolution.

```bash
npx create-single-spa --moduleType root-config
```

--------------------------------

### Load SVGs as Components with @svgr/webpack

Source: https://single-spa.js.org/docs/shared-webpack-configs

Configure webpack to load SVG files as React components by installing and using the @svgr/webpack loader. This example demonstrates how to merge this rule into the default single-spa webpack configuration.

```javascript
const singleSpaDefaults = require("webpack-config-single-spa");
const { mergeWithRules } = require("webpack-merge");

const merge = mergeWithRules({
  module: {
    rules: {
      // replace the entire `rule` if the `test` property matches
      test: "match",
      use: "replace",
    },
  },
});

module.exports = (env, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "abcde",
    projectName: "fghij",
    webpackConfigEnv: env,
    argv,
  });

  const config = merge(defaultConfig, {
    module: {
      rules: [
        {
          test: /\.svg$/i,
          use: [{ loader: "@svgr/webpack" }],
        },
      ],
    },
  });

  // console.dir(config, null, 2) // useful for debugging
  return config;
};
```

--------------------------------

### Basic single-spa-css Usage

Source: https://single-spa.js.org/docs/ecosystem-css

Demonstrates the basic setup for single-spa-css, including importing the library, configuring CSS URLs, and integrating its lifecycles with framework lifecycles. Ensure CSS lifecycles are ordered correctly to prevent FOUC.

```javascript
import singleSpaCss from 'single-spa-css';

const cssLifecycles = singleSpaCss({
  // required: a list of CSS URLs to load
  // can be omitted if webpackExtractedCss is set to true, do not specify Webpack extracted css files here
  cssUrls: ['https://example.com/main.css'],

  // optional: defaults to false. This controls whether extracted CSS files from Webpack
  // will automatically be loaded. This requires using the ExposeRuntimeCssAssetsPlugin,
  // which is documented below.
  webpackExtractedCss: false,

  // optional: defaults to true. Indicates whether the <link> element for the CSS will be
  // unmounted when the single-spa microfrontend is unmounted.
  shouldUnmount: true,

  // optional: defaults to 5000. The number of milliseconds to wait on the <link> to load
  // before failing the mount lifecycle.
  timeout: 5000,

  // optional: defaults to a standard <link rel="stylesheet" href="/main.css"> element
  // Customize the creation of the link element that is used by single-spa-css by providing a
  // function. For example, for setting the cross-origin or other HTML attributes on the <link>
  createLink(url) {
    const linkEl = document.createElement('link');
    linkEl.rel = 'stylesheet';
    linkEl.href = url;
    return linkEl;
  },
});

const reactLifecycles = singleSpaReact({...})

// Export an array of lifecycles to integrate with a framework's
// single-spa lifecycles. The order matters.
export const bootstrap = [
  cssLifecycles.bootstrap,
  reactLifecycles.bootstrap
]

export const mount = [
  // The CSS lifecycles should be before your framework's mount lifecycle,
  // to avoid a Flash of Unstyled Content (FOUC)
  cssLifecycles.mount,
  reactLifecycles.mount
]

export const unmount = [
  // The CSS lifecycles should be after your framework's unmount lifecycle,
  // to avoid a Flash of Unstyled Content (FOUC)
  reactLifecycles.unmount,
  cssLifecycles.unmount
]
```

--------------------------------

### Install webpack-config-single-spa-ts

Source: https://single-spa.js.org/docs/shared-webpack-configs

Install the webpack-config-single-spa-ts package and webpack-merge for TypeScript-based single-spa applications.

```bash
npm install --save-dev webpack-config-single-spa-ts webpack-merge  

# or
yarn add --dev webpack-config-single-spa-ts webpack-merge  
```

--------------------------------

### Construct Server Layout from File

Source: https://single-spa.js.org/docs/layout-api

Use `constructServerLayout` with a `filePath` to parse an HTML file for server rendering. This should be done once on server boot.

```javascript
import { constructServerLayout } from "single-spa-layout/server";  
  
const serverLayout = constructServerLayout({  
  // filepath is resolved relative to the cwd (current working directory)  
  // of the NodeJS process.  
  filePath: "server/views/index.html",  
});  
```

--------------------------------

### Install webpack-config-single-spa-react-ts

Source: https://single-spa.js.org/docs/shared-webpack-configs

Install the webpack-config-single-spa-react-ts package and webpack-merge for React and TypeScript-based single-spa applications.

```bash
npm install --save-dev webpack-config-single-spa-react-ts webpack-merge  
  
# or  
yarn add --dev webpack-config-single-spa-react-ts webpack-merge  
```

--------------------------------

### start

Source: https://single-spa.js.org/docs/api

Initializes single-spa with optional configuration. The `opts` object can customize behavior, such as `urlRerouteOnly` which defaults to true and prevents reroutes on history state changes unless the client-side route actually changes.

```APIDOC
## start(opts)

### Description
Initializes single-spa with optional configuration.

### Arguments
* `opts` (object) - Optional configuration object.
  * `urlRerouteOnly` (boolean) - Defaults to true. If true, `history.pushState()` and `history.replaceState()` will not trigger a single-spa reroute unless the client-side route was changed. This can improve performance in some situations.

### Returns
`undefined`
```

--------------------------------

### Create Single-SPA Project with Framework Argument

Source: https://single-spa.js.org/docs/create-single-spa

Creates a new single-spa project, specifying the desired framework directly via a CLI argument. This bypasses the interactive prompt for framework selection.

```bash
# Different ways of doing the same thing  
create-single-spa --framework react  
npm init single-spa --framework react  
npx create-single-spa --framework react  
yarn create single-spa --framework react  
```

--------------------------------

### Install single-spa-vue without Vue CLI

Source: https://single-spa.js.org/docs/ecosystem-vue

Install the single-spa-vue package using npm for projects not using Vue CLI.

```bash
npm install --save single-spa-vue  

```

--------------------------------

### Bootstrap Lifecycle Function Example

Source: https://single-spa.js.org/docs/building-applications

An example of a bootstrap lifecycle function, demonstrating the props it receives. This function is called when an application is initialized.

```javascript
function bootstrap(props) {
  const { 
    name, // The name of the application 
    singleSpa, // The singleSpa instance 
    mountParcel, // Function for manually mounting 
    customProps, // Additional custom information 
  } = props; // Props are given to every lifecycle 
  return Promise.resolve();
}
```

--------------------------------

### Specify Project Directory with --dir

Source: https://single-spa.js.org/docs/create-single-spa

Creates a new single-spa project within a specified directory. Use this to control the location where the project files are generated.

```bash
# Two ways of doing the same thing  
create-single-spa my-dir  
create-single-spa --dir my-dir  
```

--------------------------------

### registerApplication (Simple arguments)

Source: https://single-spa.js.org/docs/api

Registers an application using simple, direct arguments for name, loading function, and activity function.

```APIDOC
## registerApplication (Simple arguments)

### Description
Registers an application using simple, direct arguments for name, loading function, and activity function.

### Method
`singleSpa.registerApplication("appName", () => System.import("appName"), (location) => location.pathname.startsWith("appName"))`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
singleSpa.registerApplication(
  "appName",
  () => System.import("appName"),
  (location) => location.pathname.startsWith("appName")
);
```

### Response
#### Success Response (200)
`undefined`

#### Response Example
None
```

--------------------------------

### Registering an application with simple arguments

Source: https://single-spa.js.org/docs/api

Use this method to register an application with its name, a loading function, and an activity function.

```javascript
singleSpa.registerApplication("appName", () => System.import("appName"), (location) => location.pathname.startsWith("appName"));
```

--------------------------------

### Register single-spa applications using arguments

Source: https://single-spa.js.org/docs/configuration

Register applications with single-spa using the `registerApplication` function with individual arguments. This is a common way to set up your single-spa configuration.

```javascript
import { registerApplication, start } from "single-spa";

// Simple usage
registerApplication(
  "app2",
  () => import("src/app2/main.js"),
  (location) => location.pathname.startsWith("/app2"),
  { some: "value" },
);

// Config with more expressive API
registerApplication({
  name: "app1",
  app: () => import("src/app1/main.js"),
  activeWhen: "/app1",
  customProps: {
    some: "value",
  },
});

start();

```

--------------------------------

### Install single-spa-angular@4.x

Source: https://single-spa.js.org/docs/ecosystem-angular

Install the latest version of single-spa-angular using npm, yarn, or pnpm. This command updates the core single-spa helpers for Angular applications.

```bash
npm install single-spa-angular@4.0.0  
# Or if you're using yarn  
yarn add single-spa-angular@4.0.0  
# Or if you're using pnpm  
pnpm install single-spa-angular@4.0.0  
```

--------------------------------

### Test Changes

Source: https://single-spa.js.org/docs/contributing-overview

Run this command from the project root to execute the test suite for your changes.

```bash
yarn test
```

--------------------------------

### Construct Server Layout from HTML String

Source: https://single-spa.js.org/docs/layout-api

Alternatively, use `constructServerLayout` with an `html` string if a file path is not suitable. This prepares the HTML for server rendering.

```javascript
const serverLayout = constructServerLayout({  
  html: `  
    <html>  
      <head>  
        <single-spa-router>  
          <application name="nav"></application>  
        </single-spa-router>  
      </head>  
    </html>  
  `,  
});  
```

--------------------------------

### Installing Angular Localize for i18n Errors

Source: https://single-spa.js.org/docs/ecosystem-angular

These commands show how to install the `@angular/localize` package, which resolves 'It looks like your application or one of its dependencies is using i18n' errors. Use the command corresponding to your package manager.

```bash
npm install @angular/localize
# Or if you're using yarn
yarn add @angular/localize
# Or if you're using pnpm
pnpm install @angular/localize

```

--------------------------------

### Define an application with lifecycle methods

Source: https://single-spa.js.org/docs/configuration

When using the arguments API for `registerApplication`, the application can be provided as an object with explicit `bootstrap`, `mount`, and `unmount` lifecycle methods.

```javascript
const application = {
  bootstrap: () => Promise.resolve(), //bootstrap function
  mount: () => Promise.resolve(), //mount function
  unmount: () => Promise.resolve(), //unmount function
};
registerApplication("applicationName", application, activityFunction);

```

--------------------------------

### Configure single-spa applications with layout engine

Source: https://single-spa.js.org/docs/layout-overview

In your root-config's JavaScript, import necessary functions from single-spa and single-spa-layout to construct routes, applications, and the layout engine. Register applications and start single-spa.

```javascript
import { registerApplication, start } from "single-spa";  
import {  
  constructApplications,  
  constructRoutes,  
  constructLayoutEngine,  
} from "single-spa-layout";  

const routes = constructRoutes(document.querySelector("#single-spa-layout"));  
const applications = constructApplications({  
  routes,  
  loadApp({ name }) {  
    return System.import(name);  
  },  
});  
const layoutEngine = constructLayoutEngine({ routes, applications });  

applications.forEach(registerApplication);  
start();  
```

--------------------------------

### Serve single-spa applications

Source: https://single-spa.js.org/docs/ecosystem-angular

Use the 'npm run serve:single-spa' command to serve your single-spa applications. Note that this command does not open an HTML file directly.

```bash
npm run serve:single-spa  
```

--------------------------------

### Subscribe to singleSpaPropsSubject in Component

Source: https://single-spa.js.org/docs/ecosystem-angular

Example of subscribing to the `singleSpaPropsSubject` in an Angular component to access custom props provided by single-spa.

```typescript
// If you're using the singleSpaPropsSubject generated by the single-spa-angular schematics,
// here's an example component that uses the custom props
import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from "rxjs";
import {
  singleSpaPropsSubject,
  SingleSpaProps,
} from "src/single-spa/single-spa-props";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit, OnDestroy {
  singleSpaProps: SingleSpaProps;
  subscription: Subscription;

  ngOnInit(): void {
    this.subscription = singleSpaPropsSubject.subscribe(
      (props) => (this.singleSpaProps = props)
    );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  // OR if you don't need to access `singleSpaProps` inside the component
  // then create `Observable` property and use it in template with `async` pipe.
  singleSpaProps$ = singleSpaPropsSubject.asObservable();
}
```

--------------------------------

### Importing Microfrontend Server Modules

Source: https://single-spa.js.org/docs/ssr-overview

Demonstrates how to import and use server-side rendering functions from a microfrontend module using dynamic import. This is typically used within a server-side rendering context.

```javascript
import("@org-name/navbar/server.js").then((navbar) => {
  const headers = navbar.getResponseHeaders(props);
  const htmlStream = navbar.serverRender(props);
});

```

--------------------------------

### Listen for First Mount Completion

Source: https://single-spa.js.org/docs/api

Listen for the `single-spa:first-mount` event, which fires once after the very first single-spa application has been mounted. This event is suitable for logging the time it took before any applications became visible to the user.

```javascript
window.addEventListener("single-spa:first-mount", () => {
  console.log("single-spa just mounted the very first application");
});

```
Tokens:
Raw