Single-spa Examples

Core team examples

Actively maintained

• React Microfrontends (check out root-config repo first)
• Vue Microfrontends (check out root-config repo first)
• Angular Microfrontends (check out root-config repo first)
• Polyglot Microfrontends (check out root-config repo first)
• single-spa-es5-angularjs is a very tiny es5 example with angularjs.
• Isomorphic Microfrontends shows server-side rendering (SSR) with single-spa and single-spa-layout.
• Vite single-spa application shows a single-spa application that uses Vite.
• Snowpack single-spa application shows a single-spa application that uses Snowpack.

Older examples

• coexisting-angular-microfrontends is a full blown Angular 9 microfrontends repo that combines three separate Angular CLI projects into one page.
• coexisting-vue-microfrontends shows three separate Vue CLI projects existing within one page.
• single-spa-portal-example is a great example of coexisting React microfrontends.
• simple-single-spa-webpack-example is a small, simple example that can be used as a webpack starter.

Community examples

• single-spa-angular-esm is an example Nx monorepo, demonstrating how single-spa can be used for microfrontends with the new Angular builder based on Vite/esbuild.
• single-spa-parcel-example is an example of one Vue and one React microfrontend, containing a React and a Vue parcel respectively and two Node.js microservices running in 6 different Docker VMs seamlessly working together in a single web app located in a 7th VM.
• single-spa-login-example-with-npm-packages is a single-spa application example which imports registered applications from NPM packages and manages authentication features as login.
• demo-single-spa-with-spax is a tiny spax example with react-scripts and craco.
• single-spa-html with js example is an example repo of using single-spa-html that is enhanced with plain JavaScript.
• coexisting-angular-microfrontends/login is a branch that implements a login functionality between Angular apps. It uses localStorage as shared memory space to store and retrieve a token.
• single-spa-angular-cli is an all-Angular example repo that uses SystemJS to load single-spa-angular applications into a containing Angular CLI application at different routes.
• ember-micro-frontends is an all-Ember example repo that uses single-spa-ember applications into a containing Ember.js application at different routes.
• single-spa application with shared styled-components shows how to share styled-components, a library that is required to be a singleton instance.
• single-spa application with Webpack lazyStyleTag is a simple example that leverages Webpack style-loader's lazyStyleTag functionality to dynamically add and remove the CSS associated with a single-spa application.
• single-spa shared state utility using Rxjs shows how to use a utility module that shares application state across multiple single-spa applications and frameworks.
• svelte-micro-frontends is an all-Svelte example of a Restaurant booking app based on the popular Micro frontends article by Cam Jackson.
• single-spa-examples contains Angular examples with step-by-step commits on how they were built. Some of the examples are:
  • root and basic: root-config with Angular's Zone.js and prepared for reflect-metadata and Angular 11 application with lazy loaded routing and assets examples.
  • scoped sharing: Import map sharing of coexisting Angular 10 and 11 using scopes. This uses View Engine.
  • Ivy sharing: Dependency sharing using Ivy.
  • ember and react: a multi-framework example where we combine Ember with React
  • Svelte-React-Vue-Angular-single-spa a multi-framework example with Svelte, React, Angular and Vue. This single spa uses single-spa-router.
  • single-spa-apollo-cleint-auth-with-apollo-federation-backend is a single spa frontend example for hotel app with authentication, styled-components, apollo-client for graphql along with apollo federation microservice backend
• single-spa-react-angular a multi-framework example with React and Angular. This app uses routes to render the React and Angular apps.
• vite-ts-single-spa-root-config: Create a root config example of single-spa using vite and typescript.
• single-spa-angularjs-starter: A simple starter for AngularJS with Webpack, rendering a parcel of Angular 15 with standalone components.
• micro-spa-lite: Ultra‑lightweight micro‑frontend boilerplate (~50 LOC) with single‑spa, Module Federation & Chrome extension support
• single-spa-react-and-vue: single-spa microfrontends implementation (Root config, React and Vue).
• demo-microfrontends-with-single-spa: Comprehensive 12-framework microfrontend architecture with Angular, React, Vue, Svelte, TypeScript, jQuery, Web Components, and more. Features multiple deployment modes (local, NPM, GitHub Pages, AWS S3), RxJS state management, authentication, and live demo at http://single-spa-demo-774145483743.s3-website.eu-central-1.amazonaws.com/

Have your own example or starter repo? Submit a PR to add yours to this list.