Design Workflow Part 2 – Setting Up XAMPP For Local Development

The first step torwards creating a working development environment on a local machine is to setup a webserver in which you can install and edit your CMS of choice. As I have said in the past, I “learned” on Drupal, and in future posts I will be outlining how to install a local Drupal site. Very recently, I have begun to develop on WordPress… I won’t say I am in love, but it is certainly nice. I will go ahead and describe how to do this soon as well.

So, the actual installation of XAMPP is easy, and I guess that if you are looking at a design workflow that you are comfortable on a PC and can install software without trouble. So head over to XAMPP and download the Installer, and install XAMPP to C:/XAMPP. You can choose another directory, but the root of C: works best when creating symlinks for development.

Once XAMPP is installed, you actually have a web server on your PC- it is THAT easy. Start up the XAMPP Control Panel from your start menu, and start both Apache and MySQL. You should see them turn green like this:

If Apache won’t start, something else is using its default ports, and you can do a couple of Google searches on how to fix that. Go ahead and open up your favorite browser and type http://localhost into the top address bar. This takes you to the XMAPP starter page, which we need to configure quickly to secure our local install. You can skip this step, but why leave security holes if it only takes a minutes.

Click the security link on the left, and you will see some red marked unsecure items- we are going to fix those now.

Click on the link under the above display, http://localhost/security/xamppsecurity.php.

Enter a root password twice, and then enter a username and password for the XAMPP directory protection. When you set the password for root you will get an authentication popup whn you save the changes- this is where you enter those credentials. If you use a password saver like I do just file the credentials away. If this is an issue for you, skip this step as it is not entirely necessary, more so if you don’t share your PC.

If you go back to the security link on the left, you will notice your status looks better:

As of now, your webserver is running! Here are a couple of side notes that really help me with my design workflow:

Important: The directory that Apache uses as your web root is C:/XAMPP/htdocs/[subfolder]

Every time I create a local install of a website, I do it in Dropbox. I do this because I develop on multiple PC’s, and I like to have all of my stuff on every computer, so I can switch pictures and change CSS no matter where I am. You do not have to do this- you would be fine creating subfolders right inC:/XAMPP/htdocs.

To get granular, what I do it create a subfolder in my Dropbox account (Or Sky Drive, or Google Drive) called WebRoot. I then create subfolders for each of my sites in here. Lets call my test site TestSite1. The path on my pc to this folder would be C:/Dropbox/WebRoot/TestSite1

Download a symlink application, any of them will work. The one I prefer and love is called Link Shell Extension, located here.

Once you install the prerequisites, and install the tool itself, you can access it by right clicking on the link that you want to create. So navigate into your Dropbox folder and right click on the web subfolder you created, and select Pick Link Source.

Now navigate to your C:/XAMPP/htdocs folder and right click in Windows Explorer and select Drop As > Symbolic Link.

This makes Windows and by association Apache think that the folder located in Dropbox is really in the htdocs folder. Now any content you add and create in this directory is in your Dropbox, and can be shared between PC’s. As an added bonus, Dropbox has a pretty nice file history and recovery feature if you mess something up, which I have been known to do.

Important: If you UNINSTALL XAMPP, and tell it to remove data- it will follow the symlinks and delete your stuff. Yup, did that. Also note that changing CMS files in a web directory when it is in Dropbox means a lot of tiny chances will be uploaded and downloaded to and from your PC quite a bit. I work off of SSD’s, so this is not an issue- but it can cause a bit of disk activity, so keep an eye on it.

A last tip I will throw in for configuring Apache- here are a few things I do right off the bat. First, increase the memory limit of your server- this will save you with CMS’ like WordPress. Open up the XAMPP Control Panel and click config next to Apache, then click PHP (php.ini).

Scroll down to link 479 and change the memory_limit to 256M:

Save and close the file.

Now, lets set up our Apache to allow multiple local websites, which will help you develop more than one project at a time, among other benefits. Click the config next to Apache in the Control Panel again and select Apache (httpd.conf).

Right up top there are some options to mess with, though you can probably just leave them alone. What I have done is add a line that allows other people on my LAN access the website. To do this I add in my LAN ip on a different port, which lets people reach my web server by navigating tohttp://myipaddress:port

I use 8080 for the port, so my entries are:

• Listen 0.0.0.0:80
• Listen 192.168.8.22:8080

Now scroll all the way to the bottom of the file and add in the following block of code:

The items of note here are: DocumentRoot is set to the folder in which your web content is, in this case it is C:/XAMPP/htdocs/TestSite1

Note that this file also follows your symlinks. The second line of note is <directory “c:=”” xampp=”” htdocs=”” subfolder”=””>. This is set the same as above. The last and most important line is the ServerName hostname.local. This can be anything you want: site.com, or just sitename, or sitename.complex.site.com. This is the address where you and anyone else you want to grant access to will browse to the site. Once you make this edit, save and exit the file. Now in your browser you can navigate to the site by using the hostname, and other people can navigate to the site using the hostname and port, if they are setup correctly. So in the above sample, I would browse to hostname.local, and I would hit the site contained in C:/Dropbox/WebRoot/TestSite1/

In my next post I will describe how to install Drupal locally into your Dropbox folder, how to set up a database, link it, and start designing your site.

You can read the introduction to this series here!