Docker-compose, Nx, Angular error "localhost didn’t send any data."

Question

I am trying to run Angular app with Nx using docker compose.

docker-compose.yml :

services:
  client:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 4242:4200
    command: npm run start:client

Dockerfile :

FROM node:16-alpine3.12
WORKDIR /app
EXPOSE 4200
COPY package*.json .
RUN npm install
COPY . .
CMD npm start client --host 0.0.0.0

All is fine. Build compiled successfully. But when I open localhost:4242 I see the error:

This page isn’t working
localhost didn’t send any data.
ERR_EMPTY_RESPONSE

docker-compose logs didn't show any problem.

I tried change CMD in Dockerfile. Add/delete --host 0.0.0.0. But it doesn't change anything.

Also, I tried to add NestJS app in this nx workspace. For NestJS app this setting works without any problem.

Answer 1

try this

Dockerfile

FROM --platform=$BUILDPLATFORM node:17.0.1-bullseye-slim as builder

RUN mkdir /project
WORKDIR /project

RUN npm install -g @angular/cli

COPY package.json package-lock.json ./
RUN npm ci

COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

FROM builder as dev-envs

RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
COPY --from=gloursdocker/docker / /

CMD ["ng", "serve", "--host", "0.0.0.0"]

docker-compose.yaml

services:
  web:
    build:
      context: .
      target: builder
    ports:
      - 4200:4200
    volumes:
      - .:/project
      - /project/node_modules