Virtual Host Configuration in Apache (Windows)

In this post, we will see how to configure virtual hosts for Apache on Windows. Many times, we install XAMPP, MAMP, or WAMP on Windows, but we find that to access our projects, we have to go through URLs like “localhost/test/” or “localhost/examples/project1.” Wouldn’t it be more convenient to have a local domain like “miproject1.local,” “miproject2.local,” and so on?

Windows hosts file

The hosts file is an extensionless text file located in the Windows operating system, and it is used to map domain names to IP addresses. It provides a simple and manual way to establish an association between a domain name and a specific IP address at a local level.

Let’s find out where the hosts file is located and examine its contents.

By default, it is typically found at C:\Windows\System32\drivers\etc\hosts.

Let’s take a look at its contents:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

See that the hosts file is typically a file where all lines are commented, and some lines provide instructions on how to use it. Additionally, there are two commonly used lines that we will utilize.

#127.0.0.1 localhost

#::1 localhost

127.0.0.1 is the IPv4 address of localhost, and ::1 is the IPv6 address of localhost. The local IP address 127.0.0.1, also known as the loopback address or “localhost,” is a special address used to access the local machine from itself. In other words, it is a way to refer to the own machine without relying on an external network connection.

On my computer, I am using XAMPP, so I will uncomment the IPv4 line. Please note that by doing this, we are associating the localhost domain with the current machine.

If we write the following in the hosts file:

127.0.0.1 localhost
127.0.0.1 project1.local
127.0.0.1 project2.local

These 3 domains are related with the IP 127.0.0.1 now, be clear that this is for our machine. For example, if I do the following line:

127.0.0.1 google.com

¿What will happen here?

Well if we check it on our browser, it will not find the page, we directly are saying that google.com is in our machine(PC). Take In consideration that I don’t up the Apache server, if we take the server up probably when I check in the browser I will see the XAMPP dashboard

Setting the Virtual Host in our PC

Please note that we are talking about Apache, and in my particular case, I am using XAMPP on my PC, which installs Apache, MySQL, and PHP as part of the package.

To activate our Virtual Host, we need to access the folder where Apache is installed.

In XAMPP, this is relatively easy.

Once inside the Apache folder, I need to go to the “config” folder and then open the httpd.conf file.

Inside the httpd.conf file, we will look for these lines.

# Virtual hosts
# Include conf/extra/httpd-vhosts.conf

And we will remove the # comment symbol in front of “Include conf/extra/httpd-vhosts.conf”.

Save the file and we’re done.

Now, we need to go to the httpd-vhosts.conf file, which is located as indicated by the include statement: Path inside Apache’s “conf/extra/httpd-vhosts.conf”.

Inside this file, we can define our virtual host. But let’s first see what the file contains.

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# 
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any  block.
#
##
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "D:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##

##
    ##ServerAdmin webmaster@dummy-host2.example.com
    ##DocumentRoot "D:/xampp/htdocs/dummy-host2.example.com"
    ##ServerName dummy-host2.example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
##

As we can see within our httpd-vhosts.conf file, there is a lot of information that we can use, including examples and a direct link to the documentation ( http://httpd.apache.org/docs/2.4/vhosts/).

Let’s see how to create multiple virtual hosts. Firstly, we’ll need our localhost and another virtual host, for example a “google.com” virtualhost.

Let’s assume that we create WordPress themes too, and have a virtualhost for that.

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot D:\xampp\htdocs
<Directory "D:\xampp\htdocs">
</Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName examplelang.local
    DocumentRoot D:\xampp\htdocs\Exercise_langChange
<Directory "D:\xampp\htdocs\Exercise_langChange">
</Directory>
</VirtualHost>

<VirtualHost *:80>
	ServerName wthemes.local
	DocumentRoot D:\xampp\htdocs\wordpress_themes
	<Directory "D:\xampp\htdocs\wordpress_themes">
	</Directory>
</VirtualHost>

Specifying the directory is very important, don’t forget it. If you don’t specify the directory, the virtual hosts may not work as desired. The following are simple examples of virtual hosts. If you need to do something more elaborate, refer to the documentation.

In these cases, when I visit “localhost,” you’ll notice that the path is “D:\xampp\htdocs” in my case. This may vary depending on where you have XAMPP or the installation package you’re using.

Therefore, when you type “localhost” in the address bar, it refers to the htdocs folder. If everything is set up correctly in XAMPP, it will redirect you to the well-known “localhost/dashboard/” page.

If I enter “wthemes.local” in the address bar, it won’t search for that page on the internet. Instead, it will access the site located in “D:\xampp\htdocs\wordpress_themes.” While this site may exist on the internet, I have instructed my machine to treat that URL as “127.0.0.1” (my loopback address).

As a result, it will access that file and indicate that “wthemes.local” is located in “D:\xampp\htdocs\wordpress_themes,” and we will see the site hosted in that location.

The same concept applies if I have a “google.com” entry in the hosts file pointing to my localhost. It will direct to the folder specified in my httpd-vhosts.conf file.

For these reasons, some educational institutions tend to use programs that restore the machine to a previous state. These programs include DEEP FREEZE, Clean Slate, SmartShield, Dafturn Ofris, etc.

Let’s create a fake “google.com” just to wrap up the concept: I will create a folder named fakegoogle with an “index.html” file in my htdocs folder. Then, I will add “google.com” to the hosts file and finally set up the virtual host.

<h1>Fake Google</h1>

127.0.0.1 google.com

<VirtualHost *:80>
	ServerName google.com
	DocumentRoot D:\xampp\htdocs\fakegoogle
	<Directory "D:\xampp\htdocs\fakegoogle">
	</Directory>
</VirtualHost>

Let’s see what we have here by running “google.com” in a browser:

As you can see, Edge allows this to happen, while Chrome, on the other hand, protects us against it and shows us the real page. This doesn’t mean it protects us from other types of fake pages. As I mentioned before, I used your own PC as an example to enter sites that require login information.