Webpack dev server reload doesn't work on virtual box

Question

I'm running a webpack server on virtual box with Ubuntu 15.10 using vagrant over mac OSX.

The webpack config is pretty clean:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

var MINIFY = process.env.MINIFY === true;

var FRONTEND_ROOT = './static'
var SRC_PATCH = FRONTEND_ROOT + '/scripts';
var BUILD_PATH = './dist';


module.exports = {
  entry: SRC_PATCH + '/main.js',
  devtool: 'source-map',
  output: {
      path: BUILD_PATH,
      filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [SRC_PATCH, 'node_modules']
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(FRONTEND_ROOT, 'index-template.html'),
      minify: MINIFY
    })
  ],
  module: {
    loaders: [
      {
        test: /\.jsx|js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  eslint: {
    configFile: './.eslintrc'
  }
};

Webpack was run on VM by

vagrant@vagrant-ubuntu-wily-64:/vagrant$ webpack-dev-server --port 8080 --devtool eval --progress --colors --hot --content-base dist

And when I edit a file from OSX it doesn't reload, but if I edit the same file from VM it'll reload.

What is the problem? How can I fix it?

Answer 1

Long story short: no any changes made to the files on the host system (MacOS) are propagated as events to the guest box synced_folder.

So features relying on filesystem events like Webpack's "hot reload" (webpack-hot-middleware), nodemon's --watch option and so forth won't work.

The underlying reason is, VirtualBox has decided not to implement inotify. Quote:

The reason is that the host and the guest might have different file systems and vboxsf would have to implement a generic protocol to forward that information from the host to the guest. And this would have to work between many different host/guest combinations. Therefore marking this ticket as "won't fix", sorry.

The workaround is to use rsync as desribed in this answer from Maxim Shepelin.

Answer 2

I've solved my problem with vagrant rsync-auto https://docs.vagrantup.com/v2/cli/rsync-auto.html

I'd added the line config.vm.synced_folder ".", "/vagrant", type: "rsync", rsync_auto: true, rsync_exclude: ".git/" to my Vagrantfile, and run vagrant rsync-auto under a separate tab.