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.
Have your own example or starter repo? Submit a PR to add yours to this list.