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-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.

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