Setting up Drupal and Wordpress using XAMPP for a Web Development Environment: Part 1

I've been doing software development for longer than I can remember and a Drupal Software Developer for years. And along the way, I've used a number of solutions for local development. From a combination of half-assed packages that were supposed to simulate a true Linux environment on windows, to VM Ware installations, to completely switching my desktop to Linux, I've tried it all. Now I'm on a Mac, and I have been for years. There are several reasons why I find the OS X environment more friendly for development, but that is not the point of this post.

It became clear to me recently, that a number of my fellow open source developers are living with painfully inadequate development environments that cause headache, incompatibility and wasted time.

There is really no need for this. :)

A very simple solution is one provided by our Apache Friends (http://www.apachefriends.org).

Their most popular project, as it clearly states on the home page, is XAMPP. XAMPP (http://www.apachefriends.org/en/xampp.html) is an easy to install Apache distribution containing MySQL, PHP and Perl that is compatible with Windows, Linux and OS X. While this is a convenience for anyone looking for a local development environment solution, it is important because this allows the entire team to work within a somewhat consistent environment on each member's respective machine.

The download and initial setup is quite painless. Even if you are just starting out with development, you will have no problem installing the basic package.

Now, I'm not writing this to tell you how easy it is to install this project. I wanted to share a few tips and tricks that make the most out of this tool for local development.

More often than not, if you are setting up an environment like this, you likely have more than one site or application that you want to build. Out of the box, the default installation has support for this, but it may not be entirely clear how to make the proper configuration changes. We want to configure Apache to support a new site WITHOUT modifying the potentially useful XAMPP tools that are included with the installation (these are the tools you will find at http://localhost after installation).

  1. Create a common base directory that is consistent across all of your team's development environments. This will hold the respective directories for each site.
  2. Configure your vhosts in a separate file that is easy to backup during upgrades or re-installations.
  3. Include this vhosts file in your httpd.conf configuration.
  4. Don't forget to update your hosts file and reload Apache.

Enough of this high level stuff. Let's get into the details.

Creating a Common Directory

I always recommend creating a folder called 'www' at the root of the development machine. Any developer, on any platform, using any tool set will be able to quickly navigate to the desired files when switching between machines. This is useful when you are helping troubleshoot with a fellow developer. When adding this directory, make sure that the proper permissions are set (varies by system) to allow the files to be served.

Inside this root web folder, create (or move existing) directories for each site you will be accessing.

Configuring Virtual Hosts

To handle multiple sites or applications on our single instance of Apache, we want to take advantage of Virtual Hosts. This is much improved over the alternative of using different folders within the same host for each site or application. In the XAMPP installation, you will find a file that is included, specifically for adding virtual host information. I'll refer to virtual hosts as simply vhosts.

This is normally located here (but will vary by system):

xampp/xamppfiles/etc/extra/httpd-vhosts.conf

Depending on the installation, the example vhost entries in this file may or may not be commented out. I usually tell people to comment the lines out (using # at the beginning of each line), so they are available as a reference if needed.

Let's use the following example to configure our vhost file.

I have a WordPress site, a Drupal site and a seperate PHP test site where I debug chunks of PHP code.

Before I add entries in my vhost for these specific sites, I want to ensure that Apache can access my new 'www' directory correctly. The individual folders for each site should also be moved here or created before continuing. For this example, we will have the following:

drupal6
wordpress26
php_scripts

We'll make the following one-time addition to the file (I've copied surrounding lines for context within the file):

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

<VirtualHost _default_:80>
DocumentRoot /Applications/xampp/xamppfiles/htdocs
</VirtualHost>

<Directory /www>
Options all
AllowOverride all
Order allow,deny
Allow from all
</Directory>

#
# VirtualHost example:

Now that this is complete, Apache should have no problem serving up content from your new 'www' directory, and we haven't sacrificed the standard Xampp pages that are available at http://localhost on the development machine.

Now, add the entries in the vhost file for each of our sites mentioned above (WordPress, Drupal, PHP Test):
# PHP Testing
<VirtualHost *:80>
ServerAdmin my@email.com
DocumentRoot "/www/php_scripts"
ServerName php_scripts
ErrorLog "logs/php_scripts-error_log"
CustomLog "logs/php_scripts-access_log common"
</VirtualHost>

# Drupal 6.4
<VirtualHost *:80>
ServerAdmin my@email.com
DocumentRoot "/www/drupal6"
ServerName drupal6
ErrorLog "logs/drupal6-error_log"
CustomLog "logs/drupal6-access_log common"
</VirtualHost>

# WordPress 2.6
<VirtualHost *:80>
ServerAdmin my@email.com
DocumentRoot "/www/wordpress26"
ServerName wordpress26
ErrorLog "logs/wordpress26-error_log"
CustomLog "logs/wordpress26-access_log common"
</VirtualHost>

Modifying HTTPD Configuration

Now that we have the vhost configuration complete, we need to include this file in our standard apache configuration file. This is generally found here:

xampp/xamppfiles/etc/httpd.conf

For Windows installations, you may skip this step as it is already included by default (and the lines in the included vhost file will initially be commented out to avoid errors), however, with other platforms, you will likely need to search for the line containing the following and uncomment it:

Include /Applications/xampp/etc/extra/httpd-vhosts.conf

Final Steps and Thoughts

Be sure to update your hosts file so that you can access your newly configured site locations and restart/reload Apache so that the changes take effect.

I'm not really here for technical support, but if you would like more
detail on any piece of this, or would like to point out some steps that I may have missed, feel free to register and comment.

Later, in part 2, I will discuss the details involved in the actual setup of a Drupal site.

Good luck!

5
Your rating: None Average: 5 (1 vote)