Victor Walch Michnowicz

is a web application developer

Setting Up Virtual Hosts in XAMPP on Windows 7 August 18th, 2010

Why Do This?

If you work on many websites locally you are bound to accumulate many sites within your own “projects” directory. For me, all my sites are located in C:\xampp\htdocs\portfolio\sites\. I got tons of stuff in there. And when I open the web browser I have to navigate to something like http://localhost/portfolio/sites/myawesomeproject/index.php.

Eventually this started bothering me. The problem is that the directory structure changes when the site goes live. In testing I would type in http://localhost/portfolio/sites/myawesomeproject/index.php, but once the site goes live it would be something like http://myawesomeproject.com/index.php. The root directory on the live site is totally different than the root directory on the local site.

This started posing some AJAX problems with my CodeIgniter sites. I don’t feel like getting into the details, but the fact that you can’t make AJAX requests using absolute URLs, along with CodeIgniter’s odd URLs, made things a pain. Yeah, I could get annoyed and solve the problem. But the fact is that setting up Virtual Hosts was way easier. Albert would be so proud…

A clever person solves a problem. A wise person avoids it.—Albert Einstein

The Steps:

Step 1

First, right click on your favorite text editor (Notepadd++, just in case you forgot ☺) and click “run as administrator.” Proceed to to open C:\xampp\apache\conf\extra\httpd-vhosts.conf.  Add the following code and then save the file. Be sure to substitute the path to your project directory with the one I provided.

<VirtualHost *:80>
	ServerAdmin awesome@myawesomeproject.com
	DocumentRoot c:\xampp\htdocs\projects\myawesomeproject
	ServerName localhost
</VirtualHost>

Step 2

Next, open up C:\Windows\System32\drivers\etc\hosts with the same text editor (it is import hat that the text editor is running as administrator). At the bottom of this file add the following code and then save the file.

127.0.0.1	myawesomeproject.localhost

Step 3

Now all that is left is restarting Apache. After that is done, navigate to http://myawesomeproject.localhost/ and enjoy the awesomeness!


blog comments powered by Disqus