Dynamic vhosts with XAMPP on OS X (with special DNS sauce)

I recently “refreshed” my Mac – I’d accumulated a fair amount of cruft in my attempts to install alternate versions of libraries, and decided that a fresh install of things would clear things up. I kept my wife’s user profile intact, since she hadn’t done anything funny in her user directories, but I decided to blow mine away and just put in the things I needed.

Being a web developer (if only part-time at the moment), I found myself having to remember how I went ahead and set up my testing environment so I could do rapid virtual host set-up, and I decided to write it down for posterity’s sake. This is just my own desired set-up – your own preferences may vary, but perhaps you’ll find this useful!

Some background: I work on sites for many different clients. When it comes to organizing things, I like keeping a folder for each client’s site (with documents, PSD files, etc.), along with a separate folder for the “web root” of the site. I usually keep the web root in Subversion as well (refer to my earlier article for info on setting that up). With the instructions below, I’ll show you how to easily set things up so you can just create a new folder and have XAMPP automatically get you there, without having to edit any configuration files. With the special DNS sauce, I can even type in a URL like “http://jamesmallen.net.imac” and view my local test version of jamesmallen.net.

First off, you need XAMPP. I use the Mac version, available from Apache Friends. I probably could use OS X’s built-in Apache server, but I prefer to keep this separate from my “system” files, so I can easily drop in different versions of things. XAMPP is nice and self-contained. If you decide to go with XAMPP, make sure you disable Apache by unchecking the “Web Sharing” option of the “Sharing” system preference pane.

With XAMPP’s default install, XAMPP will serve pages from /Applications/xampp/xamppfiles/htdocs. This isn’t a very convenient location, and besides that requires root access/su authentication to edit files. I prefer to keep different websites in my ~/Sites folder (which is part of my Time Machine backup), as I like to think of them as works-in-progress. Once you’ve decided where you want to put your sites, you need to create a new configuration file to have Apache include.

Save something like the following as a new file called /Applications/xampp/xamppfiles/etc/extra/httpd-dynamic-vhosts.conf:
UseCanonicalName Off
VirtualDocumentRoot /Users/james/Sites/%-2+

You’ll want to replace “/Users/james/Sites” with whatever folder you’re using to keep all of your different domains. The %-2+ indicates that you want to use all but the very last part of the domain name in determining what directory to use. I leave off the last part, because I want to type “http://mydomain.imac”, but I don’t want to have to include the “.imac” in every directory I create.

Now you need to include above .conf file, so add the following line to the bottom of /Applications/xampp/xamppfiles/etc/httpd.conf:
Include /Applications/xampp/etc/extra/httpd-dynamic-vhosts.conf

If you want to be able to access the default xampp htdocs, you’ll need to create a link to them. The following command in a terminal window will create a symbolic link, letting us keep things separated:
ln -s /Applications/xampp/xamppfiles/htdocs /Users/james/Sites/xampp

Again, replace “/Users/james/Sites” with whatever root you’re using.

Finally, the DNS sauce. This will depend on the capabilities of your router. I have an older Linksys WRT54G, which lets me run the most excellent . If you don’t have a highly-configurable router, I highly suggest you get a cheap one that is compatible with Tomato – it’s wonderful to have all the power of a Linux box in such a low-power, always-on device. Tomato uses dnsmasq for DHCP services as well as DNS caching.

First, set up your development machine to have a static IP (using Tomato, you can do this by clicking on the particular machine in the “Device List”). Next, get into the advanced dnsmasq configuration by clicking on “Advanced,” then “DHCP / DNS” in the Tomato menus. Enable the “Internal Caching DNS Forwarder” if it isn’t already enabled, then add the following line to the Custom Configuration box:
address=/.imac/192.168.1.100

Replace “.imac” with whatever fake TLD you want to create (I used to use “.dev” before I started using multiple dev machines). Make sure it isn’t an ACTUAL TLD, or else you’ll cut yourself off from all sites that end with that! Also, replace the “192.168.1.100” with whatever static IP your dev machine has on the network.

Save the changes, wait for the services to restart, and then fire up XAMPP. I recommend using the XAMPP Control Panel.app to just start the services you need. Test things out by navigating to http://xampp.imac. If all is well, you should see the XAMPP splash page. Congratulations!