How to make BrowserSync work with an nginx proxy server?

Question

(If needed, please see my last question for some more background info.)

I\'m developing an app that uses a decoupled front- and backend:

• The backend is

Answer 1

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.

Answer 2

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

Answer 3

Setup for browser-sync to work with python (django) app that runs on uwsgi via websocket. Django app is prefixed with /app to generate url that looks like http://example.com/app/admin/

server {
  listen 80;
  server_name example.com;

  charset utf-8;

  root /var/www/example/htdocs/static;
  index index.html index.htm;

  try_files $uri $uri/ /index.html?$args;

  location /app {
    ## uWSGI setup
    include     /etc/nginx/uwsgi_params;
    uwsgi_pass  unix:///var/run/example/uwsgi.sock;
    uwsgi_param SCRIPT_NAME /app;
    uwsgi_modifier1 30;
  }

  location /media  {
    alias /var/www/example/htdocs/storage;
  }

  location /static {
    alias /var/www/example/htdocs/static;
  }

}

Answer 4

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