Browsersync with sage on a vagrant box

sage
1

I’m just taking my first look at sage (having previously used roots). I use vagrant to build local dev boxes and I’d like to use browsersync.

The only way I’ve been able to get this to work is to create a tunnel on my host (OSX) over ssh. Is anyone else using browsersync with vagrant? Perhaps we can share tips here.

I edited my manifest.json to include my local dev URL - local.mysitename (changed to protect the innocent)
I made sure that port 3000 was open on my vagrant box.
I ran gulp watch and saw:

[BS] Proxying: http://local.mysitename
[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

At this point I expected to be able to enter local.mysitename:3000 in my browser and experience browsersync goodness but this didn’t work.

I think this has something to do with NAT and vagrant/virtualbox. On my host OSX, local.mysitename points to 192.168.56.101.

As a last resort, I have set up a tunnel which forwards 127.0.0.1 to 10.0.2.15 and if I browse to http://127.0.01:3000 I can see my sage site.

I also tried setting the host option in gulpfile.json to

  browserSync({
    proxy: config.devUrl,
   host: "192.168.56.101",
   snippetOptions: {...

But that didn’t work either. If anyone has any tips, please let me know.

2

On your dev machine housing the vagrant box, you should not access your website with http://local.mysitename:3000 but with http://localhost:3000

local.mysitename should be mapped to 192.168.56.101 in your /etc/hosts, this is basic vagrant configuration

Then browserSync serves the content of local.mysitename AKA 192.168.56.101 on http://localhost:3000

Then it serves the content too on http://192.168.56.101:3000 for external machines.

But it never serves anything on local.mysitename:3000

3

I think he’s saying he wants to run gulp on the vagrant box?

Really you should have the tools needed installed on your computer (node, npm, gulp, bower, etc) and then just using the Vagrant box to server the WP website. I haven’t tried using vagrant for that, so sorry I can’t help there :frowning:

4

I don’t know but indeed the setup I’m talking about involves local tools on the dev host machine and not on the guest vagrant box, which is “only” serving the WP website for me .

5

I’m on a Mac but here is how I have got it to work (just Vagrant, not using Bedrock):

Take a look at my network settings in https://gist.github.com/anonymous/4794441c0dfa7578faf4 on line 34.

This line creates a IP for my Vagrant box on my local network (192.1.xxx.xxx) - edit this to match your router’s network setup. Also if you know the name of your bridge adapter, add that - or otherwise remove that setting, Vagrant will ask you what you want to use. More info: Vagrant Public Network Configuration

You can then edit your host file to add the following line (I like using Gas Mask for this task)

192.168.1.123 local.dev #Example name for your local setup

Now run vagrant reload && vagrant ssh and then run ifconfig to verify your Vagrant box is connected to your network using your IP.

 eth1      Link encap:Ethernet  HWaddr 08:00:27:92:2f:8c  
          inet addr:192.168.1.123  Bcast:192.168.1.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fe92:2f8c/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:9767 errors:0 dropped:0 overruns:0 frame:0
          TX packets:1874 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000 
          RX bytes:1589868 (1.5 MB)  TX bytes:1789394 (1.7 MB)

Visit http://local.dev/ in your browser to ensure you can reach your Apache server.

If that’s all working good, now it’s time to edit /assets/manifest.json to change the “devURL” setting to your new setting:

"config": {
    "devUrl": "local.dev"
  }

Run gulp watch again and you should see:

[BS] Proxying: http://local.dev #Woo hoo
[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
 ----------------------------------

And now visit http://local.dev:3000/ in your browser. As long as you have the 3000 port number in your URL you can visit any page and use Browsersync. You will see a black popup in the top right corner every time you save a file in /assets/ indicating that Browsersync is working.

If none of this works, you might have a bad package install somewhere along the line. Try a new Vagrant box + fresh download of Sage to diagnose the issue.

6

With my setup, I run it all in my Vagrant box as I don’t want all those tools cluttering up my primary OS - it’s a matter of preference though :smile: I also use a shell script that installs everything again in case I nuke the Vagrant setup.

I guess the gist of my response is that the 192.168.56.101 wasn’t attaching to anything on the network, so changing the public network setting to match the router’s network will likely do the job :+1:

2 Likes
7

@drawcardau Thanks for your reply. I’ve only just found time to look at this again. My starting point was a puPHPet vagrant box which has its own network configuration so its not as trivial as to just add a line from your network config. By default, it has a private network and requires that host only network for NFS shares to work.

I did try adding a public network and a bridge but it didn’t ‘just work’. The vagrant box now has two IPs. I don’t know enough about Vagrant networking or IP tables, NAT, port forwarding etc to resolve this in a sane amount of time, though I would like to understand it better.

For now, I am just using an ssh tunnel.

8

@JulienMelissas yes, I didn’t make it very clear and can’t edit my post now but up until now I have run all tools like gulp etc on the vagrant box so that I am not polluting the host OS.

9

Easiest way to get BrowserSync work with Vagrant is to use http://vccw.cc/
When you have installed all npm dependencies etc then just run “gulp watch” and go to default ip of this vagrant box which is http://192.168.33.10:3000/. Now my browsersync it working :slight_smile:

10

Running BrowserSync / npm on the Vagrant box is slow and not ideal. Use Trellis for your Vagrant box and run BrowserSync and node on your host machine.