Setting up Virtual Hosts on Apache and Windows

Website programmers need the ability to test their products on their local computers.  Testing them on a live website, even if hidden behind the best authentication, can quite often become time-consuming.  Even just a five second file transfer here and there can add up to lost minutes and hours.  Thankfully, it is extremely easy to setup your computer to act as a web server.  Even easier it is to allow your local server to act as a dedicated server for multiple websites.

You should already have an installation of PHP, MySQL and Apache running on your computer.  I use the free AppServ which installs and sets up everything for me.  Another good option is XAMPP.  By default, of course, the root server is located at http://localhost.  Straight out of the box this is great for someone who is working on one website.   But what about multiple websites?  You should strongly consider virtual hosts.  By using one website to build multiple websites  you have to code image paths, include files and additional directories according to the root directory.  This can get very confusing fast especially when it comes time to publish your website.

At the present time I have eight virtual hosts set up.  Some are for live websites I’m currently running.  Some are for testing purposes.  For example, I run Wordpress on it’s own host so that I can test plugins and themes versus the default settings.  I also have a host dedicated to this Wordpress blog so I can test plugins and themes versus my live website.  Doing this ensures that when I publish a new file the website will continue to run smoothly and, unless I want you to, you’ll never notice any changes.

Amazingly, even though I’ve been working with Apache for several years, I’ve never taken the time to really figure out how to get this setup.  To my surprise and great satisfaction it was extremely easy.  First, I had to open Apache’s httpd.conf file.  Look for the section “Virtual hosts” which should be commented out.  I added the following code for my base installation of AppServ:

<virtualHost *:80>
ServerAdmin myname@email.com
ServerName localhost.com
DocumentRoot "C:/AppServ/www/"
</virtualHost>

The DocumentRoot is my default root for AppServ.  I set the ServerName to localhost.com.  Whenever I want to access AppServ I will use the URL http://localhost.com.  I chose this because in AppServ’s index file I have all of my hosts linked here making them quicker to access.  This URL also serves as my home page whenever I open up a new tab in Firefox.

For this website, my personal blog, I also set up a Virtual host by entering the following below the preceeding code:

<virtualHost *:80>
ServerAdmin myemail@email.com
ServerName www.timtrice.com
DocumentRoot "C:/AppServ/www/timtrice/"
</virtualHost>

Notice the only changes I’ve made were my ServerName, which now is set up like a subdomain, and my DocumentRoot.  All of my Wordpress files that operate this website are in the DocumentRoot directory.  Pretty simple, huh?

Now, we have to instruct Windows to understand when we enter these URL’s we are not actually looking for legitimate websites but rather something on our local computer.  I use Windows Vista but I would imagine this will be the same at least since XP.  Fine the file named “hosts” (no extension) located at C:\Windows\System32\drivers\etc.  Open this file using Notepad.  You should see several lines commented out by the pound sign (#) and then something similar to below:

127.0.0.1       localhost

All you do here is append your new virtual hosts information.  For the example above, I just added the .com to localhost and then added my personal blog testing site, www.timtrice.com and assigned it the same IP address.

127.0.0.1       localhost.com
127.0.0.1       www.timtrice.com

Save the file and close it.

After all of this, all you need to do is restart Apache.  You should then be able to fire up any browser and type in either of the two URL’s and be taken to the root directory we assigned to those URL’s in the httpd.conf file.  Furthermore, even though my personal blog files are located in a subdirectory of AppServ, Apache treats those two directories as different hosts.  All I have to do is link any include files or images as if my host subdirectories were actually their own root directories.

Setting up virtual hosts will make life so much easier.  It’s very easy to get lost trying to build multiple websites off one root website and you will inevitable come to problems.  Furthermore, when you decide to go live with your new creation you can rest assured the transition will go much smoother without those annoying PHP errors.