Free Web development tools for Mac users

This is an on-going post which will be updated when I find or learn something better. Please leave a comment if you have any suggestion or if you find any error. Help me to help others! Thanks. 🙂 (I found many spams coming in, so please leave out the website if you don’t have any to share.)

Free Web development tools for Mac, especially for PHP developers. Of course, there’re many other free tools available out there. These are the tools that I have been using personally and I find them very useful. I hope you’ll find them useful too.

1. Local web server for testing

  • MAMP to manage local website (http://www.mamp.info/). This is only essential if you’re working with server side language PHP. Updated: If you’re too lazy to set up the Mac with its included Apache server like me, this is a very good app to start with. Just install, run the app and you’re good to go.
  • This tutorial shows how easy it is to set things up in Mac with MAMP for WordPress. I followed this to install a testing development for my work.
  • If you can’t get Aptana (mentioned below) to read the files from MAMP’s default Document root, scroll to the bottom to read more.
  • Mac’s Web Sharing for developers who are only developing using HTML, CSS and Javascript, Mac comes with a web server installed by default. You may want to google “How to enable web sharing on Mac Lion”. Updated: Thanks Glenn for pointing out. If you’re a little command line savvy, you may do away with MAMP and set up your Mac with PHP and MySQL. Just follow the tutorial here. I haven’t tested it though.
  • OS Mountain Lion: Unfortunately, Apple has removed the web sharing option in the sharing preference panel (see here). You can bing it back using command line by following this tutorial. But then again, they really look too much work. I prefer to use MAMP. And because the configuration is self-contained within MAMP, if I messed up the settings, I can simply delete the app and reinstall to reset to default.
  • AMPPS (http://www.ampps.com/): I was preparing for a web design class and was looking for a tool for Windows users similar to MAMP. And then I found this AMPPS. It supports both Windows and Mac, and is said to be portable. I’ve yet to give it a try, I probably will in the near future although MAMP is enough for me at the moment. Read this article about AMPPS vs MAMP: http://bit51.com/bye-bye-mamp-pro-hello-ampps/

2. Text Editor

Both tools provide syntax-highlighting, but Aptana provides auto-complete and syntax error alert features which are slightly more useful for me.

  • Aptana as web development IDE http://aptana.com/
  • I had been using TextWrangler before I finally found this tool. The syntax error alert feature really saves me a lot of trouble trying to debug. And the auto-complete saves me some typing too.
  • One thing I don’t really like is the default white text on black background theme. To change the white text on black background to black text on white background, click the color wheel icon on the top of the Aptana window and select “Aptana Studio 2.x”, “Eclipse” or “Dreamweaver” theme.
  • I didn’t spend time trying to set up Aptana for debugging web environment because I could use MAMP to run the web and see my development while I’m doing my work.
  • Aptana works even better if you have Git installed. It can track branches and changes by indicating them on the left panel. This is a simple yet extremely useful feature. Apple’s Xcode comes with Git. My iMac (with Xcode and SourceTree installed) worked pretty well for Aptana, but my MacBook (no Xcode, only SourceTree installed) didn’t work. So it’s probably advisable to install Xcode along with Git so you don’t have to figure out how to configure Git to work with Aptana.
  • TextWrangler as text editor http://www.barebones.com/products/textwrangler/
  • TextWrangler doesn’t support auto-complete and doesn’t prompt you if there’s any syntax error. You need to know exactly what you’re doing. I have had hard time debugging when I was using this tool. It is still a very good free tool though.

3. Source repository and management

Source control and management is crucial in a development work. Because it is the core of the business. It is important for us to find a good storage and to keep track of all changes done to the source.

  • BitBucket https://bitbucket.org/
  • You can create unlimited private repositories.
  • Each repository is limited to 5 users for free account.
  • I have been using this for several months. It is very easy to use and configure. The SourceTree client works out of the box with BitBucket. And recently they had refreshed and improved their web UI. Very impressed. Not to mention they provide unlimited private repositories.
  • GitHub https://github.com/
  • You can create unlimited public repositories.
  • Private repositories come with a price.

4. Source repository client

You can always use the web page to upload changes. This is just a convenient way to commit the changes to the repository from the Mac.

  • SourceTree app http://www.sourcetreeapp.com/
  • Any Git or Mercurial repositories.
  • I’ve been using this tool and find it very easy to use.
  • The client allows us to add any git repository, not limited to BitBucket. I had tried adding GitHub and “it just works”.
  • For Git beginners the concept of Fetch, Pull, Push, Commit and Checkout may seem overwhelming… but they are the fundamentals of Git that I think it’s good to know. It becomes very useful if you ever want to use Git with command line.
  • GitHub for Machttp://mac.github.com/
  • Limited to GitHub account.
  • I have not personally tried this but the UI looks very intuitive.
  • The UI is so simple that some concepts of Git have been hidden from users. It may be difficult for you to switch to other clients or command line if you don’t have the concept of Fetch, Pull, Push, etc. Nevertheless, it is a simple client for newbie to start using Git within minutes.

While the 2 clients are extremely useful for synchronizing your work on the cloud (their servers), you can always choose to leave the work in your local machine. Simply use commit and not use the Pull and Push commands. But repositories are best for collaboration, so usually developers will sync them to a server for sharing (and backup too).

Using Git from the Terminal

Sometimes you may need Git from the Terminal. In my case, I wanted to use Composer.org to install some dependencies in my Laravel project. So I need Git in my Terminal. It’s not that difficult to install, just go to this link, download the latest package and install it.

https://code.google.com/p/git-osx-installer/downloads/list

5. Aptana & MAMP troubleshoot (Document Root issue)

I didn’t use the default root in MAMP because it didn’t work for me. Aptana doesn’t seem to be able to see the files in the htdocs folder. It’s better to put your work outside the MAMP app, in case it got corrupted and you have to delete it.

Open MAMP, go to “Preferences”, under “Apache” tab, change the Document Root to somewhere else. I like to put it under

/Users/your_username/Sites

This folder is automatically created prior to Mountain Lion. If you purchased the MacBook with Mountain Lion then most probably this folder doesn’t exist. You can always create it or choose another folder. 🙂

When you launch http://localhost:8888 the next time, it will read directly from this folder.

Additional info:
If you have subdirectories inside this folder, simply use http://localhost:8888/subfolder

6. Managing MySQL database

The best tool to manage MySQL database is the tool made by Oracle themselves. They have clients for many platforms, including Windows, Mac and some Linux.

MySQL Workbench: a very nice tool to manage MySQL databases. http://dev.mysql.com/downloads/tools/workbench/

7. FTP Client

There’re many free FTP clients available in the market but these are the few that I have been using and I find them easy to use.

  1. Cyberduck (http://cyberduck.ch/)
  2. Filezilla (https://filezilla-project.org/)

Warning: Be aware that by default Filezilla stores and transmit your password in plain text. I’m not sure if this has been resolved but it has certainly compromised some of my sites before. There’s a way to “fix” it but it sounds too troublesome.

Cyberduck on the other hand stores your password using Mac OS’ keychain. One slight inconvenience in Cyberduck is that it doesn’t have the feature to only upload files that have changed. Filezilla is better in that sense.

More FTP clients here: http://mac.appstorm.net/roundups/internet-roundup/top-7-free-ftp-clients-for-mac/

8. LESS CSS compiler

LESS is a dynamic stylesheet language which extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you want to learn more about LESS, visit www.lesscss.org.

LESS makes CSS logically easy to write and reusable. The only troublesome part, in my opinion, is that you need to compile LESS script into CSS format. The team that came up with LESS has provided a command-line tool to do that. Command-line?! Sounds complicated? Fortunately, there’re many GUI tools that can help us with that. The 2 that I have been using are simple and free of charge.

  1. SimpLESS (http://wearekiss.com/simpless) – SimpLESS was a very easy-to-use and straight-forward GUI compiler. However, I was having a lot of trouble trying to compile Twitter Bootstrap v3. So I switched to…
  2. Koala (http://koala-app.com/) – Koala is not just a LESS compiler, it also supports Sass, Compass and CoffeeScript. It can run on Windows, Mac and Linux. The GUI is also very straight-forward. The only thing that’s currently quite annoying is that it doesn’t allow user to add a single file to compile. You have a add the whole folder, then delete all the files that you don’t want to compile. Other than that, the functionality is comparable to SimpLESS.

For more GUI compilers, you may want to read up here: https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js

9. Configure AMPPS

  1. Download the latest version from http://www.ampps.com/downloads (as of writing it was version 2.0)
  2. Launch the app and Start both Apache and MySQL.
  3. Launch a browser and go to address http://localhost/
  4. You will be asked if you would like to make AMPPS secure. Go ahead and enter a password.
  5. The root folder is by default at /Applications/AMPPS/www/
  6. If you create a subfolder under the root folder, you can access your subfolder site using the URL http://localhost/subfolder

I’m trying out AMPPS now and considering if I should migrate all my projects from MAMP to AMPPS. The main advantage for me is that AMPPS supports both Windows and Mac, while MAMP is only for Mac. Other than that, I don’t feel much difference between the 2, as of now.


5 Comments

  • Glenn Naessens

    March 13, 2012

    There’s no real reason to use MAMP when you’re a little Apache/MySQL/command line-savvy. The server that comes with your mac is already capable of running PHP and MySQL can be downloaded from their site. Here’s a tutorial about it. http://superfancy.net/php-mysql-apache-in-mac-osx-leopard/

    Reply
    • Andrews Ang

      March 13, 2012

      You’re right Glenn. But I’m a little lazy to do the work. MAMP is an easy way out for me. I’ll update the post with the link provided. In case it helps someone more savvy. 🙂

      Reply
  • wesamly

    January 5, 2013

    I am using Komodo Edit, and it is really great. Thanks for sharing.

    Reply
  • Robert Bonner

    May 2, 2013

    Hello, I have been having problems with Aptana Studio 3 and mamp. I can not get Aptana Studio to view my php page through htdocs. I have done a lot of looking into this and can find much info on how to. I am on a macbook pro. Any help would be much appreciated.

    I am working in DWcs6 for now but I like it when I highlight a div tag and the closing one highlights also, DWcs6 does not do this.

    Reply
    • Andrews Ang

      May 2, 2013

      Hi Robert,

      I didn’t use the default root because it didn’t work for me too.

      Open MAMP, go to “Preferences”, under “Apache” tab, change the Document Root to somewhere else. I like to put it under

      /Users/your_username/Sites

      This folder is automatically created prior to Mountain Lion. If you purchased the MacBook with Mountain Lion then most probably this folder doesn’t exist. You can always create it or choose another folder. 🙂

      When you launch http://localhost:8888 next time, it will read directly from this folder.

      Additional info:
      If you have subdirectories inside this folder, simply use http://localhost:8888/subfolder

      Hope this helps,
      Andrews

      P/S: I will add this in this article for future reference.

      Reply

Leave a Reply