When I was trying to containerize a recent project with docker-compose, I was running into a situation where my React app was behaving differently in the container. I needed to debug it, but I could not get it to hot reload any changes I made.

services:
  app:
    container_name: backend
    build: ./backend
    ports:
      - "30001:3000"
    ...
  ui:
    container_name: ui
    build: ./ui/react
    ports:
      - "30000:3000"
    command: npm start

My Docker image for the UI was using node:18.11.0-alpine:

FROM node:18.11.0-alpine

WORKDIR /usr/src/app

# package.json and package-lock.json
COPY app/package*.json ./

# Install react
RUN npm install --silent

# Install bash
RUN apk update && apk add bash

# Copy the app
COPY app ./

CMD ["npm", "start"]

After some research, I found a similar issue on GitHub. The solution was so set the following environment variable on the React container:WDS_SOCKET_PORT=30000

  ui:
    container_name: ui
    build: ./ui/react
    ports:
      - "30000:3000"
    environment:
      - WDS_SOCKET_PORT=30000
    command: npm start

Since I was mapping my Docker container’s port 3000 to 30000 on the host, React was attempting to hot reload and live refresh using the container port of 3000. You need to force it to use the port on the host machine, where the app is being viewed from your browser. Otherwise, the browser cannot establish the websocket connection to provide live changes.