conscious-sapphire•2y ago

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•2y 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?

frail-apricot•2y 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.

conscious-sapphire•2y 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

frail-apricot•2y ago

yes. currently CLI has this features https://refine.dev/docs/packages/documentation/cli/#commands

conscious-sapphire•2y 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