Search code examples
reactjstypescriptdockerreact-hot-loader

how to force react to rebuild and start inside docker?

I have read several answers to similar questions, but no one really answered my question. My question probably does not make sense; I am not an expert on Docker, so that is a possibility, but I'll try to explain as well as I can, and maybe someone could point me in the right direction.

I have a React application with typescript. I create a Docker image so, in case someone needs to collaborate, we can be sure we are using the same libraries and so on (I suppose that is one of the advantages of Docker)

When I start the application directly (not using Docker) with npm start, I can modify the source code, and the changes are reflected immediately (I don't even need to refresh the page on the browser). However, when I start the application on Docker with docker compose up, it doesn't matter what I do; the application is just an image of its first state. Any changes to the source code are not reflected at all.

I have tried several things:

  • I created a task on vscode tasks.json running the command docker compose restart app. It didn't work.
  • I added a script to scripts in package.json "watch": "watchy --no-init-spawn --debounce 1 -w src -- docker-compose restart frontend". I didn't work.
  • I modify the start script so it builds AND start the application. "start": "react-scripts build && react-scripts start". It didn't work.
  • I tried the CHOKIDAR_USEPOLLING=true. I didn't work.

Most answers focus on how to make Docker to rebuild the images, but I think that is not what I'm looking for. I just need to know how, inside the Docker image, tell the system to rebuild and restart the application after a source file change.

Any react developer that can show me how they solve this issue on your day to day workflow?

Solution

  • Here's how I would go about debugging this:

    1. Have you mounted the volume with the source code? I assume you have, but just in case someone else runs into this. You need to make sure the volume with the source code is being mounted.

    2. Have you mounted the node_modules as a volume to ensure it's not being overwritten?

    3. I would leave CHOKIDAR_USEPOLLING=true in the environment variables.

    4. If the behavior is different locally, I would check to see what the difference between your local and docker environment are ie node version, etc.

    If these don't solve it, it might be helpful to know more about the Dockerfile and docker-compose.yml.