Coding

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

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.

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.