Version: 5.x

Примеры использования single-spa

Примеры от ядра команды

Активно поддерживаемые

  • React Microfrontends (сперва проверьте репозиторий корневой конфигурации)
  • Vue Microfrontends (сперва проверьте репозиторий корневой конфигурации)
  • Polyglot Microfrontends (сперва проверьте репозиторий корневой конфигурации)
  • single-spa-es5-angularjs это очень небольшой пример на es5 с angularjs.
  • Isomorphic Microfrontends пример рендеринга на стороне сервера (SSR) с single-spa и single-spa-layout.

Старые примеры

  • coexisting-angular-microfrontends это полноценный репозиторий микрофронтенда с Angular 9 который совмещает три различных Angular CLI проекта на одной странице.
  • coexisting-vue-microfrontends Показывает три различных Vue CLI проекта существующих на одной странице.
  • single-spa-portal-example это отличный пример сосуществования трех React микрофронтендов.
  • simple-single-spa-webpack-example это маленький, простой пример, который может быть использован как стартер вебпака.

Примеры от сообщества

  • single-spa-parcel-example является примером микрофронтендов на Vue и React, содержащие Vue и React участки соответственно и два Node.js микросервиса, запущенных на 6 разных Docker виртуальных машинах и легко работающих вместе в одном веб-приложении, размещенном на 7-ой виртуальной машине.
  • single-spa-login-example-with-npm-packages это пример single-spa приложения, которое импортирует указанные приложения из пакетов NPM и управляет функциями аутентификации в качестве входа в систему.
  • demo-single-spa-with-spax это маленький spax пример с react-scripts и craco.
  • single-spa-html with js example это пример репозитория использует single-spa-html, который дополнен чистым JavaScript.
  • coexisting-angular-microfrontends/login эта ветка реализует функционал аутентификации между приложениями на Angular. LocalStorage API используется как общее пространство памяти для получения и сохранения токена.
  • single-spa-angular-cli это пример полностью Angular репозитория, который использует SystemJs, чтобы загрузить single-spa-angular приложения в содержащее Angular CLI приложение по различным роутам.
  • ember-micro-frontends это пример полностью Ember репозитория, который использует single-spa-ember приложения в содержащее Ember.js приложение по различным роутам.
  • single-spa application with shared styled-components показывает как совместно использовать styled-components, библиотека, которая обязательно должна быть синглтоном.
  • single-spa application with Webpack lazyStyleTag это простой пример, который использует функциональность загрузчика стилей вебпака lazyStyleTag для динамического добавления и удаления CSS, связанного с одним single-spa приложением.
  • single-spa shared state utility using Rxjs показывает, как использовать служебный модуль, который разделяет состояние приложения в нескольких однокомпонентных приложениях и фреймворках.

У вас есть свой пример или репозитория для старта? Отправить PR, чтобы добавить ваш пример в данный список.

Edit this page