I have spent some time trying to make Angular2 Quickstart 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.
Lets say you are hosting the Angular2 Quickstart application on http://example.net/myangular2app
Status when following the tuto
The base tutorial should lead you to the following situation:
- http://example.net/myangular2app displays the page but refresh does not work
- http://example.net:3001 displays the Browsersync UI (where you can check whats happening)
- http://example.net:3000 displays the page and creates the websocket connection which allows live refresh
What we want
We would like to use http://example.net/myangular2app and have the Browsersync stuff sending updates to the web browser (and not http://example.net:3000). And we have Nginx as the webserver.