How to Set Up Virtual Hosts on your Local Host

In this screencast I walk you through how to set up virtual hosts on your local development server, specifically Wampserver on Windows.

As promised in the screencast I am appending a written version of the process on this post for your reference.

Setting Up Virtual Hosts on Wampserver in Windows

First create a new folder for your website under wamp/www and then create a test index.php file in there. Navigate to it in your browser to make sure that it works.  Now we want to set things up so that we don’t have to type http://localhost/mylocalsite every time we want to view our site.  Instead we can just type http://mylocalsite and it works.

There are two steps to this, the first is on the Windows end of things and the other is on the webserver end of things.  On the Windows end we need to edit the hosts file to include our virtual domains.  To do this, navigate (in Windows Vista) to Windows->System32->drivers->etc, and open the hosts file for editing.  In Vista, and perhaps also in Windows 7 (I haven’t tried it on Windows 7 yet) you have to first give the current user the permissions to edit this file or you’ll be going around in circles trying to save your changes.  Make sure you’re logged in as admin.  Right click on the file and choose Properties. Then go to the security tab and edit the security settings to allow the current user permissions to edit the file.

OK, now that that’s done, we want to go ahead and add a line to the hosts file assigning the localhost IP to our virtual domain name, something like this:


127.0.0.1       mylocalsite

You can add as many domains as you want here using the same syntax.

This can really be anything you want it to be. Best choice is to not add .com or any extension that exists in the real web world out there because you may not be able to access that outside website when you need to.

Next step is to now work on the webserver side by editing the httpd.conf file in Apache.  To do this, click on the wampserver icon, then Apache, and then click on the httpd.conf file which should open in Notepad.  You can also navigate to this file directly by accessing wamp->bin->Apache->Apache2.2.11->conf.  The Apache2.2.11 may be named differently for you depending on the version of Apache.

In some tutorials you’ll see that they tell you to add some code to the end of this httpd.conf file, but ideally you don’t want to do that.  There is a neater better way to do this by using an include file that’s already present.  First find the line that refers to the vhosts include file.  Fastest way is to search for for the text “vhosts” in the httpd.conf file.  Find the lines:


# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

Uncomment the second line by removing the # sign so it reads:


# Virtual hosts
Include conf/extra/httpd-vhosts.conf

The next thing to do is to open the httpd-vhosts.conf so we can edit it.  This will be in wamp->bin->apache->Apache2.2.11->conf->extra.  Open the httpd-vhosts.conf file in your favorite code editor, or even in notepad.  You will see some sample code there for configuring your virtual hosts.  Edit that sample code (the one in the <VirtualHosts> brackets to your configuration.  In my case, since I want to point to my drupal6 domain as I referenced it in hosts, I will edit the code to read:


<VirtualHost *:80>
ServerAdmin admin@localhost
DocumentRoot "C:/wamp/www/"
ServerName localhost
ServerAlias www.localhost
ErrorLog "logs/localhost-error.log"
CustomLog "logs/localhost-access.log" common
</VirtualHost>

<VirtualHost *:80>
ServerAdmin admin@mylocalsite
DocumentRoot "C:/wamp/www/mylocalsite/"
ServerName mylocalsite
ServerAlias www.mylocalsite
ErrorLog "logs/mylocalsite-error.log"
CustomLog "logs/mylocalsite-access.log" common
</VirtualHost>

Save the file and close it, and then make sure to restart Apache.

You should now be able to navigate to your local site directly by typing http://mylocalsite in your browser.  In my case I navigate to http://mylocalsite and it should work.

I hope this helps you out when developing your own sites locally.

31 thoughts on “How to Set Up Virtual Hosts on your Local Host”

  1. I’m a bit confused on this concept. Does this mean It will be easier to build a site locally by using and testing with the correct links? Does the .com, .net etc get added on later? Sorry I’m a biit of a V server noob atm

    Reply

    1. Well, if you think about a regular hosting environment where you have more than one site, each site sits in it’s own folder, but when you load the site you don’t see the folder path from the server, just the domain name. This is basically what we’re replicating when we set up virtual hosts. This becomes particularly important with relative links, and when you’re working with frameworks such as Zend or CI which set routes to access the different controllers and views etc. It’s generally good practice to create virtual hosts especially if you plan to migrate the site to a live shared server. Hope this makes a little more sense.

      Reply

  5. Hi Mary
    I use Fedora 11 on a PC, followed your and the Apache instructions in linux httpd.conf and for /etc/hosts and run into problems.

    Can access the new virtual host with the directives as per the apache site.
    But where 127.0.0.1 used to put me straight into Drupal site setup but now I get Drupal message “Site is off line” .
    Got me puzzled.

    Reply

  6. Hi Mary, I wonder how I can publish a site from my local server to its final place on the www.
    (on it’s own domene and with the right databases)
    Or is it just that plain simple to use ftp and publish the whole file from the wamp/www into its own domene?

    Reply

  7. Super helpful…

    I’m using MAMP with Snow Leopard and have been trying to get some advanced virtual host stuff setup for a few weeks now (Rails+Passenger+MAMP). There’s so much documentation on this, but your screencast is clear and easy to follow…

    Haven’t tried setting things up yet (maybe tomorrow), but I have a feeling things will go much smoother after watching this cast… thanks!

    Reply

  8. Mary, thanks to your tutorials I found on youtube I’ve managed to set up local hosting and develop a site using wordpress. Thank you for putting this online to help people out.

    I can view the site when I type http://mysite
    into my browser but how can I let the person I’m building it for see how the site is progressing.

    Do you have knowledge of how to let someone remotely view your localhost site. I’ve searched everywhere for this answer and some say change firewall settings etc; but i’d thought i would ask you first.

    Thanks again

    Reply

  9. Mary, great site! Tons of useful information. Working in Win 7 and having troubles with my virtualhosts working. Here are the subs from my httpd-vhosts.conf and hosts file

    hosts:
    # 127.0.0.1 localhost
    # ::1 localhost
    # 127.0.0.1 mysite

    vhosts:

    ServerAdmin admin@localhost
    DocumentRoot “C:/wamp/www/”
    ServerName localhost
    ServerAlias http://www.localhost
    ErrorLog “logs/localhost-error.log”
    CustomLog “logs/localhost-access.log” common

    ServerAdmin admin@mylocalsite
    DocumentRoot “C:/wamp/www/mysite/”
    ServerName mysite
    ErrorLog “logs/mysite-error.log”
    CustomLog “logs/mysite-access.log” common

    Any reason you can see why they won’t work? They work fine from the \\localhost\mysite method

    Thanks in advance for any pearls of wisdom

    Mike

    Reply

  10. Excellent tutorial … you hit on areas that other descriptions fudge over (eg. proper use of the included ‘extra’ file) and also how to set it up so that the virtual site is a subfolder of the regular site.

    Reply

  11. Hi Mary,

    Thank you for the clear and easy to follow screen cast’s on YouTube!

    I have about 20 WordPress installs set up locally in WAMP. Setting up (logical) virtual hosts for each will now be simple thanks to you.

    Do you have any advice on how to also do this with sub domains (locally)?

    I’d like to set up a local WordPress Network using Multisite in WAMP.

    So I’d create a new folder in WAMP named myexamplesite – this would be the main website for the Multisite Network.

    Then I would like to create two more sites within the WordPress Network/Multisite set up. At this point, these would be created from within WordPress itself.

    Those two names would be:

    subsite1.myexamplesite
    subsite2.myexamplesite

    I would grateful for any advice that would extend on what you’ve already taught by adding sub domains to virtual hosts.

    Thanks!

    Reply

    1. Actually, I guess a better question would be:

      How can we set up a wildcard domain for any specific virtual host previously set up?

      Thanks again!

      Reply

  12. Hey Mary thanks for tutorials. I’m trying to know how to install another wordpress site on my wampserver. I have one site already in http://localhost/wordpress but i dont know what to do to have another wordpress site and where to install it (in which folder i mean) any help is welcome!
    cheers.
    R

    Reply

    1. Rodrigo

      You just create another folder in the same location as your wordpress site folder, call it something like wordpress2 (wamp/www/wordpress2) and install wordpress there. So you’ll have http://localhost/wordpress2. Pretty straightforward. If you want to you can then set up a vhost for it using the same process as shown in the video. Let me know if you run into any troubles.

      mary

      Reply

  13. Mary: I’ll try that and i’ll let you know. I have my wordpress folder in C:\wamp\www (not sure if it’s the best place to store it)
    Merci
    R

    Reply

    1. Rodrigo
      It’s fine to have it there, it just means you have your first wordpress site in the “root” of your directory. To make any other sites you just need to create separate folders for them, e.g. wamp/www/wordpress2, wamp/www/drupal, wamp/www/someothersite, etc

      mary

      Reply

  14. So i made a second folder called wordpress2 and installed the wp files. Now if i want to go to http://localhost/wordpress2 it gives me an error:

    “here doesn’t seem to be a wp-config.php file. I need this before we can get started.

    Need more help? We got it.

    You can create a wp-config.php file through a web interface, but this doesn’t work for all server setups. The safest way is to manually create the file.

    Create a Configuration File”

    what should i do?

    Reply

  15. @Rodrigo – that notice (error) is WordPress letting you know that you need to configure a wp-config.php file.

    You can do this manually or simply click the “Create a Configuration File” button and WordPress will take of this for you.

    You’ll need your database name and username, etc to fill out the form and complete the process.

    There are many videos on YouTube.com that walk through the process of installing WordPress on WAMP.

    Here’s one as an example: http://youtu.be/uShBYyy0cbw

    Hope that helps! – Alex

    Reply

  18. Hi Mary,
    I watched your tutorial on how to set up a virtual host on local host and found it very helpful. I followed your steps, and installed WordPress into my site directory. Then, when I type “mysite”(directory: “wamp/www/mysite”) in the browser, the page that sets up the wp-config comes up. However, after I fill it out, I get an “error establishing a database connection” page. I spent many hours trying to figure this out now with no success. Looking into other forums, some have mentioned adding “Listen *:80” to Apache’s httpd.conf file so it will allow more than one website…but this didn’t seem to work either. I was just wondering if you had knowledge of this issue. Thanks for the great video tutorials!

    Reply

    1. Jake
      The fact that you’re getting that far makes me think that your virtual hosts setup is fine. This sounds more like a problem on the database end of things. Are you sure that you are entering the correct database credentials? Have you created the database and assigned a user to it with all the correct privileges?
      mary

      Reply

      1. Mary,
        Thanks for the reply! When I type in localhost in my browser, the WAMP Server Configurations (index) page opens, that has a section for “Projects” showing my ‘wamp/www/mysite’ directory folder. Below that is another section for “Virtual Hosts” that is empty. Shouldn’t the folder be in “Virtual Hosts”? I was looking at this site: (http://www.trailheadinteractive.com/creating_multiple_virtual_sites_a_single_apache_install_windows_xp) …which seems to use a different method then your tutorial. Rather than creating a folder inside the ‘wamp/www’ directory, they seem to add a virtual host folder like this: ‘wamp/mysite’… in the same folder the www or local host file is in. Do you think this would be a more appropriate method? If not, could you explain why? I am new to using a development server and web development in general, and want to make sure I am doing this correctly before I get in too deep.

        Reply

        1. Jake
          I shared the method I use that works for me. I’m sure there are other ways of doing it out there, but this is the one I use that works for me. The method mentioned in that link is exactly the same as the one I outline here, except that they opt to create the other site folders outside the www folder. I find it tidier to keep all my sites inside the www folder and that seems the more common practice. Either way the method of setting virtual hosts seems the same, as long as you point the virtual host to the correct location where your site files are.
          The problem you’re having is more related to the database connection, rather than the virtual hosts.
          Also, as mentioned in the video, always remember to restart Apache whenever you make these types of changes

          mary

          Reply

Leave a Reply