So, I’ve started using Apache’s dynamically configured mass virtual hosting. This gets me two things. First, I don’t need to make any changes in Apache’s configuration file when I want to setup a new local web application. Second, I now have an easy-to-remember naming convention for sites that are running locally. This works really well for me, but your mileage may vary depending on your specific needs. There are also other tools that can help you accomplish similar results, but I like the simplicity of this in that it doesn’t require anything other than Apache and some DNS settings.

Let me explain the end result first, and then I’ll explain how I got there. For each website I work on I use the subdomain to indicate the environment it’s running in. Using the domain example.org we may have the following environments setup:

• local.example.org – the local copy
• beta.example.org – a semi-publicly available beta
• www.example.org – the live site

The beta and www versions aren’t anything special, just normal websites. For local.example.org I need to have a DNS entry that points to the loopback address, 127.0.0.1. This can either be a publicly available DNS entry (which could be a little awkward) or simply set in your hosts file. I’ve simply made the entry in my hosts file:

127.0.0.1 local.example.org

The downside of this is that you would need to update the host file on each machine that you wanted to run the local.example.org site on. A comprimise would be to run your own recursive DNS service that only your computers used and make the DNS entries there.

This next step only needs to be done once. The dynamically configured mass virtual hosting article explains in detail how to set this up. My Apache configuration looks something like this:

VirtualDocumentRoot /path/to/workspace/%2+/public

Again, your specific configuration may be different. When making a request to http://local.example.org/ the document root would expand to /path/to/workspace/example.org/public. This assumes that you have placed all of your projects in the same location and they all have a similar directory layout (I’m using Zend Framework’s directory layout). I think there’s a way to do this in a way that’s more flexible, but I haven’t had the need. Let me know if you have any questions!

They wanted a smooth user experience. This sort of thing would normally be created in Flash but we decided to use XHTML + CSS + jQuery instead. The first step was to create functional and technical specifications. The specifications (and looking through all of the calculations to make sure we understand everything correctly) were actually a big part of the project. After that we moved into production.

We had two people working on this project – I implemented the functionality in jQuery and Jason implemented the design in CSS. We spent the first two hours working together on getting the semantic XHTML correct. Once we had the semantic XHTML we essentially had an API that we both could use to do our work. It was worth the time upfront getting this part right.

Next we went to our respective corners. I created the jQuery functionality selecting and manipulating the DOM using CSS selectors. Jason used the XHTML structure we had come up with to add CSS and make it all look pretty. The great part was that, since we had come up with the the XHTML structure as the one touch point, we were each able to do our jobs without hardly bothering the other person to ask questions or make changes.

Of course, there were a few changes needed to the XHTML once we started working on our individual pieces – we’re not perfect after all. This is were Subversion came in handy. I could change my local copy and when I was sure I wanted to I could commit that change and Jason could update his local copy merging any of his own changes (or vice-versa). The whole process went quite smoothly and we’re very happy with the results (the “Switch to Cold Water and Save” calculator on the right).