July 6th, 2008
Web Development in Mac OS X – Complete Guide
Finally, I switched entirely to Mac. It is a little frustrating that there is not a complete resource on how to set up a web development enviroment on Mac OS X. The majority of tutorials are outdated.
I will try to write this guide as complete as possible. I will cover the following key aspects:
- Installing Apache, MySQL, PHP and configuring them
- Adding XDebug to the package
- Installing Subversion
- Setting up an IDE for web development
- Setting up a Windows virtual machine for testing the websites/web apps. in Internet Explorer
Also I will try to create this enviroment from mostly free / open-source programs.
1. Installing Apache, MySQL, PHP
Fortunately we have three options to choose from:
Personally I consider installing the programs manually is a waste of time. Why do something that others already done before you. It remains XAMPP or MAMP.
Both flavors are very good.
MAMP comes in two packages a standard and pro version. Now if you know your stuff you can legally hack the standard version to benefit the features what the pro version is offering. I like MAMP’s folder structure, everything is in it’s place, but I chose XAMPP over MAMP. I don’t like how MAMP is handling all the server and PHP configurations…
XAMPP’s folder structure is not very organized, it’s a little bit confusing at first, but the configuration files are optimized and overall XAMPP has a better performance then MAMP’s. The new version has a control panel too, if you don’t like working from Terminal you can use this widget.
Okay, so let’s download XAMPP from their website. Download the Installer Version (first link). I’d like to mention that it’s not recommended to use this package in production enviroment.
Once it’s downloaded simply install it. This package contains Apache, MySQL, PHP all in one place, ready to go. The folder is situated in /Applications/xampp. Here you can use the control panel to start all the components.
Once started go to http://localhost to see if everything is OK. Go to the status page (link on the left) to see if everything is started correctly.
2. Configuring Apache, MySQL, PHP
These configurations are my personal preference, you can configure your package otherwise.
First let’s see what’s where:
/Applications/xampp/htdocs – here you put your web pages. It is the Apache document root, which we will change.
/Applications/xampp/etc – this folder contains the apache, mysql, php configuration files.
/Applications/xampp/xamppfiles/phpmyadmin – obviousely you find PHPMyAdmin here.
/Applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-xxxxxxxx – contains PHP 5 extensions
/Applications/xampp/xamppfiles/modules – here you can find the Apache modules.
Configure Apache:
Apache configurations are in /Applications/xampp/etc/httpd.conf file. Open it with TextEdit or some other text editing program. Go to the LoadModules section. You can comment out any module which you won’t use, freeing up some precious memory.
Go to the DocumentRoot section and change the path from /Applications/xampp/xamppfiles/htdocs to /Users/<your-username>/Sites or to some other path which suits you better. This is where you will put your web pages. Don’t forget to change all the path to the new path in the file.
We want to enable Virtual Hosts so remove the # from this line: Include /Applications/xampp/etc/extra/httpd-vhosts.conf
Open httpd-vhosts.conf file and delete all the blocks starting with <VirtualHost…
Include this block:
<VirtualHost *:80>
DocumentRoot “/Users/<username>/Sites”
ServerName localhost
</VirtualHost>
Configure PHP
The PHP configuration file is in /Applications/xampp/etc/php.ini.
Search for error_reporting variable. Change that line to error_reporting = E_ALL
We want all errors to show in the development enviroment, including notices and warnings.
Change register_globals to Off (how silly is to leave it)
3. Adding XDebug to the package
Thanks to Felix Geisendorfer post from debuggable.com we can use XDebug on Mac OS X. Here are the steps to follow:
First go to ActiveState Remote Debugging page and download the latest PHP Remote Debugging package for Mac OS X. In this archive you can find a file called xdebug.so
Copy this file to xampp’s php extension folder (/Applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-xxxxxxxx – where x stands for the package date, there should be a folder named like this).
Then include this line at the bottom of your php.ini file:
zend_extension=/Applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-xxxxxxxx/xdebug.so
Once again the x part of the no-debug-non-zts are stands for the package date (you should check your folder’s name)
Okay. Restart xampp. And visit http://localhost and check the phpinfo for everything to be good. Make sure you copy the content of /Applications/xampp/htdocs to your new path.
4. Installing Subversion
This is the easiest step just download the universal binary from the subversion site install it and that’s it.
5. Setting up an IDE for web development
Choosing a good IDE is the hardest of them all. There are many different flavors, but I think the best free IDEs are Aptana Studio and Eclipse PDT, and a commercial version editor is TextMate
Personally I prefer Aptana, but I’m considering to buy TextMate, I read so many nice things about it, I think it’s worth a try.
Okay, Aptana is a massive editor, but it got all the things I want from an IDE: HTML, PHP, CSS, Javascript, project management, FTP and Subversion editor.
Download it, install, run. Go to Help menu -> Software Updates -> Find and Install. In this window select Search for new features to install. Check all the entries you want to install. Make sure you check Subclipse this is the Subversion editor plugin. Install them and restart the application. Done.
6. Setting up a Windows virtual machine for testing the websites/web apps. in Internet Explorer
There are many different ways to run Internet Explorer in Mac OS X. I will tell you how I did it.
Let’s see: we got VMware Fusion, Parallels both commercial versions and Sun’s virtualization software called VirtualBox which is free.
Okay, Microsoft rolled some Virtual PC images with Internet Explorer preinstalled. These enviroments are preactivated and they will expire after some time (it would be too nice that Microsoft would give away their precious OS for free 
)
You can download an image at Microsoft’s Application Compatibility page. I downloaded the IE6 with XPSP2 image. And I want to note some facts that how Microsoft ensures you use his virtualization software. First the images are compressed in .exe files, so you need a Windows box to extract them. Second it contains a .vhd (specific Virtual PC image format), but not a .vmc (specific Virtual PC machine format) along with it, which we would need to convert properly to Parallels .hdd or VMware’s .vmdk format.
First I tried using Parallels Transporter to convert this VPC image, but no luck. When I wanted to start the newly converted image it simply froze. That’s it, I wrote on forums, to support, nobody knows why is this happening.
Okay, second I tried VMware Converter Starter Edition a free windows app, which successfuly converted the image, but again you need a Windows enviroment to do this work. Okay, so I copied the .vmdk file to my Mac. Downloaded the VMware Fusion Trial and started it. It works flawlessly.
Virtualbox unfortunately does not have a converter, it would be the ultimate coolness, you would have a free virtualization software, BUT Virtualbox actually can run .vmdk files. Tried and worked very well, except I couldn’t cloned my network adapter which unfortunately is needed if you want to test your sites.
Summary
I hope you enjoyed this article. Here is a summary of what software to use:
If you want to get away with it for free then use:
2. XDebug and Subversion
3. Aptana with Subclipse or Ecplipse PDT
4. Use VMware Converter and the preactivated Windows VPC image from Microsoft
5. Use Virtualbox to run the converted VPC image.
If you have some cash to spend then:
2. XDebug and Subversion
3. TextMate
4. VMware Fusion and VMware Converter
If you enjoyed this article then help spread the word and please follow us on Twitter or subscribe to our RSS feed.
Subscribe to our RSS feedFollow us on Twitter
on Sunday 6, 2008
I am a bit confused. Why not simply use the built in Apache and PHP?
on Sunday 6, 2008
Because e.g. on my Mac I have Mac OS X Tiger which comes with Apache 1.3 and PHP 4.
The XAMPP and MAMP packages contains the latest versions of Apache (although I think it’s not the best) and PHP.
But you can use the built in versions too, or even update it to the current versions, but you have to compile Apache and PHP which is a tedious work I believe.
on Sunday 6, 2008
Ahh.. Sorry.. I am using Leopard and that has Apache/2.2.8 and PHP/5.2.5.
On the Client version of Leopard you just have to uncomment one line in httpd.conf to enable PHP.
Then I just run the MySQL package from mysql.org.
on Sunday 6, 2008
Yes, that’s nice. I will have to update to Leopard
on Sunday 6, 2008
Can you please remove the smart single quote as that character causes RSS readers to fail.
“unfortunately doesn’t have a converter”
Thanks!
on Sunday 6, 2008
No love for Komodo? You’re linking to the Komodo remote debugging libraries download page, but you don’t mention Komodo at all in your section on editor and IDEs
Komodo Edit is free:
http://activestate.com/Products/komodo_ide/komodo_edit.mhtml
… but it does not support debugging. Komodo IDE does:
http://www.activestate.com/Products/komodo_ide/index.mhtml
on Sunday 6, 2008
Sorry, I never tried Komodo IDE, but I will.
Also good job you guys for compiling XDebug for the rest of us
Keep up the good work.
on Sunday 6, 2008
TextMate is seriously badass.
on Sunday 6, 2008
I’ve gotten into the habit of doing my OSX development in an Ubuntu VM image. After having OSX silently wipe out my PHP install and replace it with some other version during system updates on more than one occasion, I’ve become weary of trusting Apple not to do it again when I need it least.
Have you experienced this problem? Better yet, do you know of a solution to it?
on Sunday 6, 2008
Regarding step 3 with xdebug. I could not get any version of the Activestate file to work. I ended up compiling the Xdebug binaries myself, using my own install of phpize rather than MAMP’s, and everything finally worked.
Doing this is easier than some may think so you might want to give it a shot. If you have Xcode installed (and a copy of PHP 5 installed… for phpize) all you need to do is download the binaries, phpize them, configure, make, move them into place:
1. download and unpack the xdebug binaries from their website
2. cd into the directory you just unpacked
3. run phpize (explicitly use the version of phpize you want to use by running it with the full path to it like /usr/bin/phpize)
4. now run ./configure –enable-xdebug
5. run make
6. copy the xdebug.so file to where you need it (Follow Felix’s directions for setting things up in Apache and php.ini and you are good to go).
on Sunday 6, 2008
@Ian: I haven’t experienced such problem, Apple shouldn’t be updating XAMPP or MAMP…
on Sunday 6, 2008
@Stuart:
If you go to this link (the Active State Remote Debugging Page metioned above) http://aspn.activestate.com/ASPN/Downloads/Komodo/RemoteDebugging
and download the PHP Remote Debugging package for Mac OS X /x86 (I don’t know if it works under PPC) and in that archive you should have different versions of XDebug. You should copy the latest version.
I’m using this file with XAMPP and I never had any problem.
on Sunday 6, 2008
Why install locally when you could run Debian (my preference) in a VM and mount it with MacFUSE MacFusion?
on Sunday 6, 2008
Hello,
whats about installing PostgreSQL on OSX( Leopard ). Is here someone with experience with this?
Thanks,
Stefan Sturm
on Sunday 6, 2008
Sorry, I don’t like PostgreSQL therefore I never tried to install it…
on Sunday 6, 2008
Did you tried to edit with Aptana a huge file ? Try it and tell me how it works…
I am developing Java applications (from 9 to 5) and the manual of one of our applications is written in HTML (actionly it’s a long HTML file). When I try to make some modifications, for example indenting a block of text I have to wait a couple of seconds (10-20 secs) until the changes are made. That’s under Windows, I didn’t tried it under Mac OS. I love Aptana, and I’m also using it for web development but… I don’t know what’s the situation with Eclipse, but taking in consideration that Aptana is built upon Eclipse, I won’t be surprised if it’s the same, although I’m using Eclipse for Java development and never saw this happening.
I’m talking about a 500-700 kb HTML file.
on Sunday 6, 2008
I use Aptana on a daily basis, but I’m going to switch. On Windows it’s not a problem although I hadn’t tried such large files, but on Mac OS X is very slow, even with regular files.
I tried Eclipse PDT under Mac OS X and it works fine, it’s fast.
on Sunday 6, 2008
Thanks buddy, you have posted very useful stuff on web development concept….!
on Sunday 6, 2008
Hi,
I have read this Blog and you have shared good information about SEO
Nice Post!!!!!!!
Thanks
on Sunday 6, 2008
thanks – this is super helpful. after installing the xdebug.so file into the extensions i get this message when restarting XAMPP: “Failed loading /applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-20060613/xdebug.so: (null)
any idea what i’m doing wrong? i’m a n00b
on Sunday 6, 2008
Hey,
Maybe you should try Coda IDE?
Before I was using Zend Studio on a windows platform.
Since I switched to MAC (1 month) I’m using Coda, I’m using it every day for Web development.
You can give it a try with the trial version
.
URL: http://www.panic.com/coda/
Greetings,
Tom
on Sunday 6, 2008
I;m using TextMate now. It’s better than Coda in my opinion.
Coda is not really meant for server side developing.
on Sunday 6, 2008
Nice write up! Interesting, I wrote a similar article, then I thought about checking out if others had done the same to see if I could get a couple tips from people who do things differently… but it looks like we have pretty
But I don’t know XDebug so I’ll check what that’s for… Thanks for article!
similar setups, although it looks like I’m definitly more of a “double-click solutions” kinda guy
on Sunday 6, 2008
I switched to Mac as well. On my PC I used Xampp and got my virtual host set up alright. But after my switch to Mac I cant’ get it running the same way. I just installed the download package from Xampp on my mac and configure virtual hosts as you described above but without the change of the DocumentRoot. Open my Browser, try localhost: Everything is fine. Any other project name doesn’t work
and leed my to http:///xampp/index.php with the same screen like http://localhost.
Then I tried to change the DocumetRoot as you described and I get only an Error Message: Forbidden You don’t have permission to access /xampp/index.php on this server. It doesn’t matter if I try http://localhost or any other virtual host I always get this Error and the Browser points to: http:///xampp/index.php
Do you have any idea why this happens? It sounds quite easy to set these things up but for some reason it doesn’t work… Any help is appreciated.
on Sunday 6, 2008
On UNIX systems you also have to take in consideration file and directory permissions.
Make sure you have read/write permissions on your htdocs folder, or any other folder that is set up in your virtual host environment.
on Sunday 6, 2008
Mhhmmm, maybe that was the case. I don’t know. After trying a couple different solutions and changing this and that – I found a link to MAMP PRO (http://www.mamp.info) and downloaded this. Its not free but it works fine and is super easy. Those guys did a good job and its worth 40 Bucks. I spent quite a while figuring out why things doesn’t work without a solution. Time is money…
Thanks for you fast answer anyway. Next time I try I will check permissions as well…
on Sunday 6, 2008
Hey, thanks for this swift run through. It helped me solve some problems I was having. however, I followed your directions to change my DocumentRoots, but for some reason it still only works when i put my files in /xampp/htdocs (even with altered root path)…? I get nothing (not found) out of the new path.
on Sunday 6, 2008
This could happen for a couple of reasons…
Make sure in your httpd.conf file you have this: NameVirtualHost *:80
Make sure you have set an initial virutal host for localhost like this
DocumentRoot “/Users/gyorgyfekete/Sites”
ServerName localhost
And make sure you set up your /etc/hosts file right and you registered the virtual host aliases to route to your local IP address.
If you have any problems please write me an e-mail and I will help you set it up. (e-mail address on the contact page)
on Sunday 6, 2008
Really great stuff… thanks for sharing this information…