Issue with hot reloading and VirtualBox

[Tarasovych]

Version

3.7.0

Reproduction link

https://github.com/Tarasovych/myvueapp

Environment info

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
  Binaries:
    Node: 10.15.3 - /usr/bin/node
    Yarn: 1.15.2 - /usr/bin/yarn
    npm: 6.9.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/cli-overlay:  3.7.0 
    @vue/cli-service: ^3.7.0 => 3.7.0 
    @vue/cli-shared-utils:  3.7.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    vue: ^2.6.10 => 2.6.10 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 3.7.0

Steps to reproduce

1. Install Laravel Homestead
2. Set up Homestead.yaml

ip: "192.168.2.10"
memory: 1024
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/dev/myvueapp
      to: /home/vagrant/dev/myvueapp

sites:
    - map: myvueapp.local
      to: /home/vagrant/dev/myvueapp.local/public

3. Run npm run serve inside VM

What is expected?

Hot reloading works

What is actually happening?

Hot reloading doesn't work. Error

net::ERR_CONNECTION_REFUSED

---

Nginx config:

server {
    listen 80;
    listen 443 ssl http2;
    server_name .myvueapp.local;
    root "/home/path/to/myvueapp.local/public";

    index index.html index.htm;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.html =404;
        proxy_pass https://myvueapp.local:8080;
    }

    sendfile off;
}

hosts on host machine:

192.168.10.10  myvueapp.local

hosts in VM:

127.0.0.1       myvueapp.local

[Tarasovych]

So far I modified my vue.config.js:

module.exports = {
  devServer: {
    host: '0.0.0.0',
    https: true,
    disableHostCheck: true,
    watchOptions: {
      poll: true
    },
    public: 'myvueapp.local'
  }
}

Anyway, Hot Reload doesn't work. Only poll is working.

[LinusBorg]

Anyway, Hot Reload doesn't work. Only poll is working.

Can you expand a bit what that exactly means? Does it mean that with poll: true, you get the complete page reloaded by not hot module reloading?

Or does it mean that with poll: true, HMR works?

[Tarasovych]

@LinusBorg when I was running npm run serve on the host machine, I was fine without

    watchOptions: {
      poll: true
    },

and HMR was working.

Now I understood I wrote it wrong about "Hot Reload doesn't work".

So, as the conclusion:
HMR works on host machine without poll: true, but doesn't work while running under VM without poll: true

[LinusBorg]

Understood, thanks.

In that case: that's expected, as Vagrant doesn't allow/support watching files, see:

https://webpack.js.org/configuration/watch/#watchoptionspoll