gulp-livereload with vagrant environment : livereload.js not accessible

Question

I have a problem using gulp-livereload in my vagrant environment (generated with puphpet). My computer is a Windows Host, and the VM a Debian.

I use this gulpfile :

var gulp       = require('gulp'),
    less       = require('gulp-less')
    lr         = require('tiny-lr'),
    livereload = require('gulp-livereload'),
    server     = lr()
;

gulp.task('less', function () {
    gulp.src('assets/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('build/css'))
        .pipe(livereload(server))
    ;
});

gulp.task('watch', function() {
    gulp.watch('assets/less/*.less', ['less']);
    livereload.listen(35729, function(err){
        if(err) return console.log(err);
    });
});

gulp.task('default', ['watch', 'less']);

And when Chrome Extension add the magic JS file I obtain this message :

Failed to load resource: net::ERR_CONNECTION_TIMED_OUT http://markup.dev:35729/livereload.js?ext=Chrome&extver=0.0.5

But in my VM, if I run the following command line, I get it

wget http://localhost:35729/livereload.js?ext=Chrome&extver=0.0.5

Answer 1

I don't have enough information to be certain, but I would guess that your problem is you are trying to access the page from the host, but the livereload port isn't forwarded (the VM has it's own IP address and vagrant can be configured to forward certain ports to the host so that they "appear" to be local on the host).

Try adding the following line to your Vagrantfile:

config.vm.network "forwarded_port", guest: 35729, host: 35729

(For documentation see: https://docs.vagrantup.com/v2/networking/forwarded_ports.html)

Alternatively if you are directly hitting the VM (that is you have markup.dev mapped to the guest's IP) it may be worth verifying that there is not a firewall configured on your VM which might block the livereload port from external access.

Answer 2

In my case, the port forwarding worked automagically. However, I had to specify the VM's IP as host:

livereload.listen({
    host: '192.168.33.10'
});

Update: Passing null works, too:

livereload.listen({
    host: null
});

I guess that the underlying http server behaves differently when passing 'localhost' explicitly.