UPDATE: This tutorial was written for OS X 10.4 and parts of it are no longer necessary with OS X 10.5. See this post for details.

Using a few built-in tools in OS X, I’ve found a great way to develop sites as Virtual Hosts on Apache. If you are a web developer working on a Mac and you need to develop sites using root relative paths without adding a base href tag to every page on your site, this tutorial should help tremendously. Here’s how it works:

First, make sure you’ve got PHP and MySQL installed - those are the only two things you should need to install outside of the stock OS X configuration.

Next, follow this tutorial on enabling mod_rewrite on OS X that I’ve written previously.

The rest will involve some basic command line use, but it’s pretty painless. As mentioned in the mod_rewrite tutorial, I highly recommend TextMate for editing the configuration files. If you’re a UNIX purist, there’s always vi.

For this example, create a new folder in your /Users/yourname/Sites folder called devsite and place some files there (a simple html or php file with something to output in a browser will do).

  1. Open your httpd.conf file and enable Virtual Hosts:
    $ mate /etc/httpd/httpd.conf
    Around line 1063 (almost at the bottom of the file), you should find and uncomment this line:
    NameVirtualHost *:80
  2. Open your users.conf file and add a Virtual Host directive:
    $ mate /etc/httpd/users/yourname.conf
    After the <Directory>...</Directory> portion, add the following:

    <VirtualHost *:80>
    DocumentRoot /Users/yourname/Sites
    ServerName localhost
    </VirtualHost>

    <VirtualHost *:80>
    DocumentRoot /Users/yourname/Sites/devsite
    ServerName devsite
    </VirtualHost>

    Keeping the localhost portion at the top will still allow you to view the root of the server and anything in it’s directory at http://localhost.

  3. Open your hosts file and add your new site name to bypass DNS:
    $ mate /etc/hosts
    Make sure these three lines stay at the top:
    127.0.0.1 localhost
    255.255.255.255 broadcasthost
    ::1 localhost
    And add this line after it:
    127.0.0.1 devsite
  4. Restart Apache
    $ sudo apachectl restart

You can now view your local files in your browser at http://devsite.

Let’s step back and look at what we’ve done and why this is so useful.

Most likely, until now, you were viewing local development sites by going to something like http://localhost/~yourname/devsite/fancy/url (or 127.0.0.1 instead of localhost) and doing anything with mod_rewrite meant lots of base href tags and RewriteBase configurations, which in turn meant lots of ../../ paths before your images or included scripts to make things work. Now, viewing the same files in your browser is as easy as http://devsite/fancy/url and all of your paths can begin with a single slash ( / ) meaning it will still work the same when you migrate your site to the live server. Root relative paths are a life saver - and this setup makes it possible.

It’s also useful for quick access to commonly used tools, like phpMyAdmin. What I’ve done is install phpMyAdmin in /Users/me/Sites/phpMyAdmin and set up a Virtual Host like this:

<VirtualHost *:80>
DocumentRoot /Users/me/Sites/phpMyAdmin
ServerName admin
</VirtualHost>

In the /etc/hosts file:
127.0.0.1 admin

And I can always get to my phpMyAdmin install by simply typing http://admin into the browser.

The reason http://admin works is because most operating systems (even Windows!) will look at the local hosts file first before requesting information from DNS servers. Apache is told to handle requests to http://admin through the Virtual Host we set up. And all of this is done without www’s or .com’s.

By now you should realize that you can add as many Virtual Hosts as you like for as many sites as you need. All you need is these three commands:
$ mate /etc/httpd/users/yourname.conf
$ mate /etc/hosts
$ sudo apachectl restart

This can also be done on Windows, but it takes a little more work, and would of course work the same as described above on Linux/UNIX. If anyone would find it useful, let me know and I’ll post a new tutorial on the same method for Windows developers.

Share This