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

Do you know that 'lr', 'livereload' and 'server' variables in your code are globals? — Kokozaurus, Nov 19 '14 at 11:26
Yeah... although using globals is bad and unpredictable, I agree. That's why I didn't post an answer. — Kokozaurus, Nov 19 '14 at 11:30

Hargo · Answer 1 · 2015-12-15T18:58:53.647

8

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.

edited Dec 15 '15 at 18:58

answered Dec 02 '14 at 00:40

Hargo

1,256
1
16
24

Hi, markup.dev is defined in my host file, and hosted by the VM. When I open http://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 :( – vurtupesz Dec 03 '14 at 10:00
Did you reload your vagrant configuration after adding the line above? Because this really sounds like a networking issue. – hequ Dec 08 '14 at 17:21

backflip · Answer 2 · 2015-01-14T17:45:00.247

3

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.

edited Jan 14 '15 at 17:45

answered Jan 14 '15 at 17:26

backflip

904
6
9

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

2 Answers2