Trouble Dockerizing an Angular-Based Micro Frontend (MFE) Application

I am trying to create a Docker image for my Angular-based Micro Frontend (MFE) application, but I am facing several challenges. I've searched extensively, but I can't seem to get it working as expected.

My Setup:

• Frontend Framework: Angular
• Micro Frontend Architecture: Module Federation (Webpack 5)

Current Approach:

1. 
   Created a Dockerfile for each file and run each container separately
   
   
2. 
   Installed dependencies inside the container
   

What I Tried:

1. 
   First attempt: I tried running only the host app separately.
   
   The app starts but throws ERR_EMPTY_RESPONSE in the browser.
   

• Second attempt: I moved to Docker Compose to run all three remote apps before starting the host app.

Everything starts correctly, but I still get the same error.


My Dockerfile for Each App: All host and three remote apps have a similar structure.


# Step 1: Build image
FROM node:16-alpine AS builder

# Install Python 3 and necessary build dependencies for node-gyp
RUN apk add python3 make g++

WORKDIR /app

# Copy package files
COPY package*.json ./
COPY nx.json ./
COPY tsconfig*.json ./
COPY decorate-angular-cli.js ./

# Install dependencies
RUN npm install --force && npm run build

# Copy source code from local to container
COPY . .

CMD ["npm", "run", "start"]



Docker Compose Configuration: I ensured all containers are inside the same network using the following:

version: '3.8'
services:
host-app:
build: .
ports:
- "4200:4200"
depends_on:
- remote-app1
- remote-app2
- remote-app3
networks:
- mfe-network

remote-app1:
build: .
ports:
- "4300:4300"
networks:
- mfe-network

remote-app2:
build: .
ports:
- "4400:4400"
networks:
- mfe-network

remote-app3:
build: .
ports:
- "4500:4500"
networks:
- mfe-network

networks:
mfe-network:
driver: bridge


Questions:

• 
  Is my Dockerfile setup correct for an Angular-based Micro Frontend (MFE)?
  
  
• 
  How can I ensure the remote modules are correctly loaded inside Docker?
  
  
• 
  Are there best practices for Dockerizing Webpack 5 Module Federation-based Angular apps?
  

Continue reading...