VVV and Gulp BrowserSync outputs a useless (?) public IP

kevinmamaqi commented 7 years ago

Issue details

I am running VVV, (just installed) for theme development using gulp altogether with Gulp-BrowserSync (and other npm packages).

In VVV I've created a new WP install called organic with organic.du.dev as URL. It is working fine.

In my gulpfile.js I got the following BrowserSync task:

    gulp.task( 'browser-sync', function() {
      browserSync.init( {

        // For more options
        // @link http://www.browsersync.io/docs/options/

        // Project URL.
        proxy: projectURL,

        // `true` Automatically open the browser with BrowserSync live server.
        // `false` Stop the browser from automatically opening.
        open: true,

        // Inject CSS changes.
        // Commnet it to reload browser for every CSS change.
        injectChanges: true,

        // Use a specific port (instead of the one auto-detected by Browsersync).
        // port: 7000,

      } );
    });

When I initiate GULP (login via vagrant ssh) in the working folder everything runs and I receive the following message:

[

BS] Proxying: http://organic.du.dev
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001

The problem is that http://localhost:3000 is not accesible from Chrome or Safari and that http://10.0.2.15:3001 is a public (and useless as far as I know) IP. Running ifconfig in vagrant@vvv I receive the following prompt:

vagrant@vvv:~$ ifconfig
eth0      Link encap:Ethernet  HWaddr 08:00:27:67:05:88
          inet addr:10.0.2.15  Bcast:10.0.2.255  Mask:255.255.255.0

and also the working localhost IP, which is:

eth1      Link encap:Ethernet  HWaddr 08:00:27:4e:59:e0
          inet addr:192.168.50.4  Bcast:192.168.50.255  Mask:255.255.255.0

It took me a while to realise and find what's going on, but the problem is that I still don't understand it. I think that is an error and should be solved.

Steps to reproduce/test case

Install Vagrant
Install VVV
Create new WP installation with VVV wizard (VV).
Set up your tasks in gulpfile.js in a custom theme in order to use gulp and browser-sync
Run gulp

Please specify which version of Browsersync, node and npm you're running

Browsersync [ ^2.11.1 ]
Node [ 6.9.1 ]
Npm [ 3.10.9 ]

Affected platforms

[ ] linux
[ ] windows
[x] OS X
[ ] freebsd
[ ] solaris
[ ] other (please specify which)

Browsersync use-case

[ ] API
[x] Gulp
[ ] Grunt
[ ] CLI

If CLI, please paste the entire command below

{cli command here}

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

gulp.task( 'browser-sync', function() {
  browserSync.init({

    // For more options
    // @link http://www.browsersync.io/docs/options/

    // Project URL.
    proxy: projectURL,

    // `true` Automatically open the browser with BrowserSync live server.
    // `false` Stop the browser from automatically opening.
    open: true,

    // Inject CSS changes.
    // Commnet it to reload browser for every CSS change.
    injectChanges: true,

    // Use a specific port (instead of the one auto-detected by Browsersync).
    // port: 7000,

  });
});

simshanith commented 7 years ago

If you enable Vagrant port-forwarding, your VMs ports will be accessible from your host, allowing http://localhost:3000 to be accessible when running browser-sync in your VM.

https://github.com/Varying-Vagrant-Vagrants/VVV/blob/develop/Vagrantfile#L139