Custom domain instead of localhost - Angular

Question

Development purpose I want to start my Angular application with custom-domain instead of localhost

Is any other way available?

I am able to find solutions for php but I didn't find solutions for the angular application.

https://stackoverflow.com/questions/17652373/how-to-change-the-url-from-localhost-to-something-else-on-a-local-system-usin — JohnWayne, Sep 24 '20 at 13:02
Does this answer your question? [How to change the URL from "localhost" to something else, on a local system using wampserver?](https://stackoverflow.com/questions/17652373/how-to-change-the-url-from-localhost-to-something-else-on-a-local-system-usin) — JohnWayne, Sep 24 '20 at 13:02
Duplicate: https://stackoverflow.com/questions/37762125/set-default-host-and-port-for-ng-serve-in-config-file — Boban Stojanovski, Sep 24 '20 at 13:16
you won't be able to do this in an entirely self contained fashion. You'll need other components in your environment involved, which raises the "is this worth it?" question. I have to imagine the answer is no. — bryan60, Sep 24 '20 at 13:25

score 13 · Accepted Answer · edited Jun 14 '21 at 10:49

Update your angular.json

This is what you should do:

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "customdomain.baz",
                  "port": 80
                }
            }
        }
    }
}

Update your host file if you are on mac/ linux

go to /etc/hosts

##
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1       customdomain.baz // or whatever your domain is
255.255.255.255 broadcasthost
::1             localhost

notice that under the same path (`architect.serve.options`) there's the useful `allowedHosts` property that receives an `string[]` of domains. — baryo, Apr 11 '23 at 13:03

score 3 · Answer 2 · answered Sep 24 '20 at 13:18

Add a line in hosts file:

127.0.0.1   my-custom-domain.com

But this will require port to be specified anyway. You'll have to use my-custom-domain.com:4200.

To use default port :80, use as a reference this post

If you want to run multiple sites on the same port, but serve different domains, use Nginx or Apache as a proxy.

Here is a sample server config for nginx:

server {
    listen 80;
    server_name  my-custom-domain.com;
    location / {
        proxy_pass       http://localhost:4200;
    }
}

Custom domain instead of localhost - Angular

2 Answers2