Hackforge Academy

Explanation

Docker allows each Micro Frontend application to be packaged and run independently in its own container. This provides consistent environments for development, testing, and deployment.

Code:

Micro Frontend System
├── Host App      → Docker Container
├── Product App   → Docker Container
├── Cart App      → Docker Container
└── Payment App   → Docker Container

Explanation

A React Micro Frontend can be built into static production files and served from a lightweight web server such as Nginx inside a Docker container.

Code:

FROM nginx:alpine

COPY dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Explanation

The Docker image can be built from the Dockerfile and then started as a container. Each Micro Frontend can use its own image and container.

Code:

docker build -t product-app .
docker run -d -p 5001:80 product-app

Explanation

The Host and Remote applications can run in separate containers and communicate through their exposed URLs or a reverse proxy.

Code:

Docker
│
├── Host App      → :5000
├── Product App   → :5001
├── Cart App      → :5002
└── Payment App   → :5003

Explanation

Docker Compose can be used to start multiple Micro Frontend containers together, making local development and testing easier.

Code:

services:
  host:
    build: ./host-app
    ports:
      - "5000:80"

  product:
    build: ./product-app
    ports:
      - "5001:80"

  cart:
    build: ./cart-app
    ports:
      - "5002:80"