Local development server setup – PHP/MySQL

One of the things that annoys me about website development is the need to prefix webpages running on my local server with localhost like:

http://localhost/site_name1, http://localhost/site_name2, etc

I don’t usually have the luxury of an external development server, but having an environment that closely mimics my site’s final destination is critical.  It was actually pretty easy to set up a local server on my computer.  Here is what my local development server addresses look like:

http://www.projectname.localhost, http://www.otherproject.localhost

Set Up

First, I create a public_html folder to store all of my websites.  I prefer to keep everything in my home directory, so my folder is /home/jon/public_html.  I also recommend that development occurs in the home directory for the simplicity of setting permissions and the ease of performing backups (you backup your home directory, right?)

Your “home” folder can be in any number of locations:

  • Linux – /home/<name>
  • OSX – /Users/<name>
  • Windows:
    • XP – C:\Documents and Settings\<name>
    • Vista/7 – C:\Users\<name>
    • In Windows, your home folder can be located using the %UserProfile% environment variable.

Moving on… let’s assume you’ve created <home directory>public_html

Now install the latest apache server, mysql, and PHP.  Use whatever installation packages suit your OS – it actually doesn’t *really* matter that much where everything gets installed.  I used synaptic package manager in Ubuntu and installed it all from there – took 10 minutes; 8 minutes of which were download times.  There are also some packages out there to make it even easier to set things up on your local computer.  I haven’t used any of them – but a quick google search will turn up several candidates.  Here are a couple:

  • WAMP – Windows Apache Mysql PHP
  • MAMP – Mac Apache Mysql PHP

Configuration

Here’s where the setup gets fun.  (The actual location of the configuration files are different depending on your OS, I will do my best to point you in the right direction)

  1. Configure Apache for virtual hosts:
  1. Edit the <path to server>/httpd.conf file (on some systems, this could be called apache2.conf.  If you have both, try the apache2.conf file first)
    1. Find the line (near the end of the file) that looks like this:
      # Virtual hosts
      # Include path/to/virtual-hosts/file/or/directory
    2. Remove the comment (hash mark) in front of the Include directive
    3. Save the file
  2. Edit the virtual-hosts.conf file (on my Ubuntu 9.10 system, it is the ‘default’ file under /etc/apache2/sites-available).  Additional configuration options can be found here: http://httpd.apache.org/docs/2.2/vhosts/
    <virtualhost *:80>
      DocumentRoot /path/to/public_html/site_folder
      ServerName www.sitename.localhost
      ErrorLog logs/sitename.localhost-error_log
    </virtualhost>
  3. restart apache
  • Edit your hosts file.  It can be in a number of locations on your system.  (mine is /etc/hosts  WindowsXP users can find it in C:\windows\system32\drivers\etc\hosts)
    #add a line like this for each site you want to run locally
    127.0.0.1 www.sitename.localhost
  • Open your browser and type in the full address: http://www.sitename.localhost
  • Done!
  • I really like this approach because:

    1. I can treat each folder in my public_html folder as independent websites
    2. I can set up each project up to mimic it’s production structure so that the FTP/upload process requires little or no additional configuration.
    3. I don’t have to worry about absolute/relative paths mapping to the wrong place.  The site root is no longer /public_html :)

    About Jon Trelfa

    I live in Detroit, Mi.
    This entry was posted in Code. Bookmark the permalink.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>