title: Configuring Nginx to make Angular 2 quickstart work with Browsersync
body: <p>I have spent some time trying to make <a href="https://angular.io/docs/js/latest/quickstart.html">Angular2 Quickstart</a> reachable through port 80 with Browsersync working. Browsersync is the technology responsible for live refresh when your app code is modified. It creates a websocket connection with your browser on launch, detects the changes to the files located into the app directory and send the appropriate updates.</p>
  
  <p>Lets say you are hosting the Angular2 Quickstart application on <a href="http://example.net/myangular2app">http://example.net/myangular2app</a></p>
  
  <h3>Status when following the tuto</h3>
  
  <p>The base tutorial should lead you to the following situation:</p>
  
  <ol>
  <li><a href="http://example.net/myangular2app">http://example.net/myangular2app</a> displays the page but refresh does not work</li>
  <li><a href="http://example.net:3001">http://example.net:3001</a> displays the Browsersync UI (where you can check whats happening)</li>
  <li><a href="http://example.net:3000">http://example.net:3000</a> displays the page and creates the websocket connection which allows live refresh</li>
  </ol>
  
  <h3>What we want</h3>
  
  <p>We would like to use <a href="http://example.net/myangular2app">http://example.net/myangular2app</a> and have the Browsersync stuff sending updates to the web browser (and not <a href="http://example.net:3000">http://example.net:3000</a>). And we have Nginx as the webserver.</p>