The Idea

When developing websites, sometimes switching between different environments will break the URL Schema that your website is using. If you are referencing things from your website relative to the root (ie. an image path being /images/image.png) and you are running development of that website on your machine from a subdirectory of your webroot, it won’t obviously load. The paths sometimes get skewed and difficult to debug. So my personal schema is as follows:

(Using greymass.com as an example)
Live Website: www.greymass.com
Testing Website: qa.greymass.com
Local Development: greymass.local

Using a structure like this, lets you develop everything as if it was on the root folder of the website. It lets you always reference the root even if it is in a subfolder. Well how do we accomplish this? With VirtualHosts.

Step #1 – Your HOSTS File

Now, if you have a better way to accomplish this or a small program or anything, feel free to share. This is just the method I have been using to redirect traffic, I am not stating it’s the best, its just the method I use personally.

Every computer has a HOSTS file, Windows, *nux, and OS X. This file is a simple tab-delimited file which points a HOSTNAME to an IP ADDRESS. If you were to open your hosts file right now, you’d probably see one entry:

127.0.0.1        localhost

This file is located in a few different areas.

Windows Hosts File: C:\Windows\System32\drivers\etc\hosts

This file under windows is protected by the operating system, so to edit this in windows, you are going to need administrative privileges. Once you find it and get it open, to add a new “VirtualHost”, simply enter a new line of code, the IP address, tab, then the hostname you’d like to give it. I’ll continue on with my example for greymass.com and greymass.local.

127.0.0.1        greymass.local

What this does, is it tells THIS computer (not the rest of the world) that when you type “greymass.local” in your web browser, to goto the IP address listed in the file and pass “greymass.local” as the header. If you tried it right now, it would pull up the default instance of whatever website is on your local machine, because we haven’t told the web server what to do with that now.

Step #2 – Your Apache VHosts Config

On a Windows machine, I’ve used Apache, XAMPP and WAMP to run a bundled apache/mysql/php config, and it works rather well. They are all easy to install and get you started right away. These two programs however are a bit different when it comes to how they hide their config files for apache, so I will break this apart off the bat.

For Stand-Alone Apache:
If you installed Apache into the default folder (“C:\Program Files\”), it would be located someplace like this:
C:\Program Files\Apache\Apache2.2.8\conf\extra\httpd-vhosts.conf

For WAMP Users:
If you installed WAMP into the default folder (“C:\Program Files\”), it would be located someplace like this:
C:\Program Files\Wamp\bin\apache\apache2.2.8\conf\extra\httpd-vhosts.conf

For XAMPP Users:
If you installed XAMPP to its default location, it should be sitting on “C:\Xampp”, which is pretty easy to locate.
C:\Xampp\apache\conf\extra\httpd-vhosts.conf

Now once you’ve found this file, you probably will notice there is a bunch of commented code throughout the file. This stuff has some pretty good documentation, as well as some examples of how to use the VirtualHosts. First things first, you are going to want to uncomment the line as follows:

## NameVirtualHost *:80

To uncomment it, simply remove the two pound (#) symbols in front of it. This line of code is telling the machine that this server is going to attempt to accept any VirtualHost requests on any IP, through port 80. After you uncomment it, the line of code should look as follows:

NameVirtualHost *:80

You will see some examples below this line of code as well, but they have some extra stuff in them we really don’t need for development purposes. The simplest form of a VirtualHost entry is going to be as follows:

<VirtualHost *:80>
   DocumentRoot C:\Path\to\your\docroot
   ServerName greymass.local
</VirtualHost>

Now, save this file to its original location, you are going to want to overwrite the file. Once the file is saved, restart Apache through the XAMPP or WAMP control panel, and you now should be good to go. Try loading up your domain.local in your web browser (greymass.local) if you are using this as an example, and it should load up your web page!