File watching in windows with docker (Parcel 2)

[chopfitzroy]

🐛 bug report

I am trying to get a parcel app running in docker on a Windows host, so far I can build the app, but file watching does not work and a rebuild is not triggered when editing files.

Related Issues: #564, #1308, #2539.

🎛 Configuration (.babelrc, package.json, cli command)

docker-compose.yml:

version: '3'
services:
  web:
    build: .
    command: npm run start
    volumes:
      - .:/usr/app/
      - /usr/app/node_modules
    ports:
      - "1234:1234"
      - "1235:1235"
    environment: 
      - CHOKIDAR_USEPOLLING=1

Dockerfile:

FROM node:latest

WORKDIR /usr/app

COPY package.json .

RUN npm install --quiet

COPY . .

Start script: NODE_ENV=development parcel src/index.html --hmr-port 1235.

🤔 Expected Behavior

When a file is modified a rebuild will trigger.

😯 Current Behavior

Project builds initially, but does not rebuild.

💁 Possible Solution

Have tried the mentioned fixes in the above linked issues, these include adding CHOKIDAR_USEPOLLING=1 to the docker container, and trying to bind the HMR port on the container and the Windows host.

🔦 Context

Wanting to speed up development with hot reloading.

💻 Code Sample

As above, can include a dummy repo if needed.

🌍 Your Environment

Software	Version(s)
Parcel	^2.0.0-alpha.3.2
Node	13.3.0
npm/Yarn	6.13.1
Operating System	Windows 10

[DeMoorJasper]

Parcel 2 uses a custom watcher so no more chokidar.

At first sight this seems like an issue in your docker container, you’re copying files so a file change would require an entire docker rebuild.

You can mount folders to docker if you want to do this and it should work

_{Sent with GitHawk}

[chopfitzroy]

Hey @DeMoorJasper,

Ahhhh that is very good to know, is there something else I can use to resolve this issue?

Cheers!

[DeMoorJasper]

@CrashyBang as it's an issue with your docker setup I can only really point you to a stackOverflow issue discussing how to do this...

https://stackoverflow.com/questions/23439126/how-to-mount-a-host-directory-in-a-docker-container

[chopfitzroy]

Hey @DeMoorJasper,

I'm not really sure that it is, because if I edit a file on the host (Windows), then go into the container (docker-compose exec web bash) and then touch the file (touch src/components/side-menu/index.js) the re build triggers, then if I refresh my browser the component it is updated as expected.

So as far as I can tell the volumes are mounting correctly and edits are flowing through to the container, it really is a matter of the file watcher not working? And even when the re-build is trigger the browser is not updated, I am not sure what this would be related to.

Cheers.

[DeMoorJasper]

Added stale-ignore to this issue, so it should not get stale ever again, however it would be nice if anyone can debug this properly so we can actually fix this.

I can't really reproduce this.

[jasonswearingen]

@DeMoorJasper I am having a perhaps related issue on: Win10 using Docker and WSL2, via VSCode's .devcontainer workflow.

It seems that mounted host directories via WSL2 do not trigger the docker's INotify, which means that file watchers like parcel don't notice when a change occurs. NOTE: I only tested this on docker, not via the stand-alone WSL2 subsystem). I saw some passing mentions that docker mounts via WSL2 don't trigger INotify, but nothing explicit.

I tested this by trying the basic parcel tutorial via a mounted folder (changes didn't rebuild) and then rsync to a normal folder inside the docker image and trying. (which worked: changes did rebuild).

I tried working around the issue by rsyncing and then using unison to keep everything in sync but man that is a lot of plumbing. I am giving up on this (docker devcontainers), but perhaps a solution would be to allow running Parcel in a watch mode that checks timestamps?

[Rechdan]

I can confirm that there is a problem with the watcher, nodemon does work when using it in Docker, but parcel does not catch when a file changes or is added to the project.

The compose file:

version: '3.8'

services:
  db:
    image: mariadb:10.5.8
    expose:
      - '3306'
    ports:
      - '3306:3306'
    volumes:
      - ./.mysql:/var/lib/mysql

  dev_web_server:
    image: node:14.15.0-alpine3.12
    working_dir: /app
    entrypoint: sh -c "npm i && npm run clear && npm run dev-server"
    expose:
      - '3000'
    ports:
      - '3000:3000'
    volumes:
      - ./package.json:/app/package.json
      - ./package-lock.json:/app/package-lock.json
      - ./tsconfig.json:/app/tsconfig.json
      - ./dist:/app/dist
      - ./web:/app/web
    depends_on:
      - db

[BeycanDeveloper]

Yes i have same problem and i think don't have still any solution