React Hot Reload not working on Docker For Windows

[SC7639]

I've been looking into getting hot reload to work on docker for windows. I've found out that I need to get webpack to poll files due to the filesystem used in docker for windows mounted volumes, I need to add the below to the webpack configuration but I'm not sure where to add it in the dev.babel.js file (if that is the correct file). I've tried adding it in multiple places but I'm not sure if it's not working or I don't have the configuration correct.

watchOptions: {
    poll: 1000
}

Any help will be greatly appreciated

[tirthbodawala]

@SC7639 Let me have a look at it. I have tested docker on Linux and was working fine. it is supposed to work for Windows as well but let me go through it.

[tirthbodawala]

@SC7639 Can you please share your windows details along with the version of docker you are using?

[SC7639]

I'm using Windows 10 with docker for windows. I've had this issue before with things like nodemon. It's because HyperV doesn't propagate file system events so I know the fix is polling for file changes. Output of docker version:

Client:
 Version:      17.09.0-ce
 API version:  1.32
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:40:09 2017
 OS/Arch:      windows/amd64

Server:
 Version:      17.09.0-ce
 API version:  1.32 (minimum version 1.12)
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:45:38 2017
 OS/Arch:      linux/amd64
 Experimental: true

[tirthbodawala]

@SC7639 I have updated the code to accept watchOptions from config to enable watch config, Please update the file webpack/dev.babel.js by the following option in devServer section:

const commonClientConfig = {
  // ... other config
  devServer: {
    // .. other dev server config 
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },
};

This should also be updated for service worker configuration just in case, ( I added backup config from above but adding it to service worker would make more sense:

const serviceWorkerConfig = {
  // ... other config
  devServer: {
    // .. other dev server config 
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },
};

Let me know if this fixes the issue!

[tirthbodawala]

@SC7639 Were you able to configure it after this update?

[tirthbodawala]

Closing due to no-response

[SC7639]

I've tried after updating the configuration and it's still not hot reloading. I've also noticed that the nodemon doesn't reload either if any of the files are changed that it's watching.

[tirthbodawala]

Ok. I shall debug this in detail, but I have applied the patch suggested. Is there anything we are missing?

[SC7639]

Sorry I was wrong about it fixing the issue. I cloned a fresh version of the repo and it works. Sorry for the mix up

[aaaleeex7]

Hey i have the same issue with a react project on windows with docker/docker-compose. My whole node_modules foulder is mounted into the virtual machine so i dont have access to the node_modules folder to edit the dev.babel.js file for hot-reloading. Is there any possible soulution?

[tirthbodawala]

@aaaleeex7 which version of ReactPWA are you using?

[aaaleeex7]

@tirthbodawala create-react-app is v2.1.1

[tirthbodawala]

@aaaleeex7 I think you are posting it in wrong repo :) This repo is for ReactPWA. Please raise an issue here: https://github.com/facebook/create-react-app/issues