(/blog)

November 11, 2011

How to Set Up Virtual Hosts Using WAMP

UPDATE July 2014: This tutorial is out-of-date and incompatible with Apache 2.4. I use a Mac
now so I probably won't be updating this.

This is Part 1 of my 2-part series, Better Living Through PHP.

At a certain point in your web development career, you're going to hit a wall where static
.html pages just don't cut it anymore. You'll have finished a 20-page site only for the
client to decide they simply must have a Twitter button in the header. What's a poor
developer to do? Find/Replace your way to the madhouse, that's what. You could use a content
management system, but some sites (and budgets) are just too small for that. You need
something more than static HTML, but less than a CMS - you need PHP.

By configuring virtual hosts on your WAMP server, you're able to run as many
separate sites as you want, from any location you want.

In order to run PHP on your local Windows computer, you need to install a server stack -
either WAMP (http://www.wampserver.com/en/) or XAMPP
(http://www.apachefriends.org/en/xampp.html). Either will do, but for the purposes of this
tutorial we're going to stick with WAMP.

Mac users: Most of what you need to run basic server-side scripts is already installed on
your Mac. To set up virtual hosts, I recommend Virtual Host X
(http://clickontyler.com/virtualhostx/). For a more advanced server setup, try MAMP
(http://www.mamp.info/en/index.html). There are a plethora of tutorials
(http://www.google.com/search?
source=ig&hl=en&rlz=&q=Virtual+Hosts+using+MAMP&oq=Virtual+Hosts+using+MAMP&aq=f&aqi=&aql=&gs_sm=e&gs_
ab&hl=en&source=hp&q=MAMP%2C+Virtual+Hosts&pbx=1&oq=MAMP%2C+Virtual+Hosts&aq=f&aqi=g3g-
v1&aql=1&gs_sm=e&gs_upl=3178l7384l0l7657l19l16l0l0l0l0l295l2861l0.11.5l16l0&bav=on.2,or.r_gc.r_pw.,cf.
online for setting up virtual hosts using MAMP.

Now, you could just do a basic install of WAMP and be on your way, but being restricted to
just one directory in an obscure location on your computer is awfully limiting, especially
if you're working on multiple projects at a time. That's where virtual hosts come in. By
configuring virtual hosts on your WAMP server, you're able to run as many separate sites as
you want, from any location you want. Setting up virtual hosts can be just short of
infuriating, however, and it took me half a dozen tries using half a dozen tutorials to get
it working myself. That's why I've taken my experience and created what I hope will become
the One True Tutorial™.

This tutorial should work for machines running either Vista or Windows 7.

Important: If you have Skype installed, open the Skype options and uncheck the box that says
"use port 80".

10 Steps to Virtual Host Bliss with WAMP

Step 1
Download and install WAMP (http://www.wampserver.com/en/), then start the program. Pick a
location on your computer where you want to set up your virtual hosts, like
"C:/Users/Kristen/Documents/Projects". We're just going to work with one folder for now, but
when we're finished you can set up virtual hosts in as many directories as you want. Inside
your "Projects" folder, create another folder where we'll keep your first site. We'll call it
"My Site" (C:/Users/Kristen/Documents/Projects/My Site).
As a sanity test, create a basic index.html file with some text ("Hello World!") and place it
in the "My Site" folder. When we're finished, you'll know you've done it right when you can
view your page in a browser using your virtual host's URL.

Step 2
Go to "C:/Windows/System32/drivers/etc" and open the "hosts" file in Notepad.

Vista Users: Right-click on Notepad and select "run as administrator". Then select File>Open
and at the bottom right of the dialog box, select "All Files" from the dropdown instead of
"Text Documents (*.txt)":

Then navigate to "C:/Windows/System32/drivers/etc" and open the "hosts" file.

The file should look like this:

Windows 7:

# 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

Vista:
?

# Copyright (c) 1993‐2006 Microsoft Corp.
# Copyright (c) 1993‐2006 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
 
127.0.0.1       localhost
::1             localhost
127.0.0.1       localhost

Step 3
At the bottom of the hosts file, below all the other text, add a new line with the following:

127.0.0.1   mysite.local    #My Test Site ?

"mysite.local" is the domain name that will be used for your local site. You can name this
whatever you want, like "nyan.cat" or "james.tiberius.kirk". "#My Test Site" is simply a
comment to help identify the site, which will be helpful once you start stacking up a lot of
virtual hosts. Again, you can put whatever you want here, just don't forget the hashtag (#)
beforehand, which is what makes it a comment.

Save the file.

Step 4
Open "C:/wamp/bin/apache/Apache2.2.21/conf/" (your Apache version number may be different)

Just to mess with your head, there are 2 files - one called "httpd.conf", and one called
"httpd.conf.build":

Open "httpd.conf".

Step 5
At line 467, under "# Virtual hosts", uncomment (remove the hashtag [#]) before the line
"Include conf/extra/httpd-vhosts.conf":
This tells Apache to include the file "httpd-vhosts.conf" (the file where we set our virtual
hosts) when configuring its settings.

Step 6
Go to "C:/wamp/bin/apache/Apache2.2.21/conf/extra" and open the file "httpd.vhosts.conf". It
should look 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/ (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.
#

Step 7
We need to give Apache permission to look in our "Projects" folder for websites. At the
bottom of the page, below all the other text, add the following:

<Directory C:/Users/Kristen/Documents/Projects> ?

Order Deny,Allow   
Allow from all 
</Directory>

Step 8
After the directory code you just added, add:

<VirtualHost *:80>    ?

DocumentRoot "C:\Users\Kristen\Documents\Projects\My Site" 
ServerName mysite.local 
</VirtualHost>

The DocumentRoot should be the path to the folder where your site lives, and the ServerName
should match the domain you entered in your hosts file in Step 3.

Important: The DocumentRoot must be inside the directory that you gave Apache permission to
access in Step 7.

Save the file.

Step 9
Click on the green WAMP icon in your toolbar and select "Restart all Services", then wait
for the icon to turn back to green.

Step 10
Open your browser and navigate to "mysite.local", or whatever your domain name is. You
should see the test page you created in Step 1.

Step 11*
Fix yourself a drink, you did it!
*So sue me.

From now on, when you want to add a new site to the server, just do these two things:

1. Add a domain to the hosts file.

2. Add the domain and the site's root directory to the httpd-vhosts.conf file.

Remember, Apache will only allow you to view sites in the folder you specified at the top of
the "httpd-vhosts.conf" file in Step 7. If you move your development folder or want to add
another one, you'll need to edit that code or add another instance.

I keep a shortcut of "hosts" and "httpd-vhosts.conf" in a folder on my desktop so I can

access them easily when I want to create a new site. Unfortunately if you're running Vista,
you'll have to access your hosts file through Notepad running as an administrator.

Summary
Congratulations! You now have a shiny server installed with virtual hosts configured and
you're ready for some server-side scripting! Check back for Part 2 in my series Better
Living Through PHP to learn how to use simple PHP scripts to speed up your web development
workflow.

UPDATE 8/10/12: If you're going to be working on sites with custom .htaccess files, you'll
need to set AllowOverride in Step 7:

<Directory C:/Users/Kristen/Documents/Projects> ?

AllowOverride All
Order Deny,Allow   
Allow from all 
</Directory>

Categories: Development (http://www.kristengrote.com/blog/category/development)

© kristengrote.com