BrowserSync with custom URL

user_467875 0
Viewed 9298

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

gulp browser-sync
3 Answers

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.

user_40964980
Related