Checklist to install multiuser development environment in OS X Mountain Lion

This list in not exhaustive, just my bare minimum for frontend purposes. I’m not dealing with Rails, PostgreSQL, MongoDB or other server tools since it’s not my day-to-day use. Just yet. It’s surprising that you need so many console tools these days to do frontend, but things fall apart, and most of them really improve your performance in many ways.

Installation for one or multiple users would be the same, but there are tasks we will perform as admin user so that we can share part of the environment across multiple users, who will only need to configure personal data (Git, $PATH, Sublime or other editor, …). We are using Mountain Lion but the following should work the same in older systems, down to at least Leopard or Snow Leopard.

Developer environment installation by admin user:

  • If we are going to use the complete Apple developers set up, including iOS simulators, we need to install XCode (from the Mac Store), then open it, preferences, downloads, install command line tools and the needed simulators.
  • If we don’t need iOS simulators, just go to and download, then install the Command line tools for your system. It’s around 200Kb only.
  • Open a Terminal window and check if you have properly installed build tools:
which gcc

(it should return /usr/bin/gcc)

  • Then we will install homebrew, a nice package manager for OS X, from the terminal:
ruby -e "$(curl -fsSL"
  • We are going to install Git now to have a control version in our projects without the need of a centralised repository:
brew install git
  • Update homebrew now:
brew update
  • Install rbenv to manage different versions of Ruby:
brew install rbenv

To use Homebrew’s directories rather than ~/.rbenv add to your profile:

export RBENV_ROOT=/usr/local/var/rbenv


brew install ruby-build
  • We are going to install Compass, a CSS framework that uses Sass stylesheets (make sure you code your Sass with ‘compass watch’ running in a terminal tab):
sudo gem install compass
  • Install node, several development tools are distributed as npm these days:
brew install node

We recommend prepending the following path to your PATH environment variable to have npm-installed binaries picked up: /usr/local/share/npm/bin

  • We love Grunt, a Javascript task runner. We use it to build our frontend files, minimize, JSlint and several other features. From version 0.4 on, command line tools are not included, you need to install separately:
npm install -g grunt-cli
  • Now you can install grunt locally on each of your project’s folder (even a specific version for each project). Best approach is following offical Getting started and create a package.json, then use npm install --save-dev to install npm modules locally
  • PhantomJS is used to create files from Javascript in terminal, in one of our favorite tools, named Grunticon (allows us to throw SVG icons into a folder and convert them into datauri inside your CSS, with PNG fallback). No more sprites :-)
brew install phantomjs
  • Install nanoc, a nice static site generator
sudo gem install nanoc

If we need the preview server of nanoc we need to install it::

sudo gem install adsf

We can use other preview servers, like Apache from our system, MAMP or even a LiveReload server.

  • Install MAMP, which lets you have Apache, MySQL and PHP environment in a second.
  • We are going to configure /etc/hosts file according to this tutorial: How to use vhosts in Wordpress development.
  • Install Go2Shell (from the Mac Store), which opens a terminal window to the current directory in Finder. We just need to drag the app to the icons bar in Finder.
  • We install Chrome now, with LiveReload, Web Developer, YSlow plugins.

If you’re going to use Wordpress, I recommend installing wp-cli so you can perform admin tasks from the terminal. You will need to add an alias for mysqldump

sudo ln -s /Applications/MAMP/Library/bin/mysqldump /usr/local/bin/mysqldump

Now you can go to your wordpress project folder in terminal and, for instance, perform a database backup just typing

wp db export

Developer environment config for each non admin users:

We have most of the environment set up ready, we just need some personal configurations. These will be performed by each non-admin user of the machine:

  • Open Finder and customize sidebars
  • We are heading to our personal folder ~/ and create an Applications folder. We are going to use this to install our programs, since /Applications will be used by programs installed by the system or admin for all users.
  • Install Dropbox (disclaimer, this is a recommendation link, both you and me will get extra space). Dropbox will let you have some Gb of your data backed up in the cloud and synchronized across your computers. It will require admin permissions to the folders in order to be installed.
  • Open /Applications folder and drag the app to the icons bar in Finder.
  • If you’re like me and prefer your finder to reveal hidden files, open Terminal and type:
defaults write AppleShowAllFiles -bool YES
killall Finder
  • Copy your public/private SSH keys from an older computer. If it’s the first time you need these (Git, for instance), just create your keys.
  • To configure your Git user, we can copy ~/.gitconfig from an older computer into ~/ or:
git config --global "Your name"
git config --global
  • Install SublimeText2 into our personal ~/Applications. You can buy it too! Or use Textmate, vim or whatever.
  • We are enabling Sublime access from terminal, pointing to a symlink in our bin (beware, link takes to the Sublime we just installed in our ~/Applications)
ln -s /Applications/Sublime\ Text\ /usr/local/bin/subl
  • If we open a new terminal window or tab (cmd+t) we should be able to open Sublime by typing
  • Install Sublime user prefs from an old computer, or use mine if you like them
  • Install the package with color and typography settings (I keep a copy in Dropbox), usually found in
“~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default”
  • Install Package Control from View > Show console, following these instructions
  • We can now install these packages from Package control: Emmet (previously known as Zen code), SuperCalculator (nice for px/em conversions), GitGutter (awesome, to see changes in gutter from last Git commit)
  • Install your .bash_profile from an old computer into ~/ or
  • Now you check if your .bash_profile includes PATH to our bin, grunt, and other tools:
export PATH=~/bin:/usr/local/share/npm/bin:/usr/local/share/npm/lib/node_modules/grunt/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin
  • Alternatively, much better approach is separate each path into a specific var (thanx @happywebcoder for the tip):
export MY_BIN_PATH="~/bin"
export NPM_BIN_PATH="/usr/local/share/npm/bin"
export GRUNT_BIN_PATH="/usr/local/share/npm/lib/node_modules/grunt/bin"
  • Open Chrome and authenticate with your login/password in order to start sync’ing our favorites, plugins, and so on.
  • If we are going to develop responsive sites (or sites adapted to be viewed in mobile gadgets) you will want to install Adobe Edge Inspect which lets you synchronize what you see in your browser to your mobile device, instantly, and even inspect your device for a debug session.

Other programs you may like:

I don’t work nor get anything from the following, I just think they are awesome apps:

  • We love TotalFinder, your Finder with Tabs! Buy it, it’s worth it.
  • CloudApp is an awesome service that stores screen captures and other files in the cloud.
  • Buy and install Transmit FTP, but don’t forget to use Git locally :-)
  • Buy and install Divvy a cool app that lets you manage your windows size very easily with shortcuts.