So you've used one of the default templates out there to build and deploy your Angular app using Docker. Fabulous! Now let's wire it up so that way you can use something more meaningful than localhost...
I'm a big fan of using a custom local domain for development work. It makes it much easier to enable SSL and can also eliminate certain headaches with platforms such as Google login that won't recognize localhost as a valid request source.
The first step is to update your docker-compose.yml file to have your container listening for a specific hostname. Add this to your angular/services/web section (depending on what you named it):
hostname: epicsite.test
Additionally, you'll want to map your local port 80 to the container port 4200, since this is what the default Angular project runs out of:
ports:- 80:4200
Finally, update your Dockerfile command to ignore specific IP addresses and leverage the "public host" parameter to indicate your custom domain:
CMD ng serve --host 0.0.0.0 --public-host epicsite.test
That's all there is to it. Rerun your docker-compose build and docker-compose up commands and you're now running your site on a local domain without the localhost shenanigans!
Final note: make sure you update your hosts file so that your epicsite.test domain points to your loopback IP address (127.0.0.1). Alternatively (and what I prefer nowadays) you can use dnsmasq.