I just recently started using the Sage starter theme for WordPress theme development, after positive recommendations from many theme developers. I had been using Bones theme, which was (and still is) excellent, but Sage is (in my opinion so far) even better.
One of the cool features of Sage is BrowserSync, which automatically keeps a linked browser updated with changes as you make them. The problem is, I do my local development using Vagrant/Virtualbox, and BrowserSync doesn’t work inside Vagrant without a little bit of tweaking.
I like to run gulp etc inside the VM, in order to keep my host machine as clean as possible. This is much slower and BrowserSync doesn’t work out of the box this way, but that’s just too bad. As long as I can get the Sage dev tools to work at a reasonable speed, I am reasonably happy with that. Anyway..
If you want to run browsersync inside Vagrant, the fix is really simple. What you need to do is forward the (3000 & 3001) ports using Vagrant.
Simply add the following lines to your Vagrantfile:
config.vm.network :forwarded_port, guest: 3000, host: 3000, auto_correct: true config.vm.network :forwarded_port, guest: 3001, host: 3001, auto_correct: true
That should do it! Thanks to KahunaCoder for providing this solution on StackOverflow here.