skip to Main Content

I dockerized my react app using these commands:

docker build -t image-name .

docker run -e CHOKIDAR_USEPOLLING=true -v %cd%src:/app/src -p 3000:3000 --name container-name image-name

The problem is that when I save any updates in my components, they do not show up in the browser, although they have been updated in /app/src.

I thought that -e CHOKIDAR_USEPOLLING=true would fix it, but it didn’t.

When I go to: docker exec -it container-name bash. I can see that everything saves correctly, but the changes don’t show up in the browser after ctrl + s.

When I open localhost:3000, there is a popup Compiled with problems beacause I have some typescript warnings, but when I close it the website works great, but without updates.

My Dockerfile:

FROM node
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

.dockerignore:

node_modules
Dockerfile
.git
.gitignore
.dockerignore
.env

Docker logs:

(node:26) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:26) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

NODE_VERSION
19.0.1

2

Answers


  1. Chosen as BEST ANSWER

    I fixed it. You need to update this line in package.json in scripts/start:

    "scripts": {
        "start": "WATCHPACK_POLLING=true react-scripts start",
      },
    

    but if You have a big frontend the updating delay will be terrible (like few seconds for every save and update)


  2. I think your build is still old one.
    You need to maybe delete in Docker UI old build and run new build and then run that docker image.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search