Save Time (and code) Using Virtual Hosts For Local OS X Web Development With mod_rewrite

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 ... portion, add the following:


    DocumentRoot /Users/yourname/Sites
    ServerName localhost


    DocumentRoot /Users/yourname/Sites/devsite
    ServerName devsite

    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:


DocumentRoot /Users/me/Sites/phpMyAdmin
ServerName admin

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.

  1. awesome tutorial!! great work!! thanx!!

    • Roder
    • October 26th, 2007

    If you use firefox, you can just create bookmarks using shortcuts. So if you wanted to use admin, just bookmark the long url and save the shortcut as ‘admin’.. then all you have to do is type admin.

    For example, to get to my root localhost – i just type l

  2. Thanks Roder – I wasn’t aware of the shortcuts in Firefox. That will come in handy. But the real purpose of this is to simplify code and make it easier to migrate a site to a live server after the site is ready to launch – shortening the url you need to type in is just a handy by-product of the whole process.

    Thanks!

  3. I do a similar thing, but I use arbitrarily defined port numbers instead of named hosts. This allows me to have a second machine on my network (or a virtual machine like Windows running under parallels) to view my dev site with root relative links intact.

    First I add the following to my user.conf file to preserve good old standard port 80:

    #protect localhost/default
    Listen 80

    Then I add a configuration like this for each of my dev sites

    #dev site config
    Listen 1200

    DocumentRoot /Users/me/Sites/devsite/

    Options ExecCGI FollowSymLinks
    AddHandler cgi-script .cgi
    AllowOverride all
    Allow from all
    Order allow,deny

    Then I can use “localhost:1200 to access my site on my own computer, or I can browse the site by IP address plus port number on a neighboring computer.

    this allows for easy testing on multiple browsers and platforms w/o uploading to a live development server on the internets.

  1. October 30th, 2007