Reference local directory as website

Table of contents

Updated: 20 April 2010

Introduction

This tutorial will outline the different ways to configure Apache to reference a local directory on your machine as a local website ((localhost). In this way you may reliably test your website development code before uploading to your hosting server.

The following options are possible:

  • Configure the Document Root for the Apache server
  • Setup an Alias for a local directory
  • Setup and configure a Virtual Host for a local directory

Which technique to choose will depend on the nature of your development. For most projects, the Virtual Host setup is the best all-around solution. Apache Virtual Hosts will most closely represent how your website will appear and behave online.

Requirements

This tutorial assumes that the Apache HTTP Server has been setup correctly as outlined in our Install and Setup Apache/PHP tutorial.

This tutorial makes the following assumptions:

  • Apache is installed in the C:\www\Apache2\ directory
  • The localhost URL is referenced at http://localhost/

If your installation folder or localhost URL differ from either of these, be sure to substitute appropriately.

Configure the Apache DocumentRoot

Note: The directory C:\www\Apache2\ will be referenced in the following section. If your installation folder differs from this, substitute appropriately.

By default, the document root for Apache is defined as C:\www\Apache2\htdocs\. This means that when you reference the URL http://localhost/ you are, in fact, viewing the index.html file found in the \htdocs\ directory.

Of course, organizing all of your web development projects in Apache's \htdocs\ directory is neither practical nor very clean.

So letís assume that the root directory of your web development is D:\web\ and each web project has a sub directory within the D:\web\ directory. If we now setup the document root for Apache to be D:\web\ it will become very convenient to reference each individual web project.

Edit the httpd.conf file found in the C:\www\Apache2\conf\ directory.

DocumentRoot section (httpd.conf: approx line 230)

# DocumentRoot: The directory out of which you will serve your
...
DocumentRoot "D:/web"

After restarting Apache, we can view the effects of our new document root:

Each sub directory you create in the D:\web\ directory will automatically become a new website.

Note: To avoid a "Page Not Found" error, an index.html (or index.php) file should exist in each referenced directory.

Configure options and access for DocumentRoot

To configure options and access rights for your DocumentRoot directory, setup a Directory tag immediately below your DocumentRoot definition.

DocumentRoot section (httpd.conf: approx line 230)

# DocumentRoot: The directory out of which you will serve your
...
DocumentRoot "D:/web"
<Directory "D:/web">
   Options Indexes FollowSymLinks
   AllowOverride All
   Order allow,deny
   Allow from all
</Directory>

Note: See httpd.conf (~ line 250) for more information on Directory tag values.

Setup an Apache Alias

Creating aliases is a quick and easy way to reference any local directory on your machine without being dependent on the document root directory.

Edit the httpd.conf file found in the C:\www\Apache2\conf\ directory.

Alias section (httpd.conf: approx line 480)

# Aliases: Add here as many aliases as you need (with no limit). The format is
...
Alias /freeangle "D:/web/freeangle"

After restarting the Apache web server, we may now view the local directory as a website through the URL address http://localhost/freeangle/.

Note: Alias names are case-sensitive making the associated URL address case-sensitive as well. For example, http://localhost/FreeAngle/ will not work.

Note: To avoid a "Page Not Found" error, an index.html (or index.php) file should exist in the referenced directory (D:\Web\freeangle\).

Note: If the alias name is slash-terminated, then the directory name must also be slash terminated. If the alias name omits the trailing slash, the directory name must also omit it.

Configure options and access for Alias

To configure options and access rights for your Alias directory, setup a Directory tag immediately below your Alias definition.

Alias section (httpd.conf: approx line 480)

# Aliases: Add here as many aliases as you need (with no limit). The format is
...
Alias /freeangle "D:/web/freeangle"
<Directory "D:/web/freeangle">
   Options Indexes FollowSymLinks
   AllowOverride All
   Order allow,deny
   Allow from all
</Directory>

Note: See httpd.conf (~ line 250) for more information on Directory tag values.

Setup and configure an Apache VirtualHost

As stated before, setting up Virtual Hosts is the recommended option as it provides a much closer representation of a website online.

Edit the httpd.conf file found in the C:\www\Apache2\conf\ directory.

VirtualHost section (httpd.conf: approx line 970)

# VirtualHost: If you want to maintain multiple domains/hostnames on
...
NameVirtualHost 127.0.0.1:80

<VirtualHost 127.0.0.1:80>
   DocumentRoot "D:/web/freeangle"
   ServerName www.freeangle.moc
</VirtualHost>

Note: The value localhost may be substituted in place of the IP 127.0.0.1. Iíve used the IP notation only because it is listed this way in the hosts file (as weíll see in the section below).

Note: If the port of your Apache server is not the default 80, the port number must be specified in both the NameVirtualHost definition and the VirtualHost definition.

Note: Almost any value can be used for the ServerName of the VirtualHost. I've used the .moc domain (www.freeangle.moc) because it doesn't exist thus avoiding any possible conflict with a real website online.

Note: If you have a Proxy server enabled for your internet connection you may need to define the ServerName (www.freeangle.moc) in the list of URL addresses the Proxy server should ignore.

Configure options and access for VirtualHost

To configure options and access rights for your VirtualHost directory, setup a Directory tag within your VirtualHost definition.

VirtualHost section (httpd.conf: approx line 970)

# VirtualHost: If you want to maintain multiple domains/hostnames on
...
NameVirtualHost 127.0.0.1:80

<VirtualHost 127.0.0.1:80>
   DocumentRoot "D:/web/freeangle"
   ServerName www.freeangle.moc
   <Directory "D:/web/freeangle">
      Options Indexes FollowSymLinks
      AllowOverride All
      Order allow,deny
      Allow from all
   </Directory>

</VirtualHost>

Note: See httpd.conf (~ line 250) for more information on Directory tag values.

Configure hosts file

Search for a file named hosts (no file extension) on your computer. Normally, found in the C:\WINDOWS\system32\drivers\etc\ directory. Edit the hosts file with any standard text-editor (Notepad).

# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# ...
#
# For example:
#
#   102.54.94.97   rhino.acme.com   # source server
#    38.25.63.10   x.acme.com   # x client host

127.0.0.1   localhost
127.0.0.1   www.freeangle.moc

For each VirtualHost created in the httpd.conf file, a new line must be added to the hosts file specifying the correct ServerName (www.freeangle.moc).

After restarting the Apache web server, we may now reference the new development website at the URL address http://www.freeangle.moc/.

Note: To avoid a "Page Not Found" error, an index.html (or index.php) file should exist in the referenced directory (D:\Web\freeangle\).

Note: If you have a Proxy server enabled for your internet connection you may need to define the ServerName (www.freeangle.moc) in the list of URL addresses the Proxy server should ignore.

User comments

Add your comment

*
*