Live Reload in docker-compose project für Ionic app not working

I am trying to build an ionic project that uses node.js backend, each service packed into a container providing a microservice architecture.

For the node.js backend live reload is working, ionic serve on the other hand does not recognize changes in the code made locally that should be mounted into the container using a volume.

This is my docker-compose.yml:

services:
user-service:
build:
context: ./backend/user-service
dockerfile: Dockerfile
target: dev
volumes:
- /usr/src/app/node_modules
- ./backend/user-service:/usr/src/app
ports:
- "3000:3000"
environment:
DATABASE_HOST: postgres
DATABASE_PORT: 5432
DATABASE_USERNAME: admin
DATABASE_PASSWORD: admin-dev
DATABASE_NAME: user-db
depends_on:
- postgres

postgres:
image: postgres:latest
restart: always
environment:
POSTGRES_USER: admin
POSTGRES_PASSWORD: admin-dev
POSTGRES_DB: user-db
ports:
- "5432:5432" # standard port for PostgreSQL
volumes:
- postgres_data:/var/lib/postgresql/data # persistent saving of data for postgres

frontend:
build:
context: ./frontend
dockerfile: Dockerfile # Dockerfile in Frontend-Folder
volumes:
- /app/node_modules
- ./frontend:/app
ports:
- "8100:8100"
environment:
- CHOKIDAR_USEPOLLING=true
networks:
- app-network # shared network for all services
depends_on:
- user-service # Frontend starts after user-service


networks:
app-network:
driver: bridge # standard network mode (all services communicate here)

volumes:
postgres_data:


Here is my Dockerfile for the frontend service:

# Use an image with an up-to-date version of node
FROM node:18.20.0

# Install the ionic and angular CLI globally
RUN npm install -g @ionic/cli @angular/cli

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy all code into the working dir
COPY . /app

# Open standard port for Ionic
EXPOSE 8100

# Start the Ionic server and set host flag to open it externally
CMD ["ionic", "serve", "--host", "0.0.0.0", "--port", "8100", "--disableHostCheck", "--watch", "--poll"]


Starting the application works fine, as the frontend is built and I can access it via the browser on the defined port.

However, changes made in the home.html are not reflected in the container and the process does not compile and reload the page.

Running the front locally works fine and changes are immediately reloaded on browser refresh.

What do I need to change?

Continue reading...