When developing a website I’m sure many of you are checking the pages work and look the way they should. If you’re only working on one site this isn’t too much of problem as you can place the site into your ~/Sites folder, turn on web sharing in Preferences and run the site from your local machine. If you’re like me though, and work on multiple sites at once, this isn’t a good idea. It’s an inefficient workflow and there is a hugh risk of data loss resulting from the need to move and copy files in and out of the folder.

A better way, which many of my professional colleagues and friends do, is to use MAMP or headdress. These two products provide a graphical interface to allow you to set up hosts on your computer and point the host to a folder on your computer. This is great except when you want to start developing with multiple languages, or wish to test SSL or external libraries. It also costs money as the virtual hosts ability is part of MAMP Pro, not the free MAMP edition.

So, although each of these products has their own strengths, is there a way to do what they do without using them. Luckily enough there is, and i’ll talk you through it now.

Assumptions

First off, i’m going to make some assumptions:

1. You’re using a Mac
2. You’re using Mac OS Leopard version 10.5.2 or higher
3. You know what the terminal is and
4. You know what the file paths are in MacOS
5. You’ve turned MAMP off and reset anything setup by Headdress

What you’ll need

• About 30 minutes of time (although you can do this in 2 minutes if you know your way around the shell)
• 4 files
  1. /etc/hosts
  2. /etc/apache2/extra/httpd-vhosts.conf
  3. /etc/apache2/users/USERNAME.conf (where username is the short username for your logon to your computer)
  4. /etc/apache2/httpd.conf
• A text editor. I use TextMate which means I can go into the terminal and type mate /path/to/file to edit the files. I’m going to use this notation throughout so remember to substitute mate with your favoured text editor.

Step 1: Allowing Overrides and Options

Open terminal and navigate to /etc/apache2/users and then list the contents of the folder.

cd /etc/apache2/users
ls -l

You will see a .conf file for each account on your computer. The one you want is the one which matches your short username for MacOS. In my case it is matt.conf

Edit this file in your favourite editor

mate /etc/apache2/users/matt.conf

By default this file will look like this:

<Directory "/Users/matt/Sites/">
    Options Indexes MultiViews
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

You need to change the Options and AllowOverride lines to All, so the file should now look like:

<Directory "/Users/matt/Sites/">
    Options All
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

Save the file.

Step 2: Configuring Apache

Open /etc/apache2/httpd.conf and make the following changes (the line numbers are correct for a fresh install but could be slightly different on your machine. The content remains the same though):

Save the file.

Step 3: Configuring your virtual hosts

Open /etc/apache2/extra/httpd-vhosts.conf. Everything after line 26 is an example of what needs to go in the file and can safely be removed. Alternatively you can comment the lines out with # if you prefer.

Here’s an example of what to put here, assuming:

• My website files are kept in /Users/matt/Sites/themattharris.com (remember this is case sensitive)
• I want to test the server with the DNS name www.themattharris.com

In this case I would put the following entry into the httpd-vhosts.conf file:

<VirtualHost *:80>
   DocumentRoot "/Users/matt/Sites/themattharris.com"
   ServerName www.themattharris.com
</VirtualHost *:80>

Step 4: Make the computer think the domain is on the localhost

Open /etc/hosts. You’ll see something like:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost
fe80::1%lo0 localhost

DO NOT change any of those lines, they’re critical to the workings of your computer. What you want to do is instead add lines to the end of the file, like the following for each of your virtual hosts:

127.0.0.1      www.themattharris.com

• 127.0.0.1 means my computer even when it’s not connected a network
• The domain name should match the one you used for the ServerName (or ServerAlias if you used that) in /etc/apache2/extra/httpd-vhosts.conf

h3. Step 5: Restart Apache

This can be done through System Preferences by turning Web Sharing off then on again. Alternatively, a quicker way is to use terminal and type:

sudo apachectl graceful

and enter you password when prompted.

All being well if you now point to the domain you setup in hosts you will see the web pages on your local machine. To add more virtual hosts just repeat step 3, 4 and 5.

Turning a virtual host off

When you want to visit the live site again you don’t need to change anything apart from edit /etc/hosts and place a # at the start of the line for the domain you want to turn off.

#127.0.0.1      www.themattharris.com

Troubleshooting

If you are having problems and the domains are not working open the apache error log (/private/var/log/apache2/error_log) and see what it says. Quite often you’ll find you’ve got the path in the wrong case and Apache couldn’t find the file.

Let me know how you do with this. In a couple of days I’ll show how to enable SSL on the virtual hosts and also how to compile the GD graphics library to work with MacOS.