CODEWITHSUNDEEP
reactjstypescriptdockervisual-studio-codevscode-devcontainer
cwallenwein
cwallenwein

Reputation: 698

How to setup hot-reload in react.js using VS Code devcontainers

I'm starting to learn react. My usual setup is VS Code with Docker-based devcontainers. I used create-react-app to create a really simple app I can play around with. But somehow hot reload doesn't work. Any ideas what the problem could be?

For now, I use a really basic Dockerfile

FROM node:14.17.0

My .devcontainer is also really simple

{
"name": "Try React",
"dockerFile": "Dockerfile",
"runArgs": ["-u", "node"],
}

The console of my browser displays

[HMR] Waiting for update signal from WDS..

as expected. But when I save files nothing happens.

Upvotes: 2

Views: 2990

Answers (1)

Angus Palmer
Angus Palmer

Reputation: 21

Add the flag CHOKIDAR_USEPOLLING=true so file changes are detected inside the container.

You can either;

  • CHOKIDAR_USEPOLLING=true npm run start from the command line
  • add CHOKIDAR_USEPOLLING=true to a .env file in your project root folder
  • export CHOKIDAR_USEPOLLING=true as an environment variable
  • "start": "CHOKIDAR_USEPOLLING=true react-scripts start" to your package.json

This worked for me in a vscode devcontainer using bullseye and React 17

Upvotes: 2

Related Questions