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?

Are you sharing a folder on your host with the VM? – Kenney Nov 12 '15 at 20:49 — Kenney, Nov 12 '15 at 20:49
Yes, my project root mounted to /vagrant directory on VM os – Maxim Schepelin Nov 13 '15 at 07:49 — Maxim Schepelin, Nov 13 '15 at 07:49

score 9 · Answer 1 · edited Jan 30 '17 at 21:20

9

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.

edited Jan 30 '17 at 21:20

bright-star

6,016
6
42
81

answered Nov 13 '15 at 18:40

Maxim Schepelin

451
5
9

score 5 · Answer 2 · edited May 23 '17 at 11:47

This is answered under another question: https://stackoverflow.com/a/34937378/5114

If you add the --watch-poll option it changes the way webpack looks for file changes.

webpack-dev-server --watch-poll --port 8080 --devtool eval --progress --colors --hot --content-base dist

This makes webpack poll for changes to the files every N milliseconds. Polling works in the Vagrant shared directories when the normal method doesn't because it doesn't look for mtime or other filesystem attributes, just reads the files on an interval. It's slower and uses more cpu/memory, so don't use polling unless you have to.

https://webpack.github.io/docs/cli.html#watch

score 2 · Answer 3 · answered Aug 13 '20 at 06:40

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.

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

the first thing you need to see is if in the console where you're running the server, the recompiled process is happening or not. If' not the answer is in the SyncFolder line that @maxim-schepelin said above. If is recompiling and the web page is not reloading maybe the webPack solution.

Edit

Another reason for the folder sync not working the righ way could be this https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

Webpack dev server reload doesn't work on virtual box

4 Answers4

Edit

Linked