https://github.com/recuencojones/yamfe
Yet another Microfrontend PoC
https://github.com/recuencojones/yamfe
caddyserver kubernetes kubesail microfrontends react svelte terraform terraform-kubernetes vue
Last synced: over 1 year ago
JSON representation
Yet another Microfrontend PoC
- Host: GitHub
- URL: https://github.com/recuencojones/yamfe
- Owner: RecuencoJones
- Created: 2020-02-06T08:15:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-26T14:49:45.000Z (over 2 years ago)
- Last Synced: 2025-03-26T03:51:16.196Z (over 1 year ago)
- Topics: caddyserver, kubernetes, kubesail, microfrontends, react, svelte, terraform, terraform-kubernetes, vue
- Language: JavaScript
- Homepage: https://yamfe.recuencojones.usw1.kubesail.io
- Size: 1.08 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Yet another Microfrontend PoC
## Goals
- Deploy modules independently
- Lazy loading/activation of components
Inspired by [`single-spa`](https://single-spa.js.org/) module.
## About the example
There are 5 microfrontends served separately here:
- [`landing (react)`](./apps/landing): Landing page
- [`browse (react)`](./apps/browse): Browse products page
- [`navbar (vue)`](./apps/navbar): Global header for all app
- [`product (vue)`](./apps/product): Single product page (also loads nested `browse` page)
- [`basket (svelte)`](./apps/basket): Basket page (also loads nested `browse` page)
- [`footer (svelte)`](./apps/footer): Global footer for all app
These microfrontends are loaded on demand by the parent [`orchestrator`](./orchestrator) application.
A common library for loading microfrontend was extracted and created bindings for `react`, `svelte` and `vue`:
- [`commons/module-loader`](./commons/module-loader)
- [`commons/module-loader-react`](./commons/module-loader-react)
- [`commons/module-loader-svelte`](./commons/module-loader-svelte)
- [`commons/module-loader-vue`](./commons/module-loader-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_
chdmod +x ./caddy2
```
Then run
```
./caddy2 run
```
Then, on another terminal run:
```
npm run serve:back
```