Developing with Virtual Hosts on Mac OS X

When developing web pages there is a certain need to be able to create and test a site before placing the files online. The easiest way to do this to use “mock domains” and in this example our mock domain is going to be example.dev. Notice the .dev at the end? That’s just how I prefer to differentiate my local domains. Some people use example.site or even dev.example.tld—it’s up to you. Just don’t use a top level domain like .com or you could find yourself unable to browse the real site.

The first step is to tell your computer where to look for example.dev. If you were to go to example.dev right now in a browser, you would be told that it cannot find the server. To solve this we need to do a little command line magic. Open up Terminal.app and let’s add a few lines to the /etc/hosts file with Nano.

jeff$ sudo nano /etc/hosts
Password:

This will prompt you to enter your password and will then open the file. Push the down arrow and get to the bottom of the file—it’s not too far. You should see three lines, each one starting with an IP address, then a few spaces, then a name. Add the highlighted line below:

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
127.0.0.1       example.dev

Now our mock domain points to the local IP address 127.0.0.1. To save this push Ctrl + x and confirm. Let’s make sure it worked by opening a browser and going to example.dev. This time it should load up the same page as if you went to localhost. If neither work then you probably need to make sure Web Sharing / Apache is on.

The next step will tell Apache what to load when we go to that domain. Head back to Terminal.app and this time we are going to edit the /etc/httpd/httpd.conf file.

jeff$ sudo nano /etc/httpd/httpd.conf
Password:

Enter your password again and the file will open. This file is quite large and has a lot of text in it so the quickest way to get where we want to go to to search. Push Ctrl + w and search for “Section 3: Virtual Hosts” (without quotes). Arrow down through the explanation, reading it if you want, and remove the # from the beginning of the line:

#NameVirtualHost *:80

Below this is where you will add your first Virtual Host. You should see a short description and then an example.

Adding a Virtual Host is easy and almost any Apache directive will work, but we’re going to keep it simple. The first block is used for requests without a listed server. After that is where we add our mock domain so let’s add these lines:

# This is the default block. Domains not listed will go here.
<virtualHost *>
    DocumentRoot /Users/jeff/Sites
</virtualHost>

<virtualHost *>
    DocumentRoot /Users/jeff/Sites/example.com
    ServerName example.dev
</virtualHost>

You can make your DocumentRoot go where ever you want. The default on OS X goes to /Library/WebServer/Documents, but here is what I do:

I reroute the default to /Users/jeff/Sites so when I go to localhost I get a directory listing (useful for testing scripts and stuff not covered under a site). Then, each site that I am developing gets placed in /Users/jeff/Sites/domain.tld and I use this process to point domain.dev to the correct directory.

Once you added your Virtual Host, push Ctrl + x and save. The last step we need to do is easy: Restart Apache. If you are using the standard Mac OS X install just toggle the Personal Web Sharing Preference.

When that is finished go to example.dev and your site should appear!

• January 23, 2007
• ← Previous
• Next →