Setting up you Local Development Environment

Step 1: Turn your PC into a web server

First thing you will need to do is install Apache, PHP and MySQL on your PC.

Hang on a minute though! Before you go downloading them all seperately, there's a quicker way, let me introduce XAMPP which is all three of them (plus a few extras) rolled into one easy to use installer, you will be up and running in minutes - I promise!

Xampp for Windows Logo

While it is a useful skill to be able to install a LAMP stack seperately, it can be time consuming for a beginner and I'd much rather you spend your time writing cool code.

Here's a link to the xampp download page, just follow the instructions on the page, once your done, come back and we'll tweak the setup a little.

Step 2: Redirect Development Traffic Locally

I find it beneficial when developing on my local machine to use a URL structure that mirrors as closely as possible what the final site will use, that way there wont be any directory path or domain name issues when the site eventually gets made live.

So, what we are aiming for is something like this

Live site URL: http://www.your-website.co.uk

Local Development site URL: http://dev.your-website.co.uk

In order to achieve this we need to tell Windows to look on the local machine for certain domain names, rather than out on the internet. This can be done by quite easily editing the hosts file.

On the Windows taskbar click 'Start' > 'All Programs' > 'Accessories' and find 'Notepad' but don't left click on it, instead right-click and select the option to 'Run as Administrator'. This should launch notepad with elevated privileges and allow you to save the changes you make to the hosts file.

Now, open the host file from the File menu, which can be found at..

C:\windows\system32\drivers\etc\ or %systemroot%\system32\drivers\etc\

At the bottom of the file and on a new line add the local IP address of 127.0.0.1 a few spaces then the domain name that you want to use for your local development, do this for every domain that you want to use locally.

127.0.0.1       dev.your-website.co.uk
127.0.0.1       dev.your-other-website.co.uk

Step 3: Create Your Website Directories

Using windows explorer open up C:\xampp\htdocs\ and create a folder for each website that you will be managing, I usually use the domain name as the foldername to save confusion, so it would be something like C:\xampp\htdocs\your-website.co.uk\

This new folder will essentially contain the same stuff that you see when you FTP to your live server, so you may need to add a folder for the public files in order to mirror it's setup. Something like this ..

C:/
  xampp/
    htdocs/
      your-website.co.uk/
        public_html/
          index.html
          pics/
            logo.jpg
        application/
        framework/
        downloads/
        etc...

Step 4: Apache Config

So by now we've got your website files in the right place, the webserver should be all installed and ready to start serving up pages, and we've told Windows that you want your development traffic sending in Apaches' direction, now all we need to do is join the dots and tell Apache which files to use for which domains.

In order to run more than one website on your local server you need to enable name based virtual hosting within Apache, In short - you need to uncomment the following line...

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

Now to tell Apache where all the files for each of your websites are located...

Using a text editor add the following code block (once for each domain) to the end of the httpd-vhosts.conf file, which can be found at C:\xampp\apache\conf\extra remembering to change both the domain name and filepath accordingly.

<VirtualHost *:80>
	DocumentRoot "C:/xampp/htdocs/your-website.co.uk/httpdocs"
	ServerName dev.your-website.co.uk
</VirtualHost> 

Step 5: All Done - Test It Out!

Launch the Xampp control panel > Select Run on the Apache option (and MySQL one if needed) then fire up your favourite brower and enter the development domain name - you should see your site.

 

I've based this guide on using Windows 7 and the full version of Xampp for Windows - version number 1.7.1, the last time I checked the version number hadn't gone up too much so there shouldn't be too many differences, but if there is, let me know and I'll update the guide accordingly.

By Karl Payne

Comments

There are no comments, don't be shy, somebody has to be first.

Leave a comment