Work locally with Apache and virtual hosts

Tuesday, 04 March 2008

Most web developers and template creators need to have multiple sites on their local computer that can be accessed any time without modifying apache configuration variables. The easy solution is each site to be in a www root folder sub-directory and access that site like that: http://www.elxis.org/siteA/. Here we will show you how you can easily create virtual hosts on a windows machine to run multiple sites simultaneous each one having its own domain (http://siteA.tld). What we are going to show you applies to everything, not only Elxis CMS. It is also valid for XAMPP. By the way, we advise you not to use XAMPP but install seperately apache, mysql/postgresql and PHP instead. It will help you to understand better how a real web enviroment works. In this guide we will show you the general method of creating virtual hosts that can also be applied to XAMPP.

Locating needed files

For this guide we need to edit 3 files:
1. The Apache configuration file (httpd.conf).
This file is located inside the Apache's installation directory. Example path from my local computer:

C:/Program Files/Apache Software Foundation/Apache2.2/conf/httpd.conf

The above path may vary depending on the location of the windows installation drive on your computer and the apache version.
If you use XAMPP this file should be located inside the XAMPP installation directory. If you can nt find it use search.
2. The Apache Virtual hosts configuration file (httpd-vhosts.conf)
This file is located inside the Apache's installation directory. Example path from my local computer:

C:/Program Files/Apache Software Foundation/Apache2.2/conf/extra/httpd-vhosts.conf

The above path as well as the configuration file name may vary depending on the location of the windows installation drive on your computer and the apache version.
I think XAMPP by default adds virtual hosts inside the httpd.conf file. Sorry, I have never used XAMPP, I have just seen it 2-3 times.
3. Windows hosts file (hosts)
This is a file with no extension hidden inside the windows/system32/drivers/etc/ folder. It contains a list of the system hosts (normally only localhost). Example path for my local computer:

C:/windows/system32/drivers/etc/hosts

Notice: This guide is for Windows 2000/XP/Vista.

Examine your www root folder

Foreach one of you sub-folders/sites inside your www root folder we will create a virtual host. Go to your www root folder where you have your local sites. This by default is:
C:/Program Files/Apache Software Foundation/Apache2.2/htdocs

Or a htdocs folder inside the XAMPP installation directory or any custom path you have set in httpd.conf as DocumentRoot.

In this folder you will have a directory structure like this:
siteA (folder where site A is located in)
siteB (folder where site B is located in)
etc....

For consistency we will use these folder names as domain names.

Add virtual hosts to Apache

Open Apache's Virtual hosts configuration file (httpd-vhosts.conf) with a text editor such as notepad, editpad, pspad etc. Make sure everything is commented by adding a sharp symbol (#) in front of each line. Everything pre-existing there are just samples. First of all write:

NameVirtualHost *:80
 
 
     DocumentRoot "F:/myweb"
     ServerName localhost
 

Where you should replace the F:/myweb (my local DocumentRoot) with the path of your www root folder (normally camed as htdocs).

Now, for each one of your sites (the sub-directories we talked about previously) create an entry like this:

     DocumentRoot "F:/myweb/elxis"
     ServerName elxis.loc
 

When finish your httpd-vhosts.conf file should look like this:

NameVirtualHost *:80

 
     DocumentRoot "F:/myweb"
     ServerName localhost
 
 
 
     DocumentRoot "F:/myweb/elxis"
     ServerName elxis.loc
 
 
 
     DocumentRoot "F:/myweb/elxis2008"
     ServerName elxis2008.loc
 
 
 
     DocumentRoot "F:/myweb/myblog"
     ServerName myblog.loc
 

etc...

Notice that for consistency we used folder names as domain names, you can change this if you wish. We also used the loc as a pseudo-TLD *. You can use anything you wish but we advise you not to use a real one (like com, net, org, gr, fr, etc).

* TLD: Top Level Domain

Prepare Apache to handle virtual hosts

Now that our virtual hosts file is ready we must tell apache to use that file. Open Apache's configuration file (httpd.conf) with a text editor. Locate the line saying about where Virtual hosts file is located in (somewhere in the bottom of the document). If this line does not exist add it!

# Virtual hosts
# Include conf/extra/httpd-vhosts.conf
Uncomment the second line in order to tell apache to include our virtual hosts file:

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

Add virtual hosts to Windows

Open Windows's hosts file (hosts) with a text editor. Inside it you will find a line like this:

127.0.0.1    localhost

Add bellow this line:

127.0.0.1    loc

Finally add all the virtual hosts you created at Apache:

127.0.0.1    elxis.loc
 127.0.0.1    elxis2008.loc
 127.0.0.1    myblog.loc

etc...
Your Widnows hosts file is ready. Save it. Restart Apache. If needed restart Windows.
Now you can access all of your local sites like this:

http://elxis.loc
http://elxis2008.loc
http://myblog.loc

No more sub-directories and ugly urls :-)
Notice: Don't forget to edit your Elxis configuration.php file(s) and change $mosConfig_live_site URL to the new one(s).