BrowserSync with custom URL

Question

Im using BrowserSync for my site. The following live reloads my CSS changes but it opens a webpage at http://localhost:3000/

gulp.task('sass-watch', ['theme-css'], browserSync.reload);

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    proxy: 'mysite.com'
  });
});

My site is configured via Vagrant to be accessed locally at mysite.com. How can I get BrowserSync working at this custom URL?

Ive tried the following as my VM is using port 80.

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    open: 'external',
    host: 'mysite.com',
    proxy: 'mysite.com',
    port: 80
  });
});

However I get an error:

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES 0.0.0.0:80
    at Object.exports._errnoException (util.js:874:11)
    at exports._exceptionWithHostPort (util.js:897:20)
    at Server._listen2 (net.js:1221:19)
    at listen (net.js:1270:10)
    at Server.listen (net.js:1366:5)
    at module.exports.plugin (/path-to-my-site/node_modules/browser-sync/lib/server/index.js:24:25)
    at Object.module.exports.startServer [as fn] (/path-to-my-site/node_modules/browser-sync/lib/async.js:236:52)
    at /path-to-my-site/node_modules/browser-sync/lib/browser-sync.js:149:14
    at iterate (/path-to-my-site/node_modules/browser-sync/node_modules/async-each-series/index.js:8:5)
    at /path-to-my-site/node_modules/browser-sync/node_modules/async-each-series/index.js:16:16

If I use the default port of 3000 then the page loads but I get error connection refused.

ERR_CONNECTION_REFUSED

Answer 1

Your first attempt is the correct one, of course that way you would get browserSync to serve your app on http://localhost:3000, which is the default.

The second one has nothing wrong except that the address you are trying to assign to browserSync is already used by vagrant.

So if you want browserSync to be on mysite.com you should configure vagrant to take something else.

If you do so, then the script becomes:

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    open: 'external',
    host: 'mysite.com',
    proxy: 'mylaravel.com',
    port: 80
  });
});