Get hot reload working with Angular/React in Docker

(Please note - I updated this Dockerfile on June 18, 2024 based upon some testing. See this article on my testing process for more details.)

[few posts ago]

There are a lot of great reasons to use Docker for front end development and a number of tutorials have emerged to help developers get there. Many of these tutorials work great, except that hot reload doesn’t work in those containers so productivity gains are quickly lost.

In my testing, I have always needed both a Dockerfile and docker-compose to containerize React applications. The Dockerfile is very simple, but the docker-compose file has two environmental variables that I wasn’t familiar with. They are:

- CHOKIDAR_USEPOLLING=true
- WATCHPACK_POLLING=true

          

The rest of the files are quite self explanatory but as always, contact me if you have any questions.

You can serve either React or Angular files with the same Dockerfile with one difference in the docker-compose file - I used create-react-app to create the sample application so my React application starts with ’npm start’ whereas my Angular application starts with ’ng start

A Dockerfile for React or Angular

# syntax=docker/dockerfile:1.4

FROM node:lts-slim AS development
WORKDIR /code

# Expose the application port
EXPOSE 3000

COPY package.json package-lock.json ./

# Install dependencies
RUN npm ci

# Copy the rest of the application code
COPY . .

          

docker-compose.yaml for React apps

version: '3.8'

services:
react-app:
    build:
    context: .
    dockerfile: Dockerfile
    ports:
    - "3000:3000"
    environment:
    - CI=true
    - PORT=3000
    - CHOKIDAR_USEPOLLING=true
    - WATCHPACK_POLLING=true
    volumes:
    - .:/code:consistent
    - react-app-node-modules:/code/node_modules
    command: npm start

volumes:
react-app-node-modules:

          

docker-compose.yaml for Angular apps

version: '3.8'

services:
angular-app:
build:
context: .
dockerfile: Dockerfile
ports: - "4200:4200"
environment: - CI=true - PORT=4200 - CHOKIDAR_USEPOLLING=true - WATCHPACK_POLLING=true
volumes: - .:/code:consistent - angular-app-node-modules:/code/node_modules
command: ng serve --host 0.0.0.0
volumes:
angular-app-node-modules:

          

Return to top.