c-scholz's avatar

Homestead on Windows 10 with VirtualBox, how to configure for making HMR work?

So I've just set up a new laravel installation and wanted to use the Inertia JS Layer together with VueJS. As I always ran into various problems when using PHP on my Windows PC I decided to also try out the Vagrant Homestead-Box on a VirtualBox Provider.

My Setup works very well except for the fact that I have no idea how to setup everything to make HMR work when I execute "npm run hot" on my VM. When accessing via "dev.akwear:8080" ("dev.akwear" being the host I setup in my hosts file on Windows), which is the route the npm command outputs, I only get a connection refused message.

Maybe someone on here is developing on Win 10 with Homestead who also uses the HMR feature and could help me?

0 likes
3 replies
c-scholz's avatar

Just in case, here is my Homestead.yaml in which I activated port forwarding.

ip: "192.168.10.10"
memory: 2048
cpus: 2
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/code
      to: /home/vagrant/code

sites:
    - map: dev.ak-wear
      to: /home/vagrant/code/akwear/public

databases:
    - homestead

features:
    - mariadb: false
    - ohmyzsh: false
    - webdriver: false

ports:
    - send: 8080
      to: 8080

This is my hosts file:

        127.0.0.1       localhost
	::1             localhost

        192.168.10.10 dev.ak-wear
c-scholz's avatar

I already tried the changes to the webpack.mix.js but it didn't change anything:


/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

if(mix.inProduction()) {
    mix.version();
}
mix.options({
        hmrOptions: {
            host: 'dev.ak-wear',  // site's host name 
            port: 8080,
        }
    });
mix.webpackConfig({
        // add any webpack dev server config here
        devServer: { 
            proxy: {
                host: '0.0.0.0',  // host machine ip
                port: 8080,
            },
            watchOptions:{
                aggregateTimeout:200,
                poll:5000
            },

        }
    });
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Please or to participate in this conversation.