How to enable hot reloading via shared folders wit

Question

I have a very basic react/redux app utilizing hot reloading (i.e. when I save a change to my source code, it updates the contents of my app accordingly in browser, preserving the state of my app) via webpack. This works on myhost machine.

However, if I use a vagrant-based workflow with synced folders (so that I can use my preferred non-terminal text editor) and I make and save a change to my source code on my host machine, the hot reloading is not triggered. However, if I make/save the change on the guest machine (just using nano for simplicity), the hot reloading does trigger.

To clarify, the saved change from the host machine is reflected in the file in the guest machine, but it doesn't trigger hot reloading. If I change helloworld to Hello, World! on my host machine, the guest machine's copy of that file will also say Hello, World!, but until I also save that change on the guest machine, hot reloading will not trigger.

Answer 1

This issue could be caused by Virtualbox's own file system for shared folder.

According to https://github.com/webpack/webpack-dev-server/issues/155, you could probably try this:

webpack-dev-server --watch-poll

Additionally, I believe using rsync will always work (but this will slightly change your workflow):

Webpack dev server reload doesn't work on virtual box