A virtual host is a domain name that is registered only on your personal computer, and points to a directory on your computer. It’s a great way to simulate a web server environment while you are developing. This tutorial will explain how to set up a virtual host on your Windows 7 machine.
Keep in mind that this tutorial assumes that you already have a server stack such as WAMP or XAMPP set up on your computer. If you do not, you can easily download and install either of them before starting this tutorial.
1. Configure your hosts file
Find the “hosts” file located in C:\Windows\System32\drivers\etc\. Open it with NotePad or a similar program. At the end of the file, add a line that looks like this:
127.0.0.1 example.dev
You should, of course, replace “example.dev” with the domain name that you would like to use for your local folder. Also, double-check that the IP address for localhost is 127.0.0.1. If it is not, you will need to update your entry so that its IP address matches the localhost entry’s IP address.
2. Enable Virtual Hosts in your httpd.conf file
For some reason Apache often has virtual hosts disabled by default, so you’ll need to manually enable them. Depending on the server stack that you have installed, you’ll find the file in different locations.
WAMP | After starting up WAMPSERVER, simply left-click on the green tray icon, click “Apache,”” then click “httpd.conf.” |
XAMPP | You should find your file in C:\xampp\apache\conf\extra\httpd-xampp.conf. Note that the XAMPP file is actually named httpd-xampp.conf. Also, if you have installed your XAMPP files in a different location than the C: root, you’ll need to look there. If all else fails, run a search for httpd-xampp.conf. |
Once you have the file open, search for a line that reads “# Virtual Hosts.” Remove the pound symbol from the line directly underneath it (in WAMP, the line underneath it will read “Include conf/extra/httpd-vhosts.conf”). It doesn’t matter if the line is slightly different for you; just remove the pound sign regardless. Also, copy and paste (or write down) the path in this line, as you’ll need it for the next step.
3. Input your virtual host information into httpd-vhosts.conf
Remember that path that I told you to save in the last step? This is where you’ll need it. In case you forgot to save it, I’ve lised the usual paths below.
WAMP | C:\wamp\bin\apache\Apache2.2.21\conf\extra\httpd-vhosts.conf |
XAMPP | C:\xampp\apache\conf\extra\httpd-vhosts.conf |
Open this file with Notepad. Now comes the slightly more complicated part. Your file will probably look something like this:
# # Virtual Hosts # # If you want to maintain multiple domains/hostnames on your # machine you can setup VirtualHost containers for them. Most configurations # use only name-based virtual hosts so the server doesn't need to worry about # IP addresses. This is indicated by the asterisks in the directives below. # # Please see the documentation at # <url:http: httpd.apache.org="" docs="" 2.2="" vhosts=""> # for further details before you try to setup virtual hosts. # # You may use the command line option '-S' to verify your virtual host # configuration. # # Use name-based virtual hosting. # NameVirtualHost *:80 # # VirtualHost example: # Almost any Apache directive may go into a VirtualHost container. # The first VirtualHost section is used for all requests that do not # match a ServerName or ServerAlias in any <virtualhost> block. # <virtualhost *:80=""> ServerAdmin webmaster@dummy-host.example.com DocumentRoot "c:/Apache2/docs/dummy-host.example.com" ServerName dummy-host.example.com ServerAlias www.dummy-host.example.com ErrorLog "logs/dummy-host.example.com-error.log" CustomLog "logs/dummy-host.example.com-access.log" common </virtualhost> <virtualhost *:80=""> ServerAdmin webmaster@dummy-host2.example.com DocumentRoot "c:/Apache2/docs/dummy-host2.example.com" ServerName dummy-host2.example.com ErrorLog "logs/dummy-host2.example.com-error.log" CustomLog "logs/dummy-host2.example.com-access.log" common </virtualhost> </virtualhost></url:http:>
You’ll need to tackle this job by completing all of the tasks below.
Make sure that the file contains NameVirtualHost *:80
First, if you do not see a line that says “NameVirtualHost *:80, you’ll need to add it. Do so in an area above the VirtualHost examples (as demonstrated above).
Create a localhost entry
Next, you need to add a line to the bottom of the file; it ensures that you’ll be able to access localhost even after you set up your virtual host.
<virtualhost *:80=""> ServerName localhost DocumentRoot "c:/wamp/www" </virtualhost>
The document root in the above line MUST match the web directory for your apache installation. Here are the common ones:
WAMP | c:/wamp/www |
XAMPP | c:/xampp/htdocs |
Some people say to use quotes around it; others say the opposite. I’m not sure that it matters either way.
Create your virtual host entry
Finally, you are to the part of the tutorial where you get to actually set up your virtual host. Just like in the previous section, you’ll need to add a line that looks like this:
<virtualhost *:80=""> ServerName example.dev DocumentRoot "c:/wamp/www/example/" </virtualhost>
The directory for your virtual host MUST BE INSIDE your web root (www or htdocs) in order for it to work. It can be inside a folder that’s inside a folder that’s inside a folder in the web directory; it just has to be a subdirectory of it at some level. Of course, it’s perfectly possible to use a directory that is NOT inside your web root, but it will take some additional configuration steps. If you are interested in doing that, refer to the section at the end of the file titled “How do I use a directory outside of the web root?”
When you have finished entering your virtual host information, save and close the file.
4. Restart Apache
The process for restarting Apache is different for WAMP and XAMPP. Of course, you could always restart your computer to accomplish it. Check out some specific instructions below, though.
WAMP | Left-click on the green WAMPSERVER tray icon and select “Restart All Services.” After fluctuating between orange and/or red, it should shortly turn green again, indicating a successful restart. If it does not turn green again after a while, it means you have made a mistake somewhere in your httpd.conf file or httpd-vhosts.conf file. Retrace your steps to discover the error. If it did turn green again, you should be set to go. Try typing your virtual host address into your browser! |
XAMPP | Use your XAMPP Control Panel to stop Apache and restart it. |
Additional Q and A.
Q. How do I use a directory outside of the web root for my web project location?
A. All you need to do is let Apache know that it has the privileges to do this. Enter the following code into your httpd-vhosts.conf file directly before the section that includes the NameVirtualHost *:80 line.
<directory c:="" vhosts=""> Order Deny,Allow Allow from all </directory>
Q. How can I set up virtual hosting on Linux?
A. In the near future I plan to put out a tutorial for setting up virtual hosts on Ubuntu 12.04. I’ll update this section with a link when I have posted it.
Q. Can I use any TLD (.com, .net, etc.) that I want for a virtual host?
A. Yep, you certainly can! You can make up any domain name that you want.
Q. Can I use a virtual host domain name that is already in use online?
A. Yes, you can even use google.com if you want. As discussed in the following question, though, you’ll need to keep in mind that you won’t be able to use www before your virtual host domain unless you set up your DNS settings to allow it.
Q. Will my domain with with a www before it?
A. No. Unless you adjust your DNS settings to allow it, a www will not resolve to a virtual host. You’ll need to omit that part and simply use http://example.dev for your virtual host.