Setting up a Virtual Host with XAMPP

By
brendan
Published: January 26, 2011Posted in: Develop, WebTags: , , ,
Setting up a Virtual Host with XAMPP
http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/digg_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/reddit_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/dzone_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/stumbleupon_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/delicious_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/blogmarks_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/newsvine_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/google_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/myspace_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/facebook_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/yahoobuzz_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/sphinn_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/twitter_16.png

As an intern for NuRelm, there are many things which I hope to accomplish but as an intern I find myself confronted by almost daily hurdles. So to provide the aspect of a beginner in the trade of Web Application Development I want to begin with, XAMPP and configuring settings for a localhost. This is our topic for today.

What XAMPP is a cross-platform, open-source, web-server package that contains Apache, MySQL, PHP and Perl . Anyone interested can download a copy from the developers, Apache Friends. I use XAMPP every day that I work to create a live copy of a website for my own development. If I break anything locally, the only code broken is mine. This allows developers to work simultaneously on multiple tasks without the interference of a site going down due to a bug introduced by someone else.

Configuring XAMPP for the First Time
To begin, download your copy of XAMPP from Apache Friends. A copy can be found at http://www.apachefriends.org/en/xampp.html. Once you have your copy, install it. I installed mine under its default directory of “C:\xampp”. Once installed, we may move on to configuring the Apache server to run your site locally. To do this, locate your “hosts” file. In Windows 7, the file is located by following this route: “C:\Windows\System32\drivers\etc”. Open that file with your text editor of choice and you will find something like the following:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
   127.0.0.1       localhost
#    ::1             localhost


This file outlines how to set everything up, but to create a localhost, simple re-type your own IP (in my case, 127.0.0.1) followed by the name of your DNS. After adding a site for TheIntern, the file would look as follows:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
   127.0.0.1       localhost
#    ::1             localhost
   127.0.0.1    TheIntern.localhost


Note that this file is tab sensitive and you will need to write your code to match the example.

After we have saved our changes to the hosts file, we can move on the editing Apache’s virtual hosts. This can be a little less streamline and where I ran into my own difficulties. To locate your vhosts file, navigate to your XAMPP file and from there, Apache > conf > extra. Within this file, look for “httpd-vhosts.conf” and open with a text editor. You will find:

#
# 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
# 
# 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  block.
#
##
    ##ServerAdmin postmaster@dummy-host.localhost
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.localhost"
    ##ServerName dummy-host.localhost
    ##ServerAlias www.dummy-host.localhost
    ##ErrorLog "logs/dummy-host.localhost-error.log"
    ##CustomLog "logs/dummy-host.localhost-access.log" combined
##

##
    ##ServerAdmin postmaster@dummy-host2.localhost
    ##DocumentRoot "C:/xampp/htdocs/dummy-host2.localhost"
    ##ServerName dummy-host2.localhost
    ##ServerAlias www.dummy-host2.localhost
    ##ErrorLog "logs/dummy-host2.localhost-error.log"
    ##CustomLog "logs/dummy-host2.localhost-access.log" combined
##


This will need to be edited to follow to match when we enter our own site. For our pursoses, we will need to add a directory, as well as a local host. In the short of it, our end file will have this added:


    Order Deny,Allow
    Allow from all
    AllowOverride all
    Options all


    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "C:\NuRelm\TheIntern"
    ServerName TheIntern.localhost
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common


Notice the Directory and Document Root are the same address. They need to be, and their specific address would be the file containing the main index of your site. Next, the ServerName will need to be the name listed as the DNS in the hosts file, in our case “TheIntern.localhost”. Once this is completed, you should be able to start Apache and run your site. Once you start Apache, open your browser of choice and type as the address what you have in your “hosts” file above,“TheIntern.localhost”, and everything should work as planned.

About the Author

Paul's intern, a student from St. Vincent College in Latrobe, Pa.

Author Profile: