Bitbob

Mac web development made easy

Producing websites on a Mac is wonderful. There is no alternative as far as many are concerned, myself included.

There are masses of tools and applications to make a web developer’s life easier, but without the basics, you’re going nowhere.

Your average PHP developer (which is what I is) is going to need, at a minimum, Apache, PHP and MySQL, as well as some kind of database managment tool.

Many people will tell you that Mac OS X includes all you need right out of the box, and this is almost true, but setting up and configuring Apache, PHP and installing MySQL and phpMyAdmin is something you’ll only want to do once. Give it a try to gain the experience, sure, then never go back there again.

As I enjoy taking it easy, whenever I set up a new Mac, I reach for two third party lifesavers, MAMP and VirtualHostX. MAMP is described as a “one-click solution” for setting up a web server on Mac OS X, providing Apache, PHP and MySQL, as well as phpMyAdmin in one easy to install package. It isn’t quite “one-click”, but it is painless. VirtualHostX is, as you might have guessed, a virtual host management application. It integrates seamlessly with MAMP and makes setting up and maintaining virtual hosts a snap – no more fiddling with httpd.conf files when you start a new project.

Both are free to use, but VirtualHostX is limited to 3 virtual hosts before requiring a license, and if you love it as much as I do, you’ll throw money at it in an instant ($19).

MAMP hasn’t seen updates for over a year, but just last week on the recently created MAMP Twitter account, an update was posted stating that a new version is on the way.

As I’ve just installed Snow Leopard, I’ll run through the installation and configuration of both tools, and show you that the Terminal is something you can avoid if you really want to.

Download and install MAMP

First, you’re going to need MAMP. Drag the MAMP (not MAMP Pro) folder into your Applications folder. As stated in the very orange background of the MAMP disk image, you should place the MAMP folder direcrly into /Applications. MAMP won’t work anywhere else (I haven’t tried to test it aywhere else, but I’ve never had a problem with it being in /Applications anyway). Eject the disk image and we’re done.

Configure MAMP

Out of the box, MAMP isn’t ready to work the way we want it to. We need to head into MAMP and configure a few things. Launch the MAMP application — found in /Applications/MAMP/ — and take a look at the Preferences.  Firstly, set up the options in the Start/Stop section. This is really down to personal preference, but I don’t like having the MAMP icon in my Dock, so I always disable the “Stop Servers when quitting MAMP” option. In fact, I don’t like MAMP doing anything without me telling it to, so I uncheck the lot.

Our next port of call is um, ports. Simply click the “Set to default Apache and MySQL ports” button and your Apache and MySQL ports will be set to 80 and 3306 respectivley.

You can ignore everything else, unless you’re using PHP 4 (why?). Hit OK, enter your password, Apache will restart and we’re done. Feel free to quit MAMP now.

Oh, while you have the MAMP folder open in Finder, you might want to install the Dashboard widget (Mamp Control.wdgt). Again, it’s down to personal preference, but I prefer starting MAMP easily from the Dashboard.

Download VirtualHostX and give it a home on your Mac

This post discusses version 2. If you’re already a VirtualHostX user and haven’t upgraded yet, find the $5 and do it, version 2 makes a great application even better.

Download VirtualHostX and toss it into your Applications folder.

On first launch, VirtualHostX will kindly ask you what you want it to do. Follow the steps in the Setup Wizard — clicking two buttons — and you’re done.

We’re using MAMP, let’s tell VirtualHostX

In VirtualHostX’s super-simple Preferences window, you’ll find one option. Set your default web server to MAMP and close the window. That’s it. Now VirtualHostX will manage all server restarts whenever we add, delete or modify virtual hosts.

Set up localhost

Now, MAMP is good, but it forces us to use its own document root, burried somewhere in /Applications/MAMP/. Take a look at http://localhost/ with MAMP running.

That isn’t what we want to see! I have a Sites folder, I’m going to use it. Instead of changing the settings in MAMP, simply add your first virtual host to VirtualHostX with the following settings.

• Domain name: localhost
• Local Path: ~/Sites (navigate to the Sites folder in your home directory)
• Enable this virtual host (you knew that one, right?)

Click the Apply Changes button in the toolbar, enter your password and we’re done setting up our first virtual host. Test the new host by again heading to http://localhost/. It should look a little different.

http://localhost/ now points at our ~/Sites folder. Good.

Set up our first real virtual host

Following the above process, go ahead and set up another virtual host. I’ll add a quick test page to the Bitbob directory in ~/Sites.

I like to use the format name.dev, but you’re free to do whatever you want here – name.site, name.testing, name.teddybear? Do whatever you feel is best.

Now, Apply Changes, head to the virtual host you set up in your favourite browser (Safari, right?) and everything should be working.

To save typing your custom domain names every time you access them, you can simply double click the name in the VirtualHostX sidebar or find them all in the Dock icon’s context menu.

Yeah but, IE?

Internet Explorer? You don’t test in that, do you? Well fine, you’re lucky. VirtualHostX 2 introduced a new feature, sharing virtual hosts over a local network. This means you no longer need to configure hosts files and other nonsense to test in IE on either a dedicated Windows machine on the other side of the house or virtualisation software like VMware Fusion or Parallels.

To get it working, simply check the “Share over local network” option for each of the domain names you want to test – it’s also useful if you want to show someone on the same network the progress you haven’t made since the last meeting – click Apply Changes and scurry on over to the beige box in the corner or kick start Windows on your Mac.

You’ll need Bonjour for Windows installed and a browser capable of listening out for Bonjour broadcasts from your Mac. Safari does this without any assistance, IE gets a new plugin when Bonjour is installed and Firefox has BonjourFoxy. Open up the Bonjour bookmarks panel in your favourite Windows browser (IE, right?) and you’ll see your virtual hosts being broadcast to all Bonjour-enabled machines on your network. Viewing the site is as easy as double clicking the bookmark.

There is one downside – the URL is a bit… odd looking, but there’s more to it than looks. If you’re using absolute links, especially with the domain name hard-coded – the WordPress default behaviour – you’ll have problems. It’s great for other projects, those where you use relative links like a good little developer, but WordPress and anything else referencing files absolutely is going to need a little more work.

For WordPress, simply setting your installation to use the “ugly” URL will solve your problem. So, in my case, I would order WordPress to use “http://aarons-macbook-pro.local.:9002″ for both URL settings. The same can probably be done for other blogging platforms, content managment systems or whatever else you might be trying to test.

I can still get quick access to my blog using the bitbob.dev domain name I set up earlier, when a WordPress link is clicked, I’m taken to the “ugly” version. For testing, this is fine. I don’t know many people who test a WordPress installation locally then transfer the whole lot to a live server expecting it to work. Permalinks and everything else I need work absolutley fine.

Because WordPress is broken and backwards in the way it handles links, I wouldn’t rely on this method for long-term testing. If that 9001 becomes 9002 overnight, your WordPress installation is going to throw a fit and refuse to work. Test your theme or plugin and get it live, just in case.

If you need to test something like WordPress a lot, the best way is still to edit the hosts file on the Windows side.  I’ll write a follow-up post on this later in the week.

And we’re done

That’s that. I’m set up and ready to start developing new and exciting things on my Mac, and testing in IE is nice and easy. Fixing things for IE, not so much.

I hope it was useful. If something isn’t clear (or more likely, is plain wrong), let me know.

Oh, by the way, the reason we set up http://localhost the way we did was to allow us to drop small tests and such in ~/Sites and access them easily via http://localhost/[name]/.

It should also be pointed out that you can aim your virtual hosts at any location, not just the ~/Sites folder. I have placed small test projects on the desktop before and set up a virtual host to access them.