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…
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):
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:
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.