I have 2 docker containers running, one for an API and one for the front-end (build with React) of the application. I would like the front-end container to be updated whenever I make a change. The API container does not have to be updated on change.
doker-compose.yml:
services:
api:
build:
context: .
dockerfile: Dockerfile.api
image: controle-app-api
client:
build:
context: .
dockerfile: Dockerfile.client
image: controle-app-client
volumes:
- ./:/app
ports:
- "3000:3000"
environment:
CHOKIDAR_USEPOLLING: "true"
Dockerfile.client:
# Build step #1: build the React front end
FROM node:16-alpine as build-step
# Specify where our app will live in the container
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# Copy the React App to the container
COPY package.json package-lock.json ./
COPY ./src ./src
COPY ./public ./public
# Prepare the container for building React
RUN npm install
RUN npm install react-scripts@3.0.1 -g
# We want the production version
RUN npm run build
# Prepare nginx
FROM nginx:stable-alpine
COPY --from=build-step /app/build /usr/share/nginx/html
COPY deployment/nginx.default.conf /etc/nginx/conf.d/default.conf
I tried applying the answer given at How to Hot-Reload in ReactJS Docker, but this did not help. Whenever I edit something in a .JS file, it is not updated on reload of the application.