mfe

Micro Frontends

Table of Contents

• Getting Started
• Directory Structure
• Application Testing
• Previewing Locally
• Application Containerization
• Production Ready

---

Getting Started

$ git clone https://github.com/Shyam-Chen/Micro-Fullstack
$ cd Micro-Fullstack

$ cd client
$ yarn install
$ yarn bootstrap

$ yarn serve

Visit http://localhost:8000.

app-shell is listening on port 8000.
mod-vue is listening on port 8001.
mod-react is listening on port 8002.
mod-angular is listening on port 8003.
mod-svelte is listening on port 8004.

Directory Structure

# core
app-shell

# shared
app-components

# modules
mod-vue
mod-react
mod-angular
mod-svelte

Application Testing

jest

$ yarn test

Previewing Locally

caddy

# /Micro-Fullstack/client
$ yarn build
$ caddy run

Visit https://localhost:8000.

Application Containerization

docker

TODO: Push images to Docker Hub

$ docker login

$ yarn build
$ docker-compose build
$ docker-compose push

Production Ready

knative

TODO: Pull images from Docker Hub

$ minikube start
$

Domain name

For example:

• example.com (app-shell, setDefaultMountApp('/app'))
  • example.com/app (mod-vue, App)
  • example.com/auth (mod-react, Auth)
  • example.com/account (mod-angular, Account)
  • example.com/product (mod-svelte, Product)
• app.example.com (mod-vue, App)
• auth.example.com (mod-react, Auth)
• account.example.com (mod-angular, Account)
• product.example.com (mod-svelte, Product)
• (app-components, Common)

TODO: Without setDefaultMountApp('/app'):

• example.com (app-shell, Render in Vue)
  • example.com/auth (mod-vue, Auth)
  • example.com/account (mod-react, Account)
  • example.com/product (mod-angular, Product)
  • example.com/payment (mod-svelte, Payment)
• auth.example.com (mod-vue, Auth)
• account.example.com (mod-react, Account)
• product.example.com (mod-angular, Product)
• payment.example.com (mod-svelte, Payment)
• (app-components, Common)