Razzle: Getting razzle to run in Docker dev container

Created on 1 Dec 2017 · 3Comments · Source: jaredpalmer/razzle

From searching through the issues in this repo, it seems that some of the contributors are familiar with using docker, so maybe someone could give me a little help. I am trying to get a development workflow set up with docker and be able to have hmr with react inside a docker container. The goal is to get a working solution without to much hacking of the base razzle-create-app project. I have created my dockerfile as the following:

FROM node:6

WORKDIR /home/node/app

EXPOSE 3000
EXPOSE 3001

CMD ["npm", "start"]

then i am starting the container with the dev directory mounted as a volume with
docker run --name hmr-test -d -p 8080:3000 -p 3001:3001 -v C:\Users\charles\Desktop\docker-hmr-test\ui-service:/home/node/app docker-hmr

The app runs and displays correctly, but razzle doesn't pick up any changes that are made on the local file system. If I run bash in the container and cat the files, I can see that they are updating correctly and razzle is starting from the correct directory in the container, so why doesn't razzle recognize the files and rebuild?

Source

alexjoyner

Most helpful comment

This issue has to do with a know problem running in docker. Running a container from a windows environment does not communicate the file events to the docker container with native functionality. The current work-around until native functionality is implemented is to use webpack polling in the docker container to allow webpack to poll for file system changes. Therefore, you have to add this to a razzle.config.js file to get hmr to see updates:

       if(config.devServer){
            config.devServer.watchOptions['poll'] = 1000;
            config.devServer.watchOptions['aggregateTimeout'] = 300;
        }

@jaredpalmer If this is something you would want to have a feature branch made for, I could work up something for a PR. Just let me know. Thanks for making this awesome starter kit.

alexjoyner on 3 Dec 2017

🎉3

All 3 comments

       if(config.devServer){
            config.devServer.watchOptions['poll'] = 1000;
            config.devServer.watchOptions['aggregateTimeout'] = 300;
        }

@jaredpalmer If this is something you would want to have a feature branch made for, I could work up something for a PR. Just let me know. Thanks for making this awesome starter kit.

alexjoyner on 3 Dec 2017

🎉3

@alexjoyner holy moly. Thanks for figuring this out. I am not a javascript guy so this helped me out a ton.

AlexMorreale on 8 Dec 2017

👍2

the config didnt work for me. looks like its updating but not seeing in the browser.

following log shows startup and change to file.

0|razzle   |
0|razzle   | > [email protected] start /app/razzle/razzle
0|razzle   | > razzle start
0|razzle   |
0|razzle   |  WAIT  Compiling...
0|razzle   |
0|razzle   | ℹ Compiling Client
0|razzle   | ℹ ｢wds｣: Project is running at http://apps.syntapse.co.uk:3001/
0|razzle   | ℹ ｢wds｣: webpack output is served from undefined
0|razzle   | ℹ ｢wds｣: Content not from webpack is served from /app/razzle/razzle
0|razzle   | ℹ ｢wds｣: 404s will fallback to /index.html

0|razzle  | ✔ Client: Compiled successfully in 8.28s
0|razzle  | ℹ Compiling Server
0|razzle  | ✔ Server: Compiled successfully in 765.85ms
0|razzle  | Warning: Please use `require("react-router-dom").Route` instead of `require("react-router-dom/Rout0|razzle  | Warning: Please use `require("react-router-dom").Switch` instead of `require("react-router-dom/Swi0|razzle  | ✅  Server-side HMR Enabled!
0|razzle  | 🚀 started
0|razzle  | ℹ Compiling Server
0|razzle  | ✔ Server: Compiled successfully in 88.70ms
0|razzle  | 🔁  HMR Reloading `./server`...
0|razzle  | [HMR] Updated modules:
0|razzle  | [HMR]  - ./src/Home.js
0|razzle  | [HMR]  - ./src/App.js
0|razzle  | [HMR]  - ./src/server.js
0|razzle  | [HMR] Update applied.
0|razzle  | ℹ Compiling Client
0|razzle  | ✔ Client: Compiled successfully in 73.55ms
0|razzle  | ℹ Compiling Client
0|razzle  | ✔ Client: Compiled successfully in 228.31ms