Content Notice!

This post is really old, and no longer reflect my skill level, views or opinions, it is made available here for archival purposes (it was originally on my old WordPress blog).

Keep that in mind when you read the contents within.

How to add a Virtual Host in XAMPP

When developing locally, I often like to separate my projects with a separate domain name like helgesverre.local and clientwebsite.local etc.

It's fairly easy to get this working using XAMPP, however it might be daunting to try to research this on your own if you don't know what you're looking for, so I will teach you how to do it, ain't I nice? :)

What you need to do is to open the following file in a text editor

C:\xampp\apache\conf\extra\httpd-vhost.conf

It will look something like this:

# 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
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# 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 <VirtualHost> block.
#
##<VirtualHost \*:80>
##ServerAdmin webmaster@dummy-host.example.com
##DocumentRoot "C:/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
##</VirtualHost>

##<VirtualHost \*:80>
##ServerAdmin webmaster@dummy-host2.example.com
##DocumentRoot "C:/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
##</VirtualHost>

Delete everything in that file, and paste the following:

<VirtualHost *:80 >
    DocumentRoot "C:/xampp/htdocs/my-project/"
    ServerName my-project.local
</VirtualHost>

Don't worry about the ErrorLog, CustomLog or ServerAdmin entry, they are not required for a Virtual Host to work.

The ServerName entry specified which domain to associate with the DocumentRoot, the DocumentRoot entry is the folder that will be loaded when visiting the domain specified by ServerName (in this example: my-project.local)

However, we have not setup that domain to point to our local machine, if you try to visit my-project.local right now you will simply not get connected to anything.

So we have to open up our HOSTS file to add an entry that tells the computer to point that domain back to our own machine.

Open the following file in a text editor with Administrator rights, (right click -> Run as admin):

C:\Windows\System32\drivers\etc\hosts

It will look something like this:

# 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

Simply add the following line at the very bottom of the file.

127.0.0.1 my-project.local

This will route all requests to my-project.local to the IP Address 127.0.0.1 which is the loopback address of the machine, which just points to itself.

You are of course free to change my-project.local to whatever you want, but it needs to be the same in both the hosts file and the virtual host configuration file (httpd-vhost.conf).

If you have Apache running, you need to restart it so it can load the new configuration.

When navigating to my-project.local you should now be routed to your local web server and see the contents of the folder you specified in the VirtualHost entry.

Hint: the directory must exist or else you will get an error.

If you have any questions, feel free to leave a comment and I will get back to you.