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

Buckden

Do you know that 'lr', 'livereload' and 'server' variables in your code are globals? – Histolysis

Yes I know but I don't think that it's the problem – Buckden

Yeah... although using globals is bad and unpredictable, I agree. That's why I didn't post an answer. – Histolysis

Where is it getting markup.dev from? – Fantail

markup.dev is define in my host file, and hosted by the VM – Buckden

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.

Alkalinity

Hi, markup.dev is defined in my host file, and hosted by the VM. When I open markup.dev in my browser, it's working, without specific configution for the port 80 I tryed your solution but that don't fix my problem :( – Buckden

Did you reload your vagrant configuration after adding the line above? Because this really sounds like a networking issue. – Helsell

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.

Raynold