Setting Up Virtual Hosts for XAMPP

Running a Web server on your computer is a great way to speed up Web site development. By previewing your Web pages directly through a Web server on your own computer you can test out server-side programming like server-side include files, form processing scripts, or database-driven Web pages. However, there’s one problem associated with running a server on your own computer: by default, you only have a single "domain"–http://localhost/–so if you work on more than one Web site you put them all under "localhost" in different directories. This isn’t very real world and can cause problems when using server-side includes and root-relative links. Fortunately there’s a better way.

For set up XAMPP, visit the XAMPP instructions page.

Virtual Hosts

Virtual Hosts give you the ability to "host" more than one  domain on your computer. With a virtual host you can have separate domain names for each of your Web sites: for example, http://clientABC/ for one site and http://clientXYZ/ for another. When you type the URL for the Virtual Host in your Web browser, the browser doesn’t go out onto the internet to find the site, but instead asks for the proper file from the Web server running on your computer.
Adding a Virtual Host is a 2-step process:

1. Add a new entry to your computer’s hosts file. A hosts file can be used to point requests for a domain to a particular IP addressin other words, it lets you re-direct communications to a particular domain. In the case of a virtual host, it can tell the computer to NOT go out on the internet when you type a particular URL like http://clientABC/, but instead look for that particular domain on your own computer.
   
2. Edit the Apache configuration file to accept Virtual Hosts and define the particular Virtual Hosts you want to setup on your computer. The first step above, merely redirects requests from a particular domain to your computer, but this step prepares the Web server on your computer for handling those requests. In this step, you not only provide the name of the Virtual Host, but also tell Apache where the files for the site are located on your computer.
   

Steps in Detail

1. Launch Notepad and open the hosts file located at C:\windows\system32\drivers\etc\hosts. (You may not be able to see the windows folder–some files are hidden by default under Windows. Here are help to make files visible.) On Vista, you’ll also need to have access to change the hosts file. To do that, launch Notepad by right clicking on Notepad from the Start menu and choosing "Run As Administrator." This will allow you to edit and save the file.
   
2. At the end of that file type:
   127.0.0.1      clientABC.local 127.0.0.1 is how a computer refers to itself—it’s an IP address that points back to the computer, kind of like a computer’s way of saying "ME." The second part (clientABC.local) is the "domain" of the virtual host. To visit this domain in a Web browser you’d type http://clientABC.local. You don’t have to add the .local part to the hosts files—you could just as easily add 127.0.0.1 clientABC and access the site in your Web browser with http://clientABC—but I find it helpful for differentiating between a real Web site out on the Internet like clientABC.com, and the test sites I have running on my own computer.
   
3. Save and close the hosts file. That finishes the first part of this process. You’ve prepared your system to handle requests to http://clientABC.local. Now you need to inform the Web server, Apache, how to handle those requests.
   
4. In Notepad open the Apache configuration file located at

C:\xampp\apache\conf\extra\httpd-vhosts.conf 

5. At the bottom of that file add:

   NameVirtualHost *
     <VirtualHost *>
       DocumentRoot "C:\xampp\htdocs"
       ServerName localhost
     </VirtualHost>
     <VirtualHost *>
       DocumentRoot "C:\Documents and Settings\Me\My Documents\clientABC\website"
       ServerName clientABC.local
     <Directory "C:\Documents and Settings\Me\My Documents\clientABC\website">
       Order allow,deny
       Allow from all
     </Directory>
   </VirtualHost>
     

   The first five lines of code turn on the Virtual Host feature on Apache, and set up the C:\xampp\htdocs folder as the default location for http://localhost. That’s important since you need to be able to access the XAMPP web pages at http://localhost/ so that you can use PHPMyAdmin.
   The stuff in yellow represents a single Virtual Host. You’ll add one chunk of code just like this for each Virtual Host (or Web site) on your computer
   You’ll need to modify the stuff highlighted in blue. The first item — DocumentRoot — indicates where the files for this site are located on your computer. The second part–ServerName — is the name you provided in step 2 above: the virtual host name. For example, clientABC.local. The third item — the <Directory> part — is the same path you provided for the DocumentRoot. This is required to let your Web browser have clearance to access these files.
   
6. Save and close the Apache configuration file, and restart Apache from the XAMPP control panel.
7. Start a Web browser and type a URL for the virtual host.

For example: http://clientABC.local/.

You should now see the  Main page for your site.