Just a very quick article to compile some information I gleaned from various sites on setting up name-based virtual webhosting on your local OS X box.

I needed to set up http://foo.dev/ to do some local web development. Here are the steps to do it:

Turn on Name-Based Virtual Hosts in Apache

Use your favourite editor to edit /etc/httpd/httpd.conf. Uncomment and edit the line that starts with NameVirtualHost to read:

NameVirtualHost 127.0.0.1:80

Just below that line is a section with a “Virtual Host Example”. The example they have there (commented out, of course) is kinda useless. Instead, add this code right after the NameVirtualHost line given above:

<VirtualHost 127.0.0.1:80>
DocumentRoot /Library/WebServer/Documents
</VirtualHost>

This will configure it so that pointing your browser to http://localhost/ will bring up the standard “You’ve installed Apache” page.

Configure Your Virtual Host in Apache

This can be done in the main /etc/httpd/httpd.conf file, or in /private/etc/httpd/users/YOUR-USER-NAME.conf, whichever is preferred. A basic entry would look like this:

<VirtualHost 127.0.0.1:80>
ServerName foo.dev
ServerAdmin your-email@example.com
DocumentRoot /Users/YOUR-USER-NAME/Sites/foo.dev
</VirtualHost>

Make sure you create the ~/Sites/foo.dev directory.

Set up the DNS

Normally, you would just need to add an entry to your /etc/hosts files to say that foo.dev has the IP 127.0.0.1.

But OS X uses Netinfo to handle DNS (at least by default), so if you want to do things The Mac Way, run these commands instead:

sudo niutil -create . /machines/foo.dev
sudo niutil -createprop . /machines/foo.dev ip_address 127.0.0.1
sudo niutil -createprop . /machines/foo.dev name foo.dev
sudo niutil -createprop . /machines/foo.dev serves ’./local’

(You’ll have to enter your password for the first command).

Alternatively, this can all be down through Netinfo Manager. Simply launch the application (it’s in /Applications/Utilities), and click the lock to make changes (requires a password).

Then, use the Finder-like panes to navigate to / › machines › localhost. Click the “Duplicate” button, which will create the entry: / › machines › localhost copy. Select that entry and, in the Property/Value panes at the bottom, double-click on the name property to change the name from “localhost copy” to “foo.dev”.

Click the lock again to close it up, and confirm your changes.

Turn on Apache

Load System Preferences. Go to the “Sharing” panel and turn on “Personal Web Sharing”.

Enjoy

That’s it. You should now be able to open up http://foo.dev/ in your browser.

If you ever need to add a new virtual host, or change the Apache configuration for a host, you’ll just need to stop and restart Personal Web Sharing.