September 04, 2017

How to Create a Subdomain/Virtual Host on WAMP

Setting up a local development environment is one of the first steps before developing a web application. It involves configuring a number of virtual hosts for multiple applications. Let's understand how to create virtual hosts on WAMP to run multiple websites on a local machine.

Create a Subdomain on WAMP

Before we add any virtual host in WAMP, there are two modules required (Virtual Hosts and Virtual Host Alias) that we need to enable. This entire configuration can be broken down into the following steps:

  1. Add an entry to Windows' hosts file for local machine lookup.
  2. Enable the Virtual Hosts and Virtual Host Alias modules in WAMP.
  3. Add entries to the Virtual Hosts file for the domains.
  4. Test the domain/virtual host configuration.
 

What is a Virtual Host/Subdomain?

A virtual host in Apache is a feature that allows us to add multiple domains on the same local machine. Whereas a subdomain is a specific v-host entry that points to a unique URL and can be accessed at that URL. This configuration enables us to access a project via a URL instead of an IP address. Developers can run multiple projects at the same time by mapping different URL addresses to different directories. To configure a WAMP subdomain, follow the steps below.

 

Step 1: Add a Virtual Host Entry to Windows Hosts File

The first thing we need to do is to add an entry for our main domain and subdomain in the hosts file. On a Windows operating system, this file can be found at this location:

C:\windows\system32\drivers\etc\

The file name is just "hosts" with no extension, and we can open it with Notepad++ or any other editor of choice. This file also requires administrator permissions to make any changes, so we open it with special permissions by right-clicking on it and then clicking "Run as Administrator". Then we add the following lines at the end of the file:

127.0.0.1  our-example-domain.com
127.0.0.1  mail.our-example-domain.com

We leave the first line as it is, where it says "localhost" and add the content of the snippet above to the file. The first line from the snippet above is for our main domain and the second one is for our subdomain. The domain names our-example-domain.com and mail.our-example-domain.com are used as an example for this post and can be changed according to requirements. What does this file actually do? 127.0.0.1 is a self-referencing loopback IP and whenever this IP is accessed, it will reference the local machine to resolve the IP address to a hostname. This means the operating system will search for the given hostname on the same computer for a server instead of calling the configured DNS and looking it up over the internet.

 

Step 2: Enable Apache Virtual Hosts in WAMP

After adding the entry to Windows' hosts file, now we need to enable virtual hosts modules in httpd.conf file to let Apache know about our domains to serve. This file can be found at the following location:

C:\wamp\bin\apache\apache2.4.51\conf\

To open httpd.conf, simply click the WAMP Tray icon, move the mouse cursor over Apache, and click httpd.conf in the sub-menu.

After opening httpd.conf, search for the following lines and remove the # from the beginning of these lines, then save and close the file.

#LoadModule vhost_alias_module modules/mod_vhost_alias.so
#Include conf/extra/httpd-vhosts.conf

Now that we are done pointing our domain back to the local machine and enabled Apache directives, open the httpd-vhosts file at the following location:

C:\wamp\bin\apache\apache2.4.51\conf\extra\

I have WAMP installed in C:\ directory.

 

Step 3: Configure Apache VirtualHost for WAMP Subdomain

After opening the file, add two VirtualHost entries with the following lines for our main domain and subdomain, then save and close the file. Always take a backup of this file before making any changes to it.

<VirtualHost *:80>
    DocumentRoot "c:/wamp/www"
    ServerName our-example-domain.com
    ServerAlias our-example-domain.com
</VirtualHost>
<VirtualHost *:80>
    DocumentRoot "c:/wamp/www/mail-interface"
    ServerName mail.our-example-domain.com
    ServerAlias mail.our-example-domain.com
</VirtualHost>

The DocumentRoot directory is the directory where all files for our domain are stored. In my case, I have a directory mail-interface inside the www root directory. The ServerName is the domain name or subdomain name. The ServerAlias is an alternate/additional domain name, which is usually www. We did not use any for our domains in this post.


Step 4: Restart WAMP Server and Test Local Subdomain Configuration

After following the above steps, we are ready to test our configuration. To test our configuration, we restart the WAMP server, open a browser, and enter our-example-domain.com and then mail.our-example-domain.com to confirm our configuration. We should see the content of www as the root of main-domain.com and the content of www/mail-interface for our mail.our-example-domain.com as per our configurations.

Home