Setting up a Virtual Host on Windows 7 with XAMPP 1.8.x (Apache 2.4.x)

        Web Design

WASHINGTON, DC WordPress development company – Herndon, Virginia

I recently got a new work laptop and had to set up my development environments for multiple clients. Part of this set up process involved adding virtual hosts for the local development versions of their websites. Because I don’t do this very often, I had to look up the process. However, I found that some things had changed since the last time I had done it because I am now using a newer version of Apache.

If you’re not aware, a virtual host is used to allow you to use your own custom domain name to access local files through your apache web server. Of course, this domain name is only going to work locally, but something like “clientA.dev” is much nicer than “localhost/work/clients/clientA/dev” or something to that effect. This post will serve as a sort of step-by-step guide for setting up a virtual host on Windows 7 using the XAMPP stack. Note that if you’re using something like WAMP, or if you’re on another operating system, file locations may be different. However, the syntax for the Apache configuration will be the same, as long as you are using Apache 2.4.

The first step is to add a host to your hosts file. If you’re not familiar with this file, it is located at C:\Windows\System32\drivers\etc\hosts (this file has no extension). You may need to enable viewing hidden files and folder in your folder options in order to view this file (Explorer -> Organize -> Folder and Search Options -> View (tab) -> Under “Hidden files and folders” select “Show hidden files, folders, and drives”). Because this file is in your system folders, you will need to modify it as an administrator. To do so, open the start menu and locate Notepad. Right click and select “Run as administrator”. You may need to confirm a UAC prompt. Now, press Ctrl+O (or File -> Open) and select the hosts file.

This file is used to override the IP Address that is resolved when you type a domain name into your web browser. We’re going to use it to make a domain name of your choice point to the local server on your computer, rather than searching for an external IP Address.

By default, the file will contain several lines that start with # but may be otherwise empty, unless you or another program already made changes to it. To begin with, you will need to uncomment the following line (i.e. remove the # from the beginning of the line):

# 127.0.0.1       localhost

That line basically says that when you type "localhost" into your browser address bar, it should resolve that to the local server (which then performs the task of finding the right files to display). To add your custom domain, you will need to follow that example. Beneath that line, add your domain name as follows:
127.0.0.1       clientA.local

Just like with localhost, “clientA.local”  will point to the server on the local machine. Now, you can save and close this file (if you get a message saying that you do not have permission to modify this file, you will need to attempt opening it as an administrator again).

The next step is to set up the virtual host in Apache. Assuming you installed XAMPP at C:\xampp, you will need to open the file located at C:\xampp\apache\conf\extra\httpd-hosts.conf (this file generally does not require administrator permissions). If this is the first virtual host you are adding, you will need to add two entries: one for localhost, so that you can still access your htdocs folder, and one for the new virtual host.

NameVirtualHost *
<VirtualHost *>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
</VirtualHost>
<VirtualHost *>
    DocumentRoot "C:\path\to\document\root"
    ServerName studebaker.dev
    <Directory "C:\path\to\document\root">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

The Options line lets you set certain Apache flags as needed. Your configuration may be different than mine.

Finally, you will need to restart your Apache server in order for the changes to take effect. Now try going to clientA.local in your web browser (or whichever local domain you chose). If you get a 403 Forbidden, 404 Not Found, or 500 Internal Server Error message, ensure that the directory you specified as Document Root and Directory exists and that any htaccess in that folder is not improperly configured.

If you wish to add multiple virtual hosts, you will need to edit the hosts file again, and then add another <VirtualHost *>…</VirtualHost> into the httpd-hosts.conf file (you can just copy/paste the second one above and change the DocumentRoot, ServerName, and Directory accordingly).


About Luis Cuellar

Co-founder and Agile Coach, in charge of leading, managing and coaching agile project teams to achieve a high level of performance and quality in delivering projects that provide exceptional business value to government agencies and nonprofit organizations.
This entry was posted in Web Design and tagged , , . Bookmark the permalink.

Comments are closed.