Articles / How to add a Virtual Host in XAMPP
May 08. 2019 · by Helge Sverre

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.test and clientwebsite.test 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
HTACCESS
# 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 replace it with the following:

C:\xampp\apache\conf\extra\httpd-vhost.conf
HTACCESS
<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/my-project/"
    ServerName my-project.test
</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.test)

However we have not setup that domain to point to our local machine, if you try to visit my-project.test 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

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

127.0.0.1 my-project.test

This will route all requests to my-project.test 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.test 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.test you should now be routed to your local web server and see the contents of the folder you specified in the VirtualHost entry.

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

References and links in this article

Helge Sverre Hessevik Liseth

Book 1:1 help from me on CodeMentor, get expert advice and help with CraftCMS, Flutter or Laravel.

Expertise
  • Flutter
  • CraftCMS
  • PHP
  • VueJS
Book session