Virtual Hosts and the proper way to work offline

Like most freelance web designers, I often need to work on an offline version of a website; either at the start of a project while developing the site, or later on when I have to test new functionality without screwing up the live server.

Up till now, I had always been pretty sloppy about offline copies of my client sites. I’d have a bunch of folders under my local install of Apache, and to work on a particular site I would direct my browser to something like http://localhost/myclient/version2/index.php. The trouble with this approach becomes apparent as soon as you start using absolute paths, or PHP includes, or .htaccess redirects, or the tag, or a hundred other things that rely on the path to the website being predictable and constant. I found myself having to remember half-a-dozen different places I needed to change a pathname when I made the site live, or writing complicated switch statements testing whether the site was on live or localhost. Not good.

Hosts

Now, however, I have finally seen the light. Apache Virtual Hosts provide an easy way to host multiple offline versions of your client sites while still accessing them through a simple, canonical URL. It breaks down like this:

• When you type a URL into your browser, the first thing it does is check a special file named HOSTS to see if it already knows where to direct the request
• If the URL isn’t listed, it runs off to the internet to find out where to send you
• BUT… if it is listed in the HOSTS file, the browser doesn’t bother finding out what to do from the internet; instead it goes straight to the IP address listed
• If the listed location is 127.0.0.1, the request is not sent to the internet, but instead goes straight to your local machine’s Apache install

So far so good – we open up the HOSTS file (on Windows XP you’ll find it at C:/WINDOWS/system32/drivers/etc/, on earlier versions of Windows it’s at C:/WINDOWS/), and add a new line at the end for the offline version of our client site:

127.0.0.1    myclientsite.local

I decided to use the made-up TLD .local for all my offline sites, but you could equally well choose to use the real site suffix, or even no suffix at all – they all work.

So now all requests for the URL myclientsite.local will be directed to my own Apache server – but how does Apache know what to do with them?

Virtual Hosts

Apache has a special section of its configuration file that tells it what to do with requests for different domains. You’ll find the file, named ‘httpd.conf’, in the /conf folder under your installation of Apache. Some versions might have removed the relevant section to a separate file named ‘httpd-vhosts.conf’ – mine is under /conf/extra, but if you can’t find yours, just do a search for “httpd”.

Once you’ve located the correct file, look for a section containing the text “NameVirtualHost 127.0.0.1”. You might need to uncomment this line (remove the #); below it you can then add entries for each site you want to serve from Apache, in this format:

  ServerName localhost

  DocumentRoot "C:\Program Files\xampp\htdocs"

This entry tells Apache that requests for “localhost” should be pointed to the folder listed under DocumentRoot (as you can tell, I’m running XAMPP). For our client site, we simply add a new entry:

  ServerName myclientsite.local

  DocumentRoot "C:\Program Files\xampp\htdocs\myclientsite\version2"

And bingo – now all requests for http://myclientsite.local will be automagically routed to the specified folder, and your offline version of the client’s site can use all the features I mentioned above with no online/offline headaches (NB: if your Apache was running when you made the above change, you will have to stop and start it again before the change will take effect).