How To Setup Apache Virtual Hosts Using XAMPP in Windows

To setup apache virtual hosts using XAMPP in windows when working in local environment, I like to setup my projects with separate domain names like projectname.stage to keep them isolated from each other.

It’s fairly easy to get this working using XAMPP in Windows. In order to do that, there are 2 main steps which are:

Step 1

Open the following file in any text editor.

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

In my case, It is

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

The file will look 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 block. 
# 
##<VirtualHost *:80>
     ##ServerAdmin [email protected] 
     ##DocumentRoot “F:/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 [email protected] 
     ##DocumentRoot “F:/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>

# Local 
<VirtualHost *:80>
    DocumentRoot “F:/xampp/htdocs” 
    ServerName localhost 
    <Directory "F:/xampp/htdocs">
        Order allow,deny 
        Allow from all 
    </Directory>
</VirtualHost>

Paste the following at the bottom of the httpd-vhost.conf file.

<VirtualHost *:80>
   DocumentRoot “F:/xampp/htdocs/pixelative/projectname/public” 
   ServerName projectname.stage
   ServerAlias www.projectname.stage
   <Directory "F:/xampp/htdocs/pixelative/projectname/public">
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

The ServerName entry specifies which domain to associate with your project (in this example: projectname.stage). The DocumentRoot entry is the folder that will be loaded by Apache when visiting the domain specified by ServerName.

Note: Apache will first try to load up index.php file in that directory, if there’s no index.php, it’ll look for index.htm|index.html, if it can’t find any index file, it’ll show the file listing of that directory.

Step 2

Open the hosts file to add an entry that tells the computer to point the above domain back to our own machine.

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

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

It will look 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 

# 127.0.0.1 localhost

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

127.0.0.1 projectname.stage

This will route all requests to projectname.stage to the IP Address 127.0.0.1 which is the loopback address of the machine, which just points to itself.

Restart Apache, So it can load the new configuration.

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