- Deploy modules independently
- Lazy loading/activation of components
Inspired by single-spa module.
There are 5 microfrontends served separately here:
landing (react): Landing pagebrowse (react): Browse products pagenavbar (vue): Global header for all appproduct (vue): Single product page (also loads nestedbrowsepage)basket (svelte): Basket page (also loads nestedbrowsepage)footer (svelte): Global footer for all app
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:
commons/module-loadercommons/module-loader-reactcommons/module-loader-sveltecommons/module-loader-vue
npm install
npm run build
npm run serve:front
Then, on another terminal run:
npm run serve:back
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