Setting up a Local Web Server

11th January 2008Webserver

As you’ve probably gathered from the title this post is going to be about setting up a local web server on your computer so that you can do all your website development locally. I use a well known program calledXampp which is an all-in-one package that will install Apache, MySQL, PHP, phpMyAdmin amongst others in one foul swoop. It’s ideal for quickly getting setup with a server with the minimum of fuss.

XAMPP

The version of XAMPP I use is the lite version and as of writing it’s at version 1.6.4, the lite version is a cut-down install package but its more than enough for everyday needs. It has Apache 2.2.6 + PHP 5.2.4 + MySQL 5.0.45 + phpMyAdmin 2.11.1 all bundled up and will it install everything automatically for you.

DOWNLOAD + INSTALLATION

Go to the download page and grab the “Selfextracting ZIP archive” which comes in around 19MB as opposed to the 47MB zip version, once it’s done double click the file and extract its contents to your hard drive. I have my server at C:\server but of course it’s completely up to you. Next run “setup_xampp.bat” located in the root of the extracted folder and once that’s done you can open “xampp-control.exe” to start and stop your Apache and MySql services. At this point you can either open this control panel every time you want to start and stop your web server or you can make it so Apache and MySql are always on by setting them to run as a windows service. To do this simply click the “service” button and check the “run xampp control panel as a service” and make sure the Apache and MySql boxes are ticked. This way they always run in the background even when you restart windows.

XAMPP SETUP

Your web server is now running open up your browser (hopefully Firefox) and enter “http://localhost” in the address bar, select your language from the list and you will then be greeted by the main Xampp page. Your not going to be spending much of your time here but you do need to make a few security changes and password protect your database and root folders.

Click the “security” link on the left and you will see that are few things are unsecure, click the link for xampp security under the boxes and enter a password for the “MySql Section: root password”, click the “password changing” button to create a password. Next create a username and password for the “XAMPP DIRECTORY PROTECTION”, this just protects the directories so that only you can view them.

 

When you refresh the page you should be asked for a username and password, use the information you just supplied. Everything is now setup, how easy was that, when creating a new website I simply create a new folder in the “htdocs” folder in the xampp installation directory and this can be accessed from your browser by going to “http://localhost/website_folder_name”. In the next section I’m going to explain how you can setup virtual hosts so that you can access your sites by using a shorter url and organise your sites better by each having their own local name.

VIRTUAL HOSTS

Virtual Hosts are extremely useful when developing websites and this is how I setup and use them on my local server. The first thing you need to do is open the virtual hosts configuration file, this is located at “C:\server\apache\conf\extra\httpd-vhosts.conf”.

The “#” symbols are used by apache to indicate a comment, so currently everything in the file is ignored. Start by uncommenting the line “##NameVirtualHost *:80” by removing the # from the beginning, next uncomment one of the sample virtual hosts in the file.

1. < VirtualHost *:80 >  
2.     ServerAdmin webmaster@dummy-host2.example.com  
3.     DocumentRoot /www/docs/dummy-host2.example.com  
4.     ServerName dummy-host2.example.com  
5.     ErrorLog @rel_logfiledir@/dummy-host2.example.com-error_log  
6.     CustomLog @rel_logfiledir@/dummy-host2.example.com-access_log common  
7. < /VirtualHost >  

Although it looks complicated the only lines you need to keep are the “DocumentRoot” and “ServerName”, the rest can be deleted. The DocumentRoot is simply the location of the folder that contains your website e.g. “C:\server\htdocs\samplesite” and the ServerName is the name that you want to call it e.g. “samplesite”. The file now looks like this (note that I’ve added the localhost ServerName just so that you can access your Xampp page by going to http://localhost):

1. NameVirtualHost *:80  
2.   
3. < VirtualHost *:80 >  
4.     DocumentRoot C:/server/htdocs  
5.     ServerName localhost:80   
6. < /VirtualHost >  
7.   
8. < VirtualHost *:80 >  
9.     DocumentRoot C:/server/htdocs/samplesite  
10.     ServerName samplesite  
11. < /VirtualHost >  

The next step is to add the “samplesite” to the windows hosts file, in Windows XP this is located in “C:\windows\system32\drivers\etc\hosts” and this is the same for Vista. Open the file in Notepad and simply add

1. 127.0.0.1       localhost  
2. 127.0.0.1       samplesite  

All this does is instruct windows to send any request for “sample site” to 127.0.0.1 which is another name for “localhost”. Finally you need to restart Apache by clicking the stop button in the Xampp control panel and then clicking the start button again. If everything went well you can now enter “http://samplesite” in your browser and your web server will display the site in “C:\server\htdocs\samplesite”.

Phew all done, please bear in mind that you will need to do this for every site you want to create but it’s totally worthwhile. By having all your websites in separate folders you stay organised and can easily copy over your website when it’s time to go live. Another major advantage is that your development will take place from the root folder just like it is when you upload it online and this will help you if you use PHP as everything can then be referenced from the document root.

PHPMYADMIN

Xampp comes with phpMyAdmin which is a “tool written in PHP intended to handle the administration of MySQL”. In other words it’s a simple graphical user interface to interact with your MySQL databases. To access phpMyAdmin on your new local web server just go to “http://localhost/phpmyadmin/” and enter your username and password that you created earlier when securing your Xampp installation. This is a very brief introduction to phpMyAdmin so have a play around yourself and try adding a database and then start adding a few tables. You can use SQL commands by using the “SQL” tab to create things in your database or by using phpMyAdmin itself to add things.

Wrapping Up

There you have it, a small guide on how to get a local web server up and running on your computer, note that Xampp Lite is only really viable for development purposes and shouldn’t really be used on its own in a production environment. There are a few options out there if you don’t want to use Xampp such as installing Apache, PHP and MySQL separately (which is a pain for quick development but more configurable) or other similar packages such as Wamp. I haven’t tried any others so I can’t comment on them but Xampp does a great job.