Are you local? (XAMMP, OSX & MAMP)

(Note: The following is a basic guide. It worked for us but please don’t hold us responsible if it doesn’t work for you. There are many pc configs and/or issues that might prevent you getting the same results. Please be aware that there are security considerations when tinkering with Apache, especially if you’re system is open to the internet.)

For the developer-challenged designer out there, here are few steps to help you setup a local Apache, MySQL & PHP environment to brew your websites on. Even if you only develop in HTML this will be of use.

Why?

Simple. You can have a fully working version of a website before you even think about using your FTP client to transfer files to a live (or client approval) site.

Setting up all these programs can sound a little daunting so here’s what we use and it’s all free.

  • XAMPP. It’s a ‘packaged’ collection of the above apps and easy to install. We’ve found that matching the version numbers to your live hosting setup is the way to go to avoid any compatibility problems. Back ‘issues’ can be found here. There are other LAMP-style packages out there too. The Uniform Server is another popular one.

Once you have all that installed then great. But you’re most likely working on more than one website at a time and you need to be able to tell Apache – via your web browser – that when you type http://dev.mysite.com that it looks for those files in a specific directory.

This page tells you what you need to do: Setting Up A Virtual Host in Apache.
Your days of local multi-website-developing are now upon you.

Tips

Why the ‘dev’ and not ‘www’?

It helps to reference your local websites (in both the Windows hosts file and in the Apache Virtualhost listing) logically. Eg: dev.website.com makes for easy differentiation between your local and live site. When you’ve uploaded your site to your webserver, simple replace the ‘dev’ reference with ‘www’.

Update (Feb 2nd 2007)

OSX with MAMP

(MAMP Pro has now been released. This is an add-on to the free MAMP download that will let you configure virtualhosts a lot easier. Additionally it lets you open your system to clients by using a a dynamic dns service.)

We recently got ourselves a Mac for website testing purposes. After some looking around on the net for opinions on OSX and it’s native web serving abilities, we thought it might be a good technical exercise and see how easy it would be in getting an internal OSX webserver happening.

The first thing we did was download MAMP (which is similar to XAMMP mentioned here previously). Out of the box they’re similar setups (Apache, MySQL and PHP).

Next we setup some virtualhosts so that we could have as many sites in development as we wanted. (We could go into excrutiating detail and delve into the nuances of the Terminal window but we just don’t know anything about it. We’re designers and not programmers :) )

There’s a system utility called NetInfoManager in the Utilities folder. If you look in the ‘machines’ item you’ll see in the pane next to it an entry called ‘localhost’. Click on it and hit ‘duplicate’. Double-click in the bottom pane on the ‘name’ entry and rename it to whatever your local site is called eg dev.yoursite.com. Repeat this step for any other sites you may have.

Then over to MAMP. We want to tell Apache that we going to be working on more than one site. Enter Virtualhosts. Go to the MAMP directory: Applications/MAMP/conf/apache/ and open a text file called ‘httpd.conf’. Scroll right to the bottom and you’ll see a lonely line: ‘#NameVirtualHost’. Change it to: ‘NameVirtualHost *’ and underneath add the entry to enable your Virtualhost.

<VirtualHost>
DocumentRoot "Applications/MAMP/htdocs/dev.yoursite.com"
ServerName dev.yoursite.com
</VirtualHost>

In your htdocs directory create a folder called ‘dev.yoursite.com’, add your html or php files and then head over to your favourite browser (which should be Firefox and if it aint it should be) where you can now enter: ‘http://dev.yoursite.com:8888’. (The 8888 is a port number and is supposed to be more secure.)

So there you have it. Easy as.

But what if I’m on a mixed network of Macs and PC’s. How do I see the site/s?

Once again it depends on your setup. What worked for us was having a router that has Port Forwarding. We set it up to look for any http request on a particular IP address. Internally the Mac could be on 192.168.1.50.

Next we edited our Windows ‘hosts’ file (located in your Windows directory then system32\drives\etc\) and added the following entry:

192.168.1.50       dev.yoursite.com

Now if you go to Firefox again and type: http://dev.yoursite.com:8888 you should see your site being served of your Mac.

Note: We had some firewall issues and had to tinker about a little to get it to work properly from our PC. All good firewalls have port blocking.

If you want to keep all your htdocs in one place, like a file server, you can tell MAMP to look elsewhere for them. Go back into the Apache httpd.conf file and search for ‘DocumentRoot’. There will be a line called: DocumentRoot ‘/Applications/MAMP/htdocs’. Change it to where ever your files are located. Change your VirtualHost settings to reflect this change also.

Working locally with VMWare Fusion

So what if you want to access your MAMP setup from within VMWare Fusion (or Parallels)? Simple.

Edit your Windows hosts file (located in your Windows directory then system32\drives\etc\) and add the IP of your Mac followed by the site name. E.g.:

192.168.1.50       dev.yoursite.com