Blog

A collection of musings about technology, animation, and design.

A virtual host is a domain name that is registered only on your personal computer, and points to a directory on your computer. It’s a great way to simulate a web server environment while you are developing. This tutorial will explain how to set up a virtual host on your Windows 7 machine.

Keep in mind that this tutorial assumes that you already have a server stack such as WAMP or XAMPP set up on your computer. If you do not, you can easily download and install either of them before starting this tutorial.

1. Configure your hosts file

Find the “hosts” file located in C:\Windows\System32\drivers\etc\. Open it with NotePad or a similar program. At the end of the file, add a line that looks like this:

127.0.0.1    example.dev

You should, of course, replace “example.dev” with the domain name that you would like to use for your local folder. Also, double-check that the IP address for localhost is 127.0.0.1. If it is not, you will need to update your entry so that its IP address matches the localhost entry’s IP address.

2. Enable Virtual Hosts in your httpd.conf file

For some reason Apache often has virtual hosts disabled by default, so you’ll need to manually enable them. Depending on the server stack that you have installed, you’ll find the file in different locations.

WAMP After starting up WAMPSERVER, simply left-click on the green tray icon, click “Apache,”” then click “httpd.conf.”
XAMPP You should find your file in C:\xampp\apache\conf\extra\httpd-xampp.conf. Note that the XAMPP file is actually named httpd-xampp.conf. Also, if you have installed your XAMPP files in a different location than the C: root, you’ll need to look there. If all else fails, run a search for httpd-xampp.conf.

Once you have the file open, search for a line that reads “# Virtual Hosts.” Remove the pound symbol from the line directly underneath it (in WAMP, the line underneath it will read “Include conf/extra/httpd-vhosts.conf”). It doesn’t matter if the line is slightly different for you; just remove the pound sign regardless. Also, copy and paste (or write down) the path in this line, as you’ll need it for the next step.

3. Input your virtual host information into httpd-vhosts.conf

Remember that path that I told you to save in the last step? This is where you’ll need it. In case you forgot to save it, I’ve lised the usual paths below.

WAMP C:\wamp\bin\apache\Apache2.2.21\conf\extra\httpd-vhosts.conf
XAMPP C:\xampp\apache\conf\extra\httpd-vhosts.conf

Open this file with Notepad. Now comes the slightly more complicated part. Your file will probably look something like this:

#
# Virtual Hosts
#
# 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.2="" 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:/Apache2/docs/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:/Apache2/docs/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>
</virtualhost></url:http:>

You’ll need to tackle this job by completing all of the tasks below.

Make sure that the file contains NameVirtualHost *:80

First, if you do not see a line that says “NameVirtualHost *:80, you’ll need to add it. Do so in an area above the VirtualHost examples (as demonstrated above).

Create a localhost entry

Next, you need to add a line to the bottom of the file; it ensures that you’ll be able to access localhost even after you set up your virtual host.

<virtualhost *:80="">
ServerName localhost
DocumentRoot "c:/wamp/www"
</virtualhost>

The document root in the above line MUST match the web directory for your apache installation. Here are the common ones:

WAMP c:/wamp/www
XAMPP c:/xampp/htdocs

Some people say to use quotes around it; others say the opposite. I’m not sure that it matters either way.

Create your virtual host entry

Finally, you are to the part of the tutorial where you get to actually set up your virtual host. Just like in the previous section, you’ll need to add a line that looks like this:

<virtualhost *:80="">
ServerName example.dev
DocumentRoot "c:/wamp/www/example/"
</virtualhost>

The directory for your virtual host MUST BE INSIDE your web root (www or htdocs) in order for it to work. It can be inside a folder that’s inside a folder that’s inside a folder in the web directory; it just has to be a subdirectory of it at some level. Of course, it’s perfectly possible to use a directory that is NOT inside your web root, but it will take some additional configuration steps. If you are interested in doing that, refer to the section at the end of the file titled “How do I use a directory outside of the web root?”

When you have finished entering your virtual host information, save and close the file.

4. Restart Apache

The process for restarting Apache is different for WAMP and XAMPP. Of course, you could always restart your computer to accomplish it. Check out some specific instructions below, though.

WAMP Left-click on the green WAMPSERVER tray icon and select “Restart All Services.” After fluctuating between orange and/or red, it should shortly turn green again, indicating a successful restart. If it does not turn green again after a while, it means you have made a mistake somewhere in your httpd.conf file or httpd-vhosts.conf file. Retrace your steps to discover the error. If it did turn green again, you should be set to go. Try typing your virtual host address into your browser!
XAMPP Use your XAMPP Control Panel to stop Apache and restart it.

Additional Q and A.

Q. How do I use a directory outside of the web root for my web project location?

A. All you need to do is let Apache know that it has the privileges to do this. Enter the following code into your httpd-vhosts.conf file directly before the section that includes the NameVirtualHost *:80 line.

<directory c:="" vhosts="">
  Order Deny,Allow
  Allow from all
</directory>

Q. How can I set up virtual hosting on Linux?

A. In the near future I plan to put out a tutorial for setting up virtual hosts on Ubuntu 12.04. I’ll update this section with a link when I have posted it.

Q. Can I use any TLD (.com, .net, etc.) that I want for a virtual host?

A. Yep, you certainly can! You can make up any domain name that you want.

Q. Can I use a virtual host domain name that is already in use online?

A. Yes, you can even use google.com if you want. As discussed in the following question, though, you’ll need to keep in mind that you won’t be able to use www before your virtual host domain unless you set up your DNS settings to allow it.

Q. Will my domain with with a www before it?

A. No. Unless you adjust your DNS settings to allow it, a www will not resolve to a virtual host. You’ll need to omit that part and simply use http://example.dev for your virtual host.