One Spa Examples

Core team examples

Actively maintained

• React Microfrontends (check out root-config repo first)
• Polyglot Microfrontends (check out root-config repo first)
• Isomorphic Microfrontends shows server-side rendering (SSR) with one-spa and one-spa-layout.
• Vite one-spa application shows a one-spa application that uses Vite.

Older examples

• one-spa-portal-example is a great example of coexisting React microfrontends.
• simple-one-spa-webpack-example is a small, simple example that can be used as a webpack starter.

Community examples

• one-spa-login-example-with-npm-packages is a one-spa application example which imports registered applications from NPM packages and manages authentication features as login.
• demo-one-spa-with-spax is a tiny spax example with react-scripts and craco.
• one-spa-html with js example is an example repo of using one-spa-html that is enhanced with plain JavaScript.
• ember-micro-frontends is an all-Ember example repo that uses one-spa-ember applications into a containing Ember.js application at different routes.
• one-spa application with shared styled-components shows how to share styled-components, a library that is required to be a singleton instance.
• one-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 one-spa application.
• one-spa shared state utility using Rxjs shows how to use a utility module that shares application state across multiple one-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.
• ember and react: a multi-framework example where we combine Ember with React
• one-spa-apollo-cleint-auth-with-apollo-federation-backend is a one spa frontend example for hotel app with authentication, styled-components, apollo-client for graphql along with apollo federation microservice backend
• vite-ts-one-spa-root-config: Create a root config example of one-spa using vite and typescript.
• micro-spa-lite: Ultra‑lightweight micro‑frontend boilerplate (~50 LOC) with single‑spa, Module Federation & Chrome extension support

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