Configuring Nginx for Angular 2 quickstart to work with Browsersync

Question

I spent some time trying to make Angular2 Quickstart available through port 80 using Browsersync. Browsersync is the technology responsible for real-time updates when your application code changes. It creates a connection with your browser at startup, detects changes in the files located in the application directory, and sends the appropriate updates.

Suppose you host an Angular2 Quickstart application at http://example.net/myangular2app

Status when performing a tattoo

In the basic tutorial, you should lead to the following situation:

• http://example.net/myangular2app displays the page, but the update does not work.
• http://example.net//001 displays the browsersync user interface (where you can check what happens)
• http://example.net//000 displays the page and creates a connection to a web socket that allows live updates

What do we want

We would like to use http://example.net/myangular2app and have Browsersync stuff sending updates to a web browser (not http://example.net//000 ). And we have Nginx as a web server.

Answer 1

Working solution

The idea is to use proxy_pass for two threads:

• redirect port 80 to port Browsersync 3000 when clicking on the root path /myangular2app
• using proxy_pass to port 3000 with web socket support for the browser-sync path and its descendants

Here is the nginx configuration

 server { listen 80 default_server; listen [::]:80 default_server; root /var/www; # Add index.php to the list if you are using PHP index index.html index.htm index.php index.nginx-debian.html; server_name example.net; location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. try_files $uri $uri/ =404; } # Here we proxy pass only the base path location = /myangular2app/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $http_host; proxy_pass http://127.0.0.1:3000; } # Here we proxy pass all the browsersync stuff including # all the websocket traffic location /browser-sync { proxy_set_header X-Real-IP $remote_addr; proxy_pass http://127.0.0.1:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } }