Angular Dev Server In Custom Domain Using Apache/Xampp

The following article covers instructions for windows environment.

Topics Covered:

• How to add VirtualHost in apache.
• How to enable modules in Apache to use Apache reverse Proxy Feature.
• Use Apache Reverse Proxy to Serve any dev server in the custom domain.

For example. http://localhost:4200 can be accessed via http://custom.mydomain.com or whatever you want.

This can be useful in a situation where we need a real domain name instead of localhost. A while ago I was in a situation where I needed to share cookies between two of my projects, We know cookies can be shared between the same domain. So if I could have domain setup like test1.mydomain.com and test2.mydomain.com for my projects then it will be possible to save cookies under mydomain.com which will be accessible via both test1 and test2 site. I used to run them in localhost:someport. Almost every web framework/library comes configured with a dev-server that serves our application in the localhost. Which is fine until we come to a point where localhost is not enough.

To achieve the solution to this problem we will be using the Apache Web Server. And I will also be using angular as my web project for demonstration purposes.

Environment Requirements -

1. Node 10.xx or higher with npm.
2. Xampp With Apache2

1 — Create a new angular project -

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve — disable-host-check

We should see something like this, That means the project is running on http://localhost:4200

Note:

— disable-host-check is to disable angular dev server host checking, by default host os localhost and the dev server allows the server to be available only via localhost as the hostname. This is a problem as we want to access our server via http://custom.mydomain.com.

2 — Install Xampp

Xampp comes with Apache2 configured with itself. To Install xampp, Go to XAMPP Installers and Downloads for Apache Friends

Start Xampp Control Panel from programs -

Click on Start for Apache Module to start the apache server.

3 — Configuring Virtual Host

Now that we have our project running and our web server is ready, We are ready to put them together.

First of all, we will change some configuration in our apache web server, Which means we will enable Some Modules for the Server,

In order to work everything perfectly, we need to enable the following modules for apache If they are not enabled already,

proxy_http_module
rewrite_module
deflate_module
headers_module
proxy_connect_module
proxy_html_module

To enable this modules open [xampp-installation-directory]\apache\conf\httpd.conf

Default xampp installation directory in Windows is C:\xampp

To enable a module, Remove # from the beginning of the line for each module. Search for modules listed above and enable them if they are not enabled already,

This file can be opened via Xampp Control Panel Also, In order to do that, Click on the config button and Choose the first option, It will open the config file with your default text editor.

After enabling those modules, add these following lines after modules list to add Basic Proxy configuration,

<Proxy *>
    Order Allow,Deny
    Allow from all
</Proxy>

Add Virtual Host Entry-

To add a new virtual host we need to edit a new file named httpd-vhosts.conf Which is located in [xampp-installation-directory]\apache\conf\extra

Default xampp installation directory in Windows is C:\xampp

Open the file and add the following lines to the bottom -

More on VirtualHost directives https://httpd.apache.org/docs/2.4/vhosts/

##<VirtualHost *:80*>
    ProxyPreserveHost On
    ProxyPass “/” “http://127.0.0.1:4200/"
    ProxyPassReverse “/” “http:/127.0.0.1:4200/”
    ServerName custom.mydomain.com
##</VirtualHost>

In the above configuration 4200 is the port where our angular app is running and we want to access that app via custom.mydomain.com We can add as many virtual hosts we want.

Finally, we need to do one more thing, We need to add our custom domain to our windows hosts file.

Windows host file is located in C:\Windows\System32\drivers\etc

Find the file named hosts and edit,

Add following lines to the bottom of the file

127.0.0.1 custom.mydomain.com
[YOUR IP] custom.mydomain.com

Make sure the IP and the server name is separated with at least one space.

Save all the files and Restart the apache server from xampp control panel and visit http://custom.mydomain.com/ in the browser.

Your Application should now be available in the browser under your custom domain name.