Single Spa Vanilla Js

actionanand

This is the single-spa application/parcel app using vanilla Js. This repo is used in conjunction with eight other repos(such as single-spa root config, react, angular, and svelte) to build an app.

#microfrontend #single-spa #vanilla-js #single-spa-html

Demo Download

single-spa vanilla JS

This is an example application that uses single-spa-html that is enhanced with plain JavaScript.

This example is modeled after a simple usecase: obtaining cookie consent from your users. The markup is relatively simple, the interactions don't do much, but some JavaScript is required to get it to work. This example highlights the following features:

using single-spa-html along with plain JavaScript
html template is extracted out of the js file
styles are included
transitions in and out

index.js is commented to show how and why the code is written the way it is. To reset the UI after having "accepted", delete the cookie-consent localStorage value using your browser's devtools.

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

Running locally

yarn start

navigate to http://localhost:20228/

standalone-single-spa-webpack-plugin enables local development using a locally served web page.

How to build for production

yarn build

How to serve raw github content as CDN

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

Running in an existing root-config

yarn start

Include this module's entry in your import map

{
  imports: {
    ... // other imports
    "@actionanand/single-spa-vanilla-js": "http://localhost:20228/index.js"
  }
}

the webpack config outputs the app entry url for a better DX

registerApplication({
  name: "@actionanand/single-spa-vanilla-js",
  app: () => System.import("@actionanand/single-spa-vanilla-js"),
  activeWhen: ["/"],
});

Cloning Guide

clone only the remote primary HEAD (default: origin/master)

git clone <url> --single-branch

Only specific branch

git clone <url> --branch <branch> --single-branch [<folder>]

git clone <url> --branch <branch>

Cloning repositories using degit

npx degit github:user/repo#branch-name <folder-name>

master branch is default.

npx degit github:actionanand/single-spa-vanilla-js#2-skeleton single-spa-vanilla-js

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