Running Angular CLI in local dev behind docker nginx reverse proxy

ng-serve-docker-nginx-proxy.md

Setup

Angular app talking to multiple microservices using Cookie authentication on ajax requests. Cookies are not passed over cross domain ajax requests, so we need to be able to have the Angular app and microservices running on same-domain in local dev as well as in production.

We have a Docker nginx proxy running on localhost:8000:

• proxying to multiple microservices on localhost:8000/api/<microservice>
• proxying other requests to Angular CLI (ng serve) on en0 inet (192.168.1.5 for instance) port 4200
• using a python script to get the correct en0 IP and write it to the nginx config at proxy startup

Considerations

ng serve needs to be serving on 0.0.0.0 in order to be accessible from the docker container on the en0 inet address. We also need to tell the app where the live reload information is hosted.

Solution

ng serve --host 0.0.0.0 --public-host http://localhost:4200 does this nicely.

If you prefer, you can set these options in the .angular-cli.json:

"defaults": {
  "serve": {
    "host": "0.0.0.0",
    "public-host": "http://localhost:4200"
  }
}

Now you just run ng serve and access your app on localhost:8000 with livereload 🎉

Did you need to run docker-compose up to run the container first?