Enabling Browsersync UI on nginx

Question

I use a Vagrant VM to reproduce my production server for local web development.

Host machine is running Windows 10 and guest runs Nginx 1.10 on Ubuntu 14.04 with VirtualBox as a provider.

I want to serve files during development using Gulp and Browsersync. Here is my browsersync configuration from gulp serve task:

browserSync.init({
  ui: {
    port: 3001
  },
  open: false,
  port: 3000,
  server: {
    baseDir: ['.tmp', 'app'],
    routes: {
      "/bower_components": "bower_components"
    }
  }
});

I managed to get it to work with this:

map $http_upgrade $connection_upgrade {
  default upgrade;
  '' close;
}

server {

    server_name test.local.dev;

    location / {
      proxy_pass http://localhost:3000/;
    }

    location /ui/ {
      proxy_pass http://localhost:3001/;
    }

    # BrowserSync websocket
    location /browser-sync/socket.io/ {
      proxy_pass http://localhost:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
    }

}

Socket configuration as seen here: How to make BrowserSync work with an nginx proxy server?

The site, reloads and browsersyncing works great. But UI can't find needed files.

GET http://test.local.dev/js/vendor/socket.js 
GET http://test.local.dev/js/app.min.js 
GET http://test.local.dev/js/pages-config.js 
GET http://test.local.dev/lib/client-js.js 
GET http://test.local.dev/js/vendor/socket.js 
GET http://test.local.dev/js/app.min.js 
GET http://test.local.dev/js/pages-config.js 
GET http://test.local.dev/lib/client-js.js 404 (Not Found)

How can I set up routes for those requests in Browsersync configuration? If it's impossible is there any way to make it work?

did you try to replace localhost by test.local.dev in your config ? — Frederic Henri, May 25 '16 at 12:49
No, I didn't. I don't know which config you mean. @FrédéricHenri — Richard the Lionheart, May 25 '16 at 13:06
in your proxy conf http://localhost:3000 --> http://test.local.dev:3000 — Frederic Henri, May 25 '16 at 13:07
I tried that but nothing has changed. I think that if I could tell browsersync UI where to look for files all would be good. I tried to set up proxy and socket instead of server in browserSync.init() but I don't understand them and required Nginx configuration. — Richard the Lionheart, May 25 '16 at 14:14
add [`host`](https://www.browsersync.io/docs/options/#option-host) in your browser sync.init() if `test.local.dev` does not work try the IP of the VM — Frederic Henri, May 25 '16 at 14:23
It makes no difference. Served site works great on http://test.local.dev from any project but http://test.local.dev/ui looks for its files in server root with incorrect routing (as it seems). — Richard the Lionheart, May 25 '16 at 14:49

Enabling Browsersync UI on nginx

0 Answers0