Yet another Microfrontend PoC

Goals

  • Deploy modules independently
  • Lazy loading/activation of components

Inspired by single-spa module.

About the example

There are 5 microfrontends served separately here:

These microfrontends are loaded on demand by the parent orchestrator application.

A common library for loading microfrontend was extracted and created bindings for react, svelte and vue:

Building

npm install
npm run build

Serve

Shipped caddy

npm run serve:front

Then, on another terminal run:

npm run serve:back

Own Caddy binary

Requires caddy v2 (check https://github.com/caddyserver/caddy/releases)

wget -O caddy2 https://github.com/caddyserver/caddy/releases/download/v2.0.0-beta.13/caddy2_beta_13_<your-distribution>
chdmod +x ./caddy2

Then run

./caddy2 run

Then, on another terminal run:

npm run serve:back

Top categories

Loading Svelte Themes