Single Spa Demo Root Config

This is the single-spa root-config app. This repo is used in conjunction with four other repos(angular, react, vue, and svelte) to build an app.

#microfrontend #single-spa

Demo Download

Single-spa Demo - Root Config

Overview

This repo is used in conjunction with nine other repos listed below. Together they make up an application composed of microfrontends. Each app can be updated and deployed independently from the others.

Demo

You can find the demo here: Single-Spa-Demo App

How to run this repo locally

yarn start:dev

How to build for production

yarn build:webpack

How to trigger express server

yarn start

How to create single-spa frontend app

npx create-single-spa

How to serve raw github content as CDN

https://cdn.jsdelivr.net/gh/<github-username>/<github-repo-name@branch-name>/<filename>

How to build prod build for heroku

$ npx heroku login -i 
$ npx heroku create ar-single-spa-demo
$ git push heroku main

heroku login -i is to login with password.
After creating heroku repo, you can use git push heroku main to push the new changes to heroku.

How It Works

This project uses single-spa to architect an app composed of micro-frontends. In the root config, the eight other microfrontend apps (such as angular, react, vue, and svelte) are registered with singe-spa. The main index.ejs file contains an import map, which references where to find the compiled JavaScript bundle for each microfrontend. SystemJS is the module loader which then loads the bundles when needed. Utility app serves shared data between other apps.

NB

Each repo can be set up with Travis CI for running jobs as part of a continuous integration pipeline. When new code is pushed to the master branch for any of the repos, the new code is compiled and then uploaded to AWS S3, which serves as a CDN. The CI job also updates the import map file to reference the new bundle for the updated project.

Sources

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing