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
  });
});

Answer 2

For anyone else who comes across this question on Google like I did: The "port" option specifies the port you want BrowserSync to listen to, not the port that the server it will be proxying is listening to. The problem with the setup in this question is that it is trying to assign BrowserSync to listen to the same port that Vagrant is already listening to.

If you remove the "port" option, BrowserSync defaults to port 3000, and you will be able to access it successfully at mysite.com:3000. That is roughly the setup I'm currently using. Alternately, you should be able to keep BrowserSync assigned to port 80 if you reassign Vagrant to another port (e.g., 8080), and then access BrowserSync at mysite.com directly.