Quick Tip - How to use a custom domain for your Angular app running in Docker

Published Feb 6, 2019 (5 years ago)
Danger icon
The last modifications of this post were around 5 years ago, some information may be outdated!

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:

- 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 --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 ( Alternatively (and what I prefer nowadays) you can use dnsmasq.