How to make BrowserSync work with an nginx proxy server?

To get more control over how opening the page is done, use opn instead of browser sync's mechanism. Something like this (in JS - sorry, my Coffee Script is a bit rusty):

browserSync({    server: {        // ...    },    open: false,    port: 3001}, function (err, bs) {    // bs.options.url contains the original url, so    // replace the port with the correct one:    var url = bs.options.urls.local.replace(':3001', ':3002');    require('opn')(url);    console.log('Started browserSync on ' + url);});

I'm unfamiliar with Nginx, but according to this page, the solution to the second problem might look something like this:

map $http_upgrade $connection_upgrade {    default upgrade;    '' close;}server {    # ...    # BrowserSync websocket    location /browser-sync/socket.io/ {        proxy_pass http://localhost:3001;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection "Upgrade";    }}

I only succeed by appending /browser-sync/socket.io to proxy_pass url.

map $http_upgrade $connection_upgrade {    default upgrade;    '' close;}server {    # ...    # BrowserSync websocket    location /browser-sync/socket.io/ {        proxy_pass http://localhost:3001/browser-sync/socket.io/;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection "Upgrade";    }}

You can also do this from the gulp/browsersync side very simply by using its proxy option:

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

This means your browser connects to browsersync directly like normally via gulp, except now it proxies nginx. As long as your front-end isn't hard-coding hosts/ports in URLs, the requests to Rails will go through the proxy and have the same origin so you can still POST and such. This might be desirable for some as this change for a development setting goes in the development section of your code (gulp+browsersync) versus conditionalizing/changing your nginx config which also runs in production.