How to hot-reload within a docker compose project?

I've started with refine couple days ago, and it is doing nice. I've since developed the major parts of the frontend straight out from my machine environment (as in, no docker or virtualization at all) while having the backend running on a docker container. I've tryied to setup refine inside a docker container aswell, binding my code into a volume but I'm not able to enable hot-reload funcitonality inside it. I've done this before with CRA, where I needed just to add env vars for
CHOKIDAR_USEPOLLING=true
CHOKIDAR_USEPOLLING=true
, but for refine this doesnt work. For refine I've managed to add some kind of hot-reloading using nodemon, but restarting the dev server everychange makes the develop-test-adjust cycle longer and longer. Developing from the host itself looked way more straight foward but having multiple environments makes things harder aswell. Anyone know how to enable or tweak the hot reloading stuff from refine? Here is the whoami from host:
## System:
- OS: Windows 10 10.0.19045
- CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
## Binaries:
- Node: 19.8.1 - C:\Program Files\nodejs\node.EXE
- Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
- npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
## Browsers:
- Chrome: 111.0.5563.111

## Refine Packages:
- @refinedev/antd: 5.3.10
- @refinedev/cli: 2.1.2
- @refinedev/core: 4.5.6
- @refinedev/inferencer: 3.1.2
- @refinedev/kbar: 1.1.0
- @refinedev/react-router-v6: 4.1.0
- @refinedev/simple-rest: 4.1.0`
## System:
- OS: Windows 10 10.0.19045
- CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
## Binaries:
- Node: 19.8.1 - C:\Program Files\nodejs\node.EXE
- Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
- npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
## Browsers:
- Chrome: 111.0.5563.111

## Refine Packages:
- @refinedev/antd: 5.3.10
- @refinedev/cli: 2.1.2
- @refinedev/core: 4.5.6
- @refinedev/inferencer: 3.1.2
- @refinedev/kbar: 1.1.0
- @refinedev/react-router-v6: 4.1.0
- @refinedev/simple-rest: 4.1.0`
Here is the whoami inside the container
## System:
- OS: Linux 5.15 Debian GNU/Linux 10 (buster) 10 (buster)
- CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
## Binaries:
- Node: 19.8.1 - /usr/local/bin/node
- Yarn: 1.22.19 - /usr/local/bin/yarn
- npm: 9.5.1 - /usr/local/bin/npm
## Browsers:
- Chrome: Not Found
- Firefox: Not Found

## Refine Packages:
- @refinedev/antd: 5.3.10
- @refinedev/cli: 2.1.2
- @refinedev/core: 4.5.6
- @refinedev/inferencer: 3.1.2
- @refinedev/kbar: 1.1.0
- @refinedev/react-router-v6: 4.1.0
- @refinedev/simple-rest: 4.1.0
## System:
- OS: Linux 5.15 Debian GNU/Linux 10 (buster) 10 (buster)
- CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
## Binaries:
- Node: 19.8.1 - /usr/local/bin/node
- Yarn: 1.22.19 - /usr/local/bin/yarn
- npm: 9.5.1 - /usr/local/bin/npm
## Browsers:
- Chrome: Not Found
- Firefox: Not Found

## Refine Packages:
- @refinedev/antd: 5.3.10
- @refinedev/cli: 2.1.2
- @refinedev/core: 4.5.6
- @refinedev/inferencer: 3.1.2
- @refinedev/kbar: 1.1.0
- @refinedev/react-router-v6: 4.1.0
- @refinedev/simple-rest: 4.1.0
Here is my dev dockerfile:
FROM node:19-buster-slim as base
RUN npm install -g nodemon --save-dev
WORKDIR /src/
CMD ["npm", "run", "dev"]

FROM base as nodemon
CMD ["nodemon", "-e", "js,mjs,json,tsx", "--exec", "npm", "run", "dev"]
FROM node:19-buster-slim as base
RUN npm install -g nodemon --save-dev
WORKDIR /src/
CMD ["npm", "run", "dev"]

FROM base as nodemon
CMD ["nodemon", "-e", "js,mjs,json,tsx", "--exec", "npm", "run", "dev"]
Here is the service for the frontend
frontend:
hostname: frontend
build:
context: ./frontend/
dockerfile: Dockerfile.dev
target: base
environment:
CHOKIDAR_USEPOLLING: true
volumes:
- source: ./frontend/
target: /src
type: bind
- source: vol-nodemodules
target: /src/node_modules
type: volume
ports:
- "3000:3000"
frontend:
hostname: frontend
build:
context: ./frontend/
dockerfile: Dockerfile.dev
target: base
environment:
CHOKIDAR_USEPOLLING: true
volumes:
- source: ./frontend/
target: /src
type: bind
- source: vol-nodemodules
target: /src/node_modules
type: volume
ports:
- "3000:3000"
I've setup the project several times using the wizard, tested with or without examples, with antd or headless, but without any sucess. Anyone by chance have experienced this and might give me a light? Thanks**
5 Replies
kapa.ai
kapa.ai15mo ago
Hi @dudztroyer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: Sorry @dudztroyer, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?
stormy-gold
stormy-gold15mo ago
when you change "dev": "refine start" to "dev": "react-scripts start" is it work ? because without CLI, it's shouldn't be any different from typical react application.
metropolitan-bronze
metropolitan-bronze15mo ago
I'll try it out. Thanks for the quick response. In the mean time, is calling "react-scripts start" all what "refine start" do? Didn't work though
stormy-gold
stormy-gold15mo ago
metropolitan-bronze
metropolitan-bronze15mo ago
Fixed it somehow. React v5 doesn't use CHOKIDAR_USEPOLLING, now it used WATCHPACK, so turning on WATCHPACK_POLLING on env fixed it. There is some delay on it though. Thanks