HOWTO: Setting up a local Apache environment to host multiple independent websites

NOTE: As a best practice, always make a backup copy of your configuration files before attempting to modify them.

SUMMARY:
These instructions describe the steps needed to get install an Apache web server and configure it to server multiple independent websites using virtual host configurations. Where appropriate I’ve tried to include paths formatted both for Mac/Linux (EXT) and Windows (NTFS) file systems.

This was the formal weapon of a Jedi Knight. Not as clumsy or random as a blaster. More skill than simple sight was required for its use. An elegant weapon. It was a symbol as well. Anyone can use a blaster or a fusioncutter—but to use a lightsaber well was a mark  of someone a cut above the ordinary.

 

―Obi-Wan Kenobi

 

Install XAMPP

  1. Download the appropriate XAMPP installed package from the Apache Friends website and run the installer. I usually set the installer to place the xampp installation directory right in the root of the working volume (C: or /)

Add a new entry to your hosts file

  1. Add two entries to your machine’s hosts file.
127.0.0.1 mywebapp
127.0.0.1 mywebapp.localhost

Add files for your new website

  1. If you don’t already one, create a new directory named “dev” in the root of your system volume, then create a new directory in C:dev called mywebapp.
  2. Use your text editor to create a new file. Enter some text, e.g. “Foo bar” or “Hello world!”, save the file here…
C:devmywebappindex.html
/dev/mywebapp/index.html

Configure Apache to host multiple websites

  1. Then navigate to the XAMPP installation directory. Locate the folder named “conf” within XAMPP Apache installation directory. This is where Apache’s configuration files are located.
  2. Using your favorite text editor, open the file named “httpd.conf”, e.g.
/xampp/apache/conf/httpd.conf
C:xamppapacheconfhttpd.conf 
  1. Locate the following configuration directive. If it is preceded by a pound symbol, delete the pound symbol (in this context it indicates a comment) and any antecedent white space characters.

# Include “conf/extra/httpd-vhosts.conf”

Include "conf/extra/httpd-vhosts.conf" 
  1. Save the file, then locate the folder named “extra” within the Apache conf directory. Use your text editor to  open the file named “httpd-vhosts.conf”.
/xampp/apache/conf/extra/httpd-vhosts.conf
C:xamppapacheconfextrahttpd-vhosts.conf 
  1. At the end of this file, add a new node, following the extant XML schema.

Mac/Linux (EXT):

<VirtualHost *:80>
 ServerName mywebapp.localhost
 ServerAlias mywebapp
 ErrorLog "logsmywebapp.local-error.log"
 CustomLog "logsmywebapp.local-access.log" combined
 DocumentRoot /dev/mywebapp
 AddDefaultCharset UTF-8
  <Directory "/dev/mywebapp">
   DirectoryIndex index.html
   Options Indexes FollowSymLinks Includes ExecCGI
   AllowOverride All
   Order allow,deny
   Allow from all
  </Directory>
 </VirtualHost>

Windows (NTFS)

 <VirtualHost *:80>
  ServerName mywebapp.localhost
  ServerAlias mywebapp
  ErrorLog "logsmywebapp.local-error.log"
  CustomLog "logsmywebapp.local-access.log" combined
  DocumentRoot "C:devmywebapp"
  AddDefaultCharset UTF-8
  <Directory "C:devmywebapp">
   DirectoryIndex index.html
   Options Indexes FollowSymLinks Includes ExecCGI
   AllowOverride All
   Order allow,deny
   Allow from all
  </Directory>
 </VirtualHost>
  1. Save the file and restart the Apache httpd service.
  2. Open your web browser (close and reopen if necessary) and navigate to your new website, http://mywebapp. If Apache won’t start, examine its log files.

ADDENDUM: Windows users may also wish to download BareTail and HostsToggle

Published by

Tom Cornyn

I'm just a regular guy. I eat tires.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s