Hot reload fails when files are changed from the host mapped volume in Docker-compose

Question

In a docker-compose I have two services that share the same mapped volume from the host. The mapped volume is the application source files located in the host. When the source files are changed in the host, HMR is not triggered, including a manual refresh does not show the latest changes. Although, if editing the file directly in the container, the HMR reloads and displays the changes. Finally, the changes are visible from the host - meaning that the mapped volume is correct and pointing to the correct place. The question is why isn't the webpack-dev-server watcher picking up the changes? How to debut this? What solutions are there?

The docker-compose services in question:

  node_dev_worker:
    build:
      context: .
      dockerfile: ./.docker/dockerFiles/node.yml
    image: foobar/node_dev:latest
    container_name: node_dev_worker
    working_dir: /home/node/app
    environment:
      - NODE_ENV=development
    volumes:
      - ./foobar-blog-ui/:/home/node/app
    networks:
      - foobar-wordpress-network

  node_dev:
    image: foobar/node_dev:latest
    container_name: node_dev
    working_dir: /home/node/app
    ports:
     - 8000:8000
     - 9000:9000
    environment:
      - NODE_ENV=development
    volumes:
      - ./foobar-blog-ui/:/home/node/app
      - ./.docker/scripts/wait-for-it.sh:/home/node/wait-for-it.sh
    command: /bin/bash -c '/home/node/wait-for-it.sh wordpress-reverse-proxy:80 -t 10 -- npm run start'
    depends_on:
      - node_dev_worker
      - mysql
      - wordpress
    networks:
      - foobar-wordpress-network

The node.yml:

FROM node:8.16.0-slim

WORKDIR /home/node/app

RUN apt-get update
RUN apt-get install -y rsync vim git libpng-dev libjpeg-dev libxi6 build-essential libgl1-mesa-glx

CMD npm install

The Webpack dev server configuration follows some recommendations found online, for container issues, such as the one I'm presenting. The webpack configuration is placed in a middleware provided by Gatsbyjs called gatsby-node.js, as follow:

devServer: {
    port: 8000,
    disableHostCheck: true,
    watchOptions: {
        poll: true,
        aggregateTimeout: 500
    }
}

The Linux distro is (Docker image called node:8.16.0-slim):

PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
NAME="Debian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
ID=debian

Also, the browser does show that [HMR] is connected and listening. As follows:

[HMR] connected
[HMR] bundle rebuilt in 32899ms

The host in question is Macos 10.14.6 Mojave. Running Docker 2.1.0.2

Any hints on how to debug this issue?

Why do you need Docker here? Especially for a front-end application where the build chain doesn't have interesting host dependencies and the output can't, just using Node directly on the host has always seemed much easier to me. — David Maze, Sep 14 '19 at 00:18
It's definitely easier to use node on the host. But the use case is much more complex then what I expose above. I've got different services and service workers. Also, easier to port between host systems and deployment environments. But it is easier for me too as you said, but that's a different hammer :) Thanks! — punkbit, Sep 14 '19 at 01:53

score 1 · Accepted Answer · edited Sep 30 '19 at 23:16

To fix this problem I've checked the documents provided by Docker, regarding my host system that is MacOS where they announce OSFX ( https://docs.docker.com/docker-for-mac/osxfs/ ), so before anything else, I made sure that the volumes that I am allowed to mount from MacOS are listed:

My volume sits under the /Users parent directory, so I'm good to go! Obs: I don't think it relates, but I did reset to factory before going ahead verifying the File Sharing tab.

Have in mind the previous changes I raised in the original ticket, as this helps and is recommended. Check your Webpack Dev Server configuration:

devServer: {
    port: 8000,
    disableHostCheck: true,
    watchOptions: {
        poll: true,
        aggregateTimeout: 500
    }
}

It's also important to start the development server by declaring the --host and --port, like:

gatsby develop -H 0.0.0.0 -p 8000

To complete and I believe this is the key to fix this problem is that I've set the following environment variable GATSBY_WEBPACK_PUBLICPATH in my Docker-compose yaml file, under the property environment:

  node_dev:
    image: moola/node_dev:latest
    container_name: node_dev
    working_dir: /home/node/app
    ports:
     - 8000:8000
     - 9000:9000
    environment:
      - NODE_ENV=development
      - GATSBY_WEBPACK_PUBLICPATH=/
    volumes:
      - ./foobar-blog-ui/:/home/node/app
      - ./.docker/scripts/wait-for-it.sh:/home/node/wait-for-it.sh
    command: /bin/bash -c '/home/node/wait-for-it.sh wordpress-reverse-proxy:80 -t 10 -- npm run start'
    depends_on:
      - node_dev_worker
      - mysql
      - wordpress
    networks:
      - foobar-wordpress-network

Hot reload fails when files are changed from the host mapped volume in Docker-compose

1 Answers1