Issues with Docker Setup for Angular Nx Micro Frontend Architecture

Frontend
1

I’m having problems containerizing my Angular micro frontend setup with Nx workspace. Been working on this for days but can’t get it running properly in Docker.

My Current Setup

  • Using Angular with Nx monorepo
  • Module Federation for micro frontend communication
  • One main shell app and multiple remote applications

What I’ve Attempted

First Try: Containerized just the shell application alone. The container starts fine but when I open the browser I get ERR_EMPTY_RESPONSE error.

Second Try: Used Docker Compose to spin up all remote applications first, then the shell. All containers start without errors but same browser issue persists.

Current Docker Configuration

Here’s my container setup for each application:

# Build stage
FROM node:16-alpine AS build

# Add build tools for native dependencies
RUN apk add python3 make g++

WORKDIR /workspace

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

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

# Copy application source
COPY . .

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

Docker Compose Setup

version: '3.8'
services:
  shell-app:
    build: .
    ports:
      - "4200:4200"
    depends_on:
      - mfe-one
      - mfe-two
      - mfe-three
    networks:
      - frontend-network

  mfe-one:
    build: .
    ports:
      - "4300:4300"
    networks:
      - frontend-network

  mfe-two:
    build: .
    ports:
      - "4400:4400"
    networks:
      - frontend-network

  mfe-three:
    build: .
    ports:
      - "4500:4500"
    networks:
      - frontend-network

networks:
  frontend-network:
    driver: bridge

Main Questions

  • Is this Docker setup appropriate for Angular micro frontends?
  • How do I make sure remote modules load correctly in containers?
  • Any specific considerations for Webpack 5 Module Federation in Docker?
2

Wait, you’re using the same Dockerfile for all services? That’s odd for micro frontends. How do you handle different nx apps in each container - which specific app gets built and served? Also, what’s your module federation setup like? Are the remote URLs pointing to docker service names or localhost?

3

That ERR_EMPTY_RESPONSE occurs because your Angular apps are binding to localhost within the containers, which restricts external access. You should change the binding to 0.0.0.0 instead. Update your Dockerfile CMD to [“npm”, “run”, “start”, “–”, “–host”, “0.0.0.0”] for each service. Additionally, building all apps in each container can be inefficient. Consider creating separate Dockerfiles for each micro frontend or employing multi-stage builds that only include the specific app. For Module Federation, ensure your Webpack configurations use container names as hostnames rather than localhost for defining remote entry points.

4

your Dockerfile’s got the build and run steps backwards. you’re running npm run build before copying the source code - that won’t work. also, check that your nx serve commands have the right host binding set up, not just in the docker cmd args.