BrowserSync with Vagrant, Zurb Foundation, Nginx, Gulp

Question

I seem to be close after a couple of days deep into this setup but still can't get BrowserSync to use Nginx as the server on the Vagrant Ubuntu 14.04 with Nginx guest and view the html on my MacBook Pro host. However, on http://localhost:3001/ on my Mac Chrome browser I can view a BrowserSync page with settings and such. Therefore I suspect I'm doing something right, but probably not much.

I expect to see the Foundation splash page but I get "This site can’t be reached". Before I modify the gulpfile I can view the splash page with localhost:8079, the usual setup, so Foundation is working correctly.

I've tried localhost: 3000, 3001, and 3002 and those ports with the Vagrant IP 10.0.2.15 and 127.0.0.1 and 0.0.0.0. Anyone have a setup that works with this stack? I couldn't find a discussion anywhere with this setup.

The relevant parts of my gulpfile. I'm modifying what Foundation for Apps sets up.

var browserSync = require('browser-sync').create();

I got this code off a forum. I also tried other similar configs. I've commented out the Foundation server setup because I want to develop with Nginx. My limited understanding it that if I use the "server" in BrowserSync that I'll get a little dev server like Foundation's.

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: 'localhost:3002'
    });
});

At the bottom of the Gulpfile we do the watch thingy.

gulp.task('default', ['browser-sync'], function () {
  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);
  ...

After running "foundation watch" I get this:

[BS] Proxying: http://localhost:3002
[BS] Access URLs:
 ----------------------------------
    Local: http://localhost:3000
    External: http://10.0.2.15:3000

My Vagrantfile has port forwarding. The first three work as expected.

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/trusty64"
  config.vm.network "forwarded_port", host: 8080, guest: 80
  config.vm.network "forwarded_port", host: 8079, guest: 8079
  config.vm.network "forwarded_port", host: 1337, guest: 1337
  config.vm.network "forwarded_port", host: 3000, guest: 3000
  config.vm.network "forwarded_port", host: 3001, guest: 3001
  config.vm.network "forwarded_port", host: 3002, guest: 3002
  config.vm.host_name = "sails"
  config.vm.provision :shell, path: ".provision/bootstrap.sh"
  config.vm.provision "file", source: "~/.gitconfig", destination:               "~/.gitconfig"

This URL also works to see the Foundation splash page which is served by Nginx. I haven't studied Nginx yet but one step at a time. I'll have to figure out how to setup the servers for static and dynamic files.

Appreciate help of course. I put my Vagrant setup files here if anyone with this stack wants a shortcut to a great dev environment: https://github.com/svstartuplab/Vagrant-Foundation-Sails-Nginx

BrowserSync with Vagrant, Zurb Foundation, Nginx, Gulp

0 Answers0