Установка зависимостей: npm run install-all
Запуск: npm start
Корневое приложение (root-config) запустится на localhost:9000.
Микрофронтенды запускаются на портах с 8500 по 8504.
Ссылки на них указываются в root-config/src/index.ejs.
Расположение на странице (с роутингом) указывается в root-config/src/microfrontend-layout.html
Корневое приложение, которое встраивает в себя все остальные фронтенды. Определяет высокоуровневую разметку страницы. Если есть разделяемые модули, которые должны загрузиться один раз, они должны загружаться в root-config.
Дефолтный роут общего приложения.
В нем демонстрируется возможность навигации в другой микрофронтенд средствами библиотеки single-spa, работа с utility-модулем, а также возможность встраивания другого микрофронтенда через Parcel (подробнее см. документацию по single-spa/parcel).
Модуль, аналогичный первому.
Этот модуль демонстрирует, что состояние utility-модуля разделяется со всей страницей и потенциально со всеми микрофронтендами. А состояние встраиваемого микрофронтенда - нет, поскольку он работает как обычный реакт-компонент с инкапсулированным состоянием.
Встраивемый микрофронтенд. Есть возможность передать пропс, который будет считан один раз при старте работы. Впоследствии обновленные значения пропса не будут попадать в компонент.
Пример того, что в документации single-spa называется utility-модулем. Как правило такие модули предоставляют набор графических компонентов либо решают общие задачи (т.н. cross-cutting concerns) - авторизация, логирование, отправка сообщений об ошибках а-ля sentry.io.
В нашем примере в нем хранится состояние самого обычного счетчика.
Задача навигации по сайту (и создание отдельного меню) была вынесена в отдельный модуль. Доступность этого модуля на всех страницах сайта обеспечивается через layout в нашем root-config (см. root-config/src/microfrontend-layout.html).