(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: