Right way to configure docker-compose for Angular apps

Issue

I am trying to configure Docker to develop Angular apps locally, and as I have a database and a Node.js app, I am configuring it with docker compose. I am looking for a configuration where I can make changes locally using my editor, and Angular should detect the changes automatically reload from within Docker (like how it would have happened without Docker).

I am relatively new to Docker, so my understanding is that using the COPY statement inside Dockerfile means that a copy of my local files are made into the image, and therefore local changes don't trigger a recompile. My understanding is that I need to mount the local application as a volume and make it available inside at, say /app and then things should work. However, I am using a Mac, and the base image is Linux based (I am using FROM node:12-slim), so the npm packages have to be fetched and built inside the image. I removed node_modules from my local folder structure.

To meet these goals, this is how I configured the Angular Dockerfile

FROM node:12-slim

COPY package.json /app/package.json

WORKDIR /app
RUN npm install
RUN npm install -g @angular/cli@8.1.2

ENV PATH /app/node_modules/.bin:$PATH

RUN apt-get update
RUN apt-get install -y vim
RUN apt-get install -y curl

and this is how I configured the docker-compose.yml file

version: '3'

services:
  
  ... other services ...

  blackmirrorhq:
    image: <angular app image>
    expose:
      - 4200
    ports:
      - 4200:4200
    restart: on-failure
    volumes:
      - <path to angular app>:/app
    working_dir: /app
    command: "npm install && npm install -g @angular/cli@8.1.2 && ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check"
    # command: "ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check"

volumes:
  postgres-volume:

I think the node_modules folder gets overwritten when the docker compose starts because of the volume binding. The server fails citing missing packages. So, I am using the docker-compose file and using the command as:

npm install && npm install -g @angular/cli@8.1.2 && ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check

However, while this is fetching all the packages, it is not starting the server. The node_modules folder gets created though.

After this, I comment out the line and uncomment out the next line that simply starts the server:

ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check

With this, I am able to get it to work. However, I don't think this is the right way to approach it and wanted to understand what changes I need to make to configure it correctly.

Solution

just to rest your mind at ease, the method you used at last is the correct one. If you want to learn why read below:

There are some IDE-centric implementations that make the whole process a bit clueless and simpler but since we're not IDE specific I'll use the general idea.

the most popular approach is to completely develop on the docker container meaning you don't have (or at least don't use) any local environment.

the basic gist of it (as you pointed out) is making a base container with our dependencies and CLI installed (in this case angular CLI) then run this image and while the container is up and running make changes and letting angular automatically recompile as we develop. Now the way we connect our code to the container is using bind mounts which allow us to see the same files from our local machine editor and the container running it.

here's a simple docker-compose and basic container Dockerfile for this use case:

Dockerfile

FROM node:lts
RUN mkdir /home/node/app && chown node:node /home/node/app
RUN mkdir /home/node/app/node_modules && chown node:node /home/node/app/node_modules
WORKDIR  /home/node/app
USER node
COPY --chown=node:node package.json package-lock.json ./
RUN npm ci --quiet
COPY --chown=node:node . .

Since we don't care about the node_modules we can keep them as a docker volume in the container

docker-compose.yml

version: '3.7'
services:
  app:
    build: .
    command: sh -c "npm start"
    ports:
      - 4200:4200
    working_dir: /home/node/app
    volumes:
      - ./:/home/node/app
      - node_modules:/home/node/app/node_modules
volumes:
  node_modules:

credits to markfknight.dev for the working example

if you want to see a working example this might help you grasp the concept

Answered By - Noam Yizraeli