Setting both proxy and server in Browser-Sync express gulp vagrant nodemon

Question

Having problems with a specific browser-sync configuration. I need to set up browser-sync for both testing and dev environment. Dev is for an express app with templating engine working on vagrant and it reqires a connection via proxy. This set up works fine for a dev environment.

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

var paths = {
  src : {
    devenv:         ['app-dev/**/*.*', '!app-dev/bowercomponents/', 'app.js', 'public/**/*.*'],
    testenv:         'test/spec/**/*.*'
  },
};

gulp.task('browser-sync', ['nodemon'], function() {
  browserSync.init(null, {
    proxy: {
      target: 'http://192.168.33.10:3333', 
      ws: true,
    },
  });
});

gulp.task('serve', ['browser-sync'], function () {
  gulp.watch(paths.src.devenv, reload);
});

gulp.task('nodemon', function (cb) {
  var called = false;
  return nodemon({script: 'app.js'}).on('start', function () {
    if (!called) {
      called = true;
      cb();
    }
  });
});

The problem is that need another instance of browser-sync with comletely different settings for mocha chai testing environmen tha refers to test and bower_components folders both of them in the root. Something similar to this:

gulp.task('serve:test', () => {
  browserSync.get('Test Server').init({
    notify: false,
    port: 9999,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });
  gulp.watch(paths.src.testenv, reload);
});

If I setting it this way even if creating two separate instanses of browser-sync it returns an config error: cant set both proxy and server. If i am setting this like different proxy for test folder via:

var proxy = require('http-proxy-middleware');

var testServer = proxy(['/test'], {
  target: 'http://192.168.33.10',
  port: 9999,
  changeOrigin: true,
  logLevel: 'debug'
});

and adding it to main browser-sync init it just returns /cannot GET test. Is there any way to get them both working?

score 0 · Answer 1 · answered Nov 12 '16 at 21:55

Solved it. There is no need to use browserSync.get. One instance of Browser-sync is enough. This is the working configuration:

gulp.task('serve:test', () => {
  browserSync.init({
    notify: false,
    port: 9999,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

  gulp.watch(paths.dist.testscripts).on('change', reload);
});

gulp.task('browser-sync', ['nodemon'], function() {
  browserSync.init(null, {
    proxy: {
      target: 'http://192.168.33.10:3333', //VM's ip and port
      ws: true,
    },
  });
});

gulp.task('serve', ['browser-sync'], function () {
  gulp.watch(paths.src.devenv, reload);
});


gulp.task('nodemon', function (cb) {
  var called = false;
  return nodemon({script: 'app.js'}).on('start', function () {
    if (!called) {
      called = true;
      cb();
    }
  });
});

Setting both proxy and server in Browser-Sync express gulp vagrant nodemon

1 Answers1