Setting up my Mac development environment step by step. To be used as a further reference and always open for improvement.

For keyboards with a default German (Switzerland) setup it is advised to add the English (US) keybindings in order to have easier access to special characters, especially braces. Also a global keyboard shortcut can be added to quickly switch between the keyboard layouts.

Install Xcode (from the AppStore)

After the successful installation open it and install the command line tools for OS X.

If you are on a machine with limited space you could instead just install the command line tools by themselves by running xcode-select --install from the command line.

Install Homebrew

  ruby -e "$(curl -fsSL"

Set the correct permissions for the /usr/local folder so we do not run into permission issues with things like Node

  sudo chown -R `whoami` /usr/local

Install iTerm2 as a better command line interface

  brew tap Caskroom/cask
brew install Caskroom/cask/iterm2

Alternatively visit the iTerm2 website and download the official beta for version 3 of iTerm2 which contains some major improvements. It can be downloaded through here.

Configure iTerm2 (Recommendations)

  • Settings > Profiles: Set Working Directory to Reuse previous session's directory
  • Make some color schemes available by cloning this repo:
    git clone

  • Import the downloaded color schemes and select the one you like. It is advised to use the same color scheme in your terminal as in your editor. In our case at the time of this writing this would be the Seti scheme.
  • Install the command line optimized powerline fonts by running these commands:
    git clone
  cd fonts

  • Delete the cloned fonts folder if you do not need it anymore.
  • Select a font that you like. Because we will be using an oh-my-zsh theme later on it is recommended to select one of the just installed Powerline fonts.
  • Enable unlimited scrollback in the terminal



Atom is available through Homebrew by running:

  brew install Caskroom/cask/atom

Once installed you can start Atom right from the command line by typing atom then pressing return.


Atom is a highly configurable editor built on several packages and themes. Find and install the following packages on the respective settings page:

  • atom-ternjs
  • autocomplete-modules
  • autocomplete-paths
  • block-comment
  • docblockr
  • emmet
  • find-selection
  • git-plus
  • javascript-snippets
  • language-apache
  • language-babel
  • language-docker
  • language-gitignore
  • language-ini
  • language-jade
  • language-javascript-jsx
  • linter
  • linter-eslint
  • linter-jshint
  • linter-php
  • linter-sass-lint
  • merge-conflicts
  • open-in-browser
  • php-twig
  • pigments
  • svg-preview
  • tabs-to-spaces
  • wordpress-api

For a nice visual setting choose one of the many themes available. At the time of this writing the Seti UI and Seti Syntax are recommended:

  • Atom Material
  • Atom Material

After installing these packages they have to be enabled in the Themes section of your editor settings.

Also go through your main editor settings and set them up how you like your editor. It is adviced to use a similar or if possible the same font as in the terminal for your editor.


At this point in time we add two snippets to ease Scss writing (one for documentation using KSS, one to make imports easier). Copy these to your snippets file (if you already have other Scss snippets installed leave out the first line):

  'KSS Documentation Block':
    'prefix': 'kssBlock'
    'body': """
    // ${1:Title}
    // ${2:Description}
    // Markup: ${3:Markup File}
    // Style guide: ${}

  'Scss Importer':
    'prefix': 'scssImport'
    'body': """
    @import '${1:name}/config';
    @import '${1:name}/styles';



  • Make sure you have zsh installed by running zsh --version
  • Oh-My-Zsh uses curl or wget and git. Curl and git come preinstalled on your Mac however we want to make sure we are using their latest versions and therefore install these tools through homebrew:
  brew install curl
brew install wget
brew install git


Install Oh-My-Zsh by running one of the following commands:

Using curl:

  sh -c "$(curl -fsSL"

Using wget:

  sh -c "$(wget -O -)"

You will need to confirm the change of shell with your password then you will be all set.


Configure Oh-My-Zsh to your needs by installing/activating some plugins and choosing a theme. We also add some aliases we regularly need.

Further documentation can be found directly in the oh-my-zsh github repo.

The configuration is done by opening the ~/.zshrc file in your favorite text editor (which obviously should be the just installed atom ;)). You can directly open the file in Atom by running the following command from your command line:

  atom ~/.zshrc


Feel free to browse through the whole theme catalog then choose one you like. At the moment we are using the Bullet Train theme, installation instruction can be found here. Basically you can just run:

  curl -o - | zsh

If using Spaceship you might want to add the following configuration options to optimize your experience:

  # customize the theme






Plugins mostly add aliases and some functions for basic needs of certain tools. Look for plugins= in your .zshrc file and change it to the following:

plugins=(bower brew extract git nvm osx wp-cli)

Feel free to browse through the whole plugin catalog and add those you need to your liking.


For better code organization we define the aliases in their own file. Add it as ~/.oh-my-zsh/custom/alias.zsh. The following three aliases are used regularly:

  alias npm-outdated='npm outdated --depth=0'
alias outdated='bubu && gem outdated && gem update && gem cleanup && npm-outdated -g'
alias somz='source ~/.zshrc'

Add all other commands you use on a regular bases to this file after checking that it is not already covered by one of the plugins.

Functions It is recommended to add functions as their own zsh files to the ~/.oh-my-zsh/custom folder.

The copy-ssh-key() function is useful if you want to write your public key to a servers authorized_keys file. Add it as follows to the folder mentioned above:

  function copy-ssh-key() {
  cat ~/.ssh/ | ssh $1 "mkdir -p ~/.ssh && cat >>  ~/.ssh/authorized_keys"

This lets you call copy-ssh-key(user@server) which in turn automatically adds your public key to the server's file which means you then can connect without being asked for a password.

Alternatively you can run brew install ssh-copy-id which will install the same basic functionality and lets you run ssh-copy-id user@server to copy your keys to the server.

Finishing To apply these changes to your terminal either restart iTerm2 or run source ~/.zshrc in all open terminal windows and tabs.


We use NVM to manage node:

  brew install nvm

Now make sure NVM's working directory exists by running mkdir ~/.nvm then create a new file called nvm.zsh in your ~/.oh-my-zsh/custom folder and paste the following line:

  export NVM_DIR="$HOME/.nvm" && . "$(brew --prefix nvm)/"

Reload your shell (source ~/.zshrc) then run nvm install node which fetches the latest release of node. Then run nvm use node to check out the current version of node.

This is it: Node is now up and running. Check that it was installed properly and is in your path by running node -v and npm -v. If you get back a version number, the installation has been successful.

If you now enter a directory that contains an .nvmrc file, you can run nvm use which automatically switches to the Node version specified in said file.

Node Packages

Node packages are managed by npm which was automatically installed with Node. Some of these packages are good to have installed globally which we will do right here by running:

  npm install -g bower grunt-cli jshint



We manage Ruby versions through rbenv which is also distributed through Homebrew. Install it by running:

  brew install rbenv

Follow the instructions given at the end of the installation and copy the two lines to a new file in your ~/.oh-my-zsh/custom folder (i. e. rbenv.zsh). Since we are using zsh we need to correct the second command to:

  if which rbenv > /dev/null; then eval "$(rbenv init - zsh)"; fi

Which just adds zsh after the dash. After saving the file again run source ~/.zshrc. If you do not get any error messages the installation was successful.

Install Ruby

To install ruby versions and gems we first need to add the ruby-build dependency by running:

  brew install ruby-build

Then we can run rbenv install -l to list all available versions of ruby. Currently the latest stable version is 2.2.2 so we run

  rbenv install 2.3.1

Then we need to set this version as the new global default so it is used without having to configure something. This installation might take a while. After it has successfully finished run

  rbenv global 2.3.1

to use the just installed version as global default. Finish up your installation by running:

  rbenv rehash

This command is needed after you install a new version of Ruby, or install a gem that provides commands.


Ruby provides many software packages in gems. To make sure these run nicely and without problems update the rubygems package by running:

  gem update --system

As these gems are used in current or some older projects this is a good place to install these:

  gem install sass scss_lint hologram susy bundler

Remember to rehash your rbenv after this installation by running rbenv rehash.

Local Server

Now follows the set up of the local development server for your machine. For this at this moment we use the server provided by OS X. This setup follows this tutorial.


Since Apache comes bundled with OS X we just need to start the server up by running

  sudo apachectl start

You can check that the server is actually running by going to localhost in your browser and should see a simple It Works! which indicates that the server is indeed up and running.


A few configuration changes have to be made to the server. Therefore run atom /private/etc/apache2/httpd.conf/ to open the configuration file in your text editor. To enable PHP search for php (cmd+F) and uncomment the line it is found in (remove the # or simply press cmd+/). The line should now read:

  LoadModule php5_module libexec/apache2/

Should you have installed or want to install your own version of Homebrew (recommended, see next section) add the following line instead of the above:

  LoadModule php5_module    /usr/local/opt/php56/libexec/apache2/

Replace php56 and libphp5 with the version you specified from Homebrew. Upon installation of PHP this path will be output to the console as a reference for you.

As these modules are needed/used by many standard CMS applications we uncomment them here as well. Make sure that the following two lines of the config are also uncommented:

  LoadModule rewrite_module libexec/apache2/
LoadModule hfs_apple_module libexec/apache2/

Comment out the following code around line 220 if you are on Yosemite or up:

  <Directory />
  AllowOverride none
  Require all denied

Then activate (uncomment) the mod_vhost_alias module arount line 160:

  LoadModule vhost_alias_module libexec/apache2/

Finally we need to include the httpd-vhosts.conf file by again uncommenting the following line:

  Include /private/etc/apache2/extra/httpd-vhosts.conf

Since we run this webserver only under our account we can change the user and group it is run under. To find out what to enter type id in your terminal. You get some users and groups back but want to change to the main user and group which are the first two entries. Take the number or name of the user or group and replace it around line 180 in the config files (search for User _www to find the exact place). The new entry should be:

  # #501 if your user is the first one created
User [your user id  or name]
# #20 for the standard group staff
Group [your group id or name]

Be careful to add the # before the id's should you choose to use them.

Additional Changes for PHP 7.0 If you plan to use PHP 7.0 in your local development environment make sure to add the following changes as well.

Find the following block:

  <FilesMatch "^\.([Hh][Tt]|[Dd][Ss]_[Ss])">
  Require all denied

Paste the following below:

  <FilesMatch \.php$>
  SetHandler application/x-httpd-php

We also need to explicitly set up the directory indexes for PHP (so the server not only looks for index.html but also for index.php within folders. To do this find the following block:

  <ifModule dir_module>
  DirectoryIndex index.html

and add the index.php reference as follows:

    <IfModule dir_module>
    DirectoryIndex index.php index.html

Virtual Hosts

The configuration set up in this file also defines the file system you will have to use for your development needs. Open the config file with Atom by running atom /private/etc/apache2/extra/httpd-vhosts.conf. In the file remove all code (you can leave the commented code in as a reference if you wish so) and replace it with the following:

  <Directory "/www">
    Options Indexes MultiViews FollowSymLinks
  AllowOverride All
  Order allow,deny
  Allow from all

<VirtualHost *:80>
    VirtualDocumentRoot "/www/home/wwwroot"
  UseCanonicalName Off

<VirtualHost *:80>
    VirtualDocumentRoot "/www/sites/%1/wwwroot"
  ServerAlias *.dev
  UseCanonicalName Off

Now load in your new configuration by restarting the server:

  sudo apachectl restart


To dynamically build a sort of table of contents page a for your URL you can clone the following github repo into the respective folder and are ready to go.

  cd /www/home
git clone wwwroot

Then make sure to go into the cloned directory and edit the config.sample.php file, then saving it as config.php. One important edit to be made is to change the $dir array to your folder structure, in our case:

  $dir = array("/www/sites/*");

Also add a new array to your $devtools array to link to the phpMyAdmin installation we will be setting up next:

  array( 'name' => 'phpmyadmin', 'url' => '' ),

Suggested Folder Structure

This setup suggests the use of the folder structure that is outlined in the tutorial. To change this one could edit the virtual hosts config file to represent different folders.

The usual workflow to setup a new web project will now be to add a new folder in /www/sites which name will also be its domain. Meaning if you add the folder /www/sites/werbelinie, you will have access to that page by calling in your browser. All files that should be served by the browser must then be added into the /www/sites/werbelinie/wwwroot folder which allows us to put source files into the werbelinie folder and keeps our files nicely organized.


To be able to best simulate the given server environment we will install multiple PHP versions through Homebrew and add a switcher script which allows you to easily change to the one needed. For now we install PHP 5.6 and PHP 7.0. To install these versions run:

  brew tap homebrew/homebrew-php
brew install php56
brew unlink php56
brew install php70

You might need to tap into another bottle first, just follow the instructions given to you by Homebrew. If errors are thrown during the installation of the PHP versions (usually looking like configure: error: Cannot find OpenSSL's <evp.h>) the Xcode command line tools need to be reinstalled with xcode-select --install.

To configure PHP edit the ini file which can be found at /usr/local/etc/php/$version/php.ini (where $version is i.e. 5.6 or 7.0). Also make sure to enable your own PHP version in the /private/etc/apache2/httpd.conf file. Add the following line to it:

  LoadModule php5_module    /usr/local/opt/php56/libexec/apache2/

PHP Configuration

Since we will be using our local server primarily for development work of content management systems which allow users the upload of sometimes relatively large files we need to adjust our PHP configuration to account for these larger files. To have a production realistic local environment you should check out the filesize limit you can upload through php on your preferred webhost. To increase the filesize open the /etc/php.ini resp. /usr/local/etc/php/5.6/php.ini file in your favorite text editor (should this file not yet exist find php.ini-default and make sure to save it as php.ini after editing). Now we adjust the following setting (set the value according to the ones given on your production server, if you can configure that one yourself choose reasonably high values):

  ; around line 396
memory_limit = 256M

; around line 663:
post_max_size = 256M

; around line 795
upload_max_file_size = 256M

The memory_limit describes the maximum amount of memory a script will be allowed to consume while the post_max_size sets the maximum size of a POST request that will be accepted by the server. Lastly the upload_max_file_size let's us set the maximum accepted size for an uploaded file. So if you have forms with multiple file upload fields and expect large files you should probably set the first to values to double of the last one. For the configuration to work and make sense the values must be less or equal from top to bottom.

It is also recommended to manually set your time zone. Do this by searching through the file for date.timezone, uncomment the line (around l. 930) and add your own. You can find a list of all valid timezone here. As an example:

  date.timezone = Europe/Zurich

PHP Switcher

We need to install this handy script to ease changing of PHP versions. Enter the following commands to set up the script:

  mkdir -p ~/bin/
curl -L > ~/bin/sphp
chmod +x ~/bin/sphp

To make the script executable from everywhere in your command line make sure that ~/bin/ is in your path. Check your path with the echo $PATH command. If the folder does not show up there edit your path in the .zshrc file or execute:

  export PATH=$PATH:/Users/{your_user}/bin

Make sure to replace {your_user} with your actual username. We now need to reconfigure our Apache server to be able to work with the sphp script. Reopen the config file in /private/etc/apache2/httpd.conf/ and search for LoadModule php5_module. Change the line to:

  LoadModule php5_module /usr/local/lib/
#LoadModule php7_module /usr/local/lib/

Take care to remove all other commented out LoadModule php5_module lines now, in order for the script to work correctly. If you want to use PHP 7.0 make sure to also enter the commented out LoadModule php7_module line.

Now you can run the command to switch PHP versions:

  sphp 70

If there are any errors showing up about linking or unlinking you might need to manually unlink the PHP version mentioned in the error message by running brew unlink phpXX where XX denotes the version. Also during the script you will need to enter your administrator password as usually your Apache control will only be available through sudo.


Install MySQL through Homebrew by running:

  brew install mysql

Follow the instructions given during the installation and copy the command to add mysql to launchd to start it at login.

MySQL Configuration To secure your MySQL installation a handy tool is deployed with MySQL by default. Run the following command to secure your installation:


Follow the steps, entering Y for every question to secure your installation. Make sure you remember your root password or write it down somewhere so you do not lose access to your databases.


This is a tool that allows us to use wildcard subdomain names. Read more about it on the tutorial page linked above. The tools is installed and set up by running:

  brew install dnsmasq

cd $(brew --prefix)
mkdir etc # if the folder already exists you get an error here but no need to worry, just continue
echo 'address=/.dev/' > etc/dnsmasq.conf
sudo cp -v $(brew --prefix dnsmasq)/homebrew.mxcl.dnsmasq.plist /Library/LaunchDaemons
sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
sudo mkdir /etc/resolver
sudo bash -c 'echo "nameserver" > /etc/resolver/dev'


To make working with MySQL databases a little easier we install phpmyadmin for the server through Homebrew. Start the installation by running

  brew tap homebrew/php
brew install phpmyadmin

You get some instructions once the installation has finished. Follow these by adding the necessary configuration to the httpd.conf. Do not forget to restart Apache after changing the configuration: sudo apachectl restart.

Then execute atom /usr/local/etc/ and add your blowfish secret. You can generate a token here.

To make phpmyadmin work we need to fix the 2002 MySQL socket error by running these two commands:

  sudo mkdir /var/mysql
sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

Additional Software

We now install some additional software that is needed to make everything work, depending mostly on Homebrew.


This piece of software is needed for all kinds of image manipulation.

  brew install imagemagick


We need this for Wordpress translations.

  brew install gettext
brew link gettext --force

The second line is needed for gettext to actually work. Homebrew does not like this too much and it might lead to errors, but you generally should be fine. Should you ever run into any errors or strange behavior just run the following:

  brew unlink gettext


Must have for team communication.

  brew cask install slack

Vagrant (and VirtualBox)

Needed for virtual boxes and possible local server solution of the future.

  brew cask install virtualbox
brew cask install vagrant
brew cask install vagrant-manager


Make sure you install the latest versions of the major browsers in Google Chrome Canary and Firefox Developer Edition additionaly to your standard browsers.


For our FTP needs especially on older pages or for very quick and dirty edits we can use Filezilla which is also offered by Homebrew:

  brew cask install filezilla

Setting Up Git

Add some common git configuration options to prepare for usage. First let's set up the user:

  git config --global "Your Name Here"
git config --global ""

We also add support for the OS X keychain so we do not have to type the password everytime we push or pull via https:

  git config --global credential.helper osxkeychain

Default .gitignore File

Also make sure to add a default .gitignore file to your installation so you do not have to repeat the same statements over and over again (especially for projects you develop mostly locally. Add these contents to a ~/.gitignore file:

  # Folder view configuration files

# Thumbnail cache files

# Files that might appear on external disks

# Compiled Python files

# Compiled C++ files

# Application specific files

Create an SSH Key (for Github)

If you do not yet have a ~/.ssh folder go ahead and create it. If it is already there check the directory listing to see if there is already a file named or available. If you do not yet have a key you can create one by running the following command (of course replacing your email address):

  ssh-keygen -t rsa -C ""

Go ahead with the defaults and press enter when asked anything in the following dialog.

This key can now be added to your github account (under settings).

Configuring OS X

The Dock

To get the dock better organized some spacing can help. One can add empty dock elements that act as spacers through the command line by running this command:

  defaults write persistent-apps -array-add '{tile-data={}; tile-type="spacer-tile";}'

as many times as you want spacers. Then to make them appear restart the dock by running:

  killall Dock


Set some common options for the finder:

Show dotfiles in Finder by default:

  defaults write AppleShowAllFiles TRUE

Show status bar in Finder by default:

  defaults write ShowStatusBar -bool true

Use column view in all Finder windows by default:

  defaults write FXPreferredViewStyle Clmv

Avoid creation of .DS_Store files on network volumes:

  defaults write DSDontWriteNetworkStores -bool true

Allow text selection in Preview/Quick Look

  defaults write QLEnableTextSelection -bool true

Quick Look Plugins

All of them

  brew cask install qlcolorcode qlstephen qlmarkdown quicklook-json qlprettypatch quicklook-csv betterzipql qlimagesize webpquicklook suspicious-package


Preview source code files with syntax highlighting.

  brew cask install qlcolorcode


Preview plain text files without or with unknown file extension.

  brew cask install qlstephen


Preview Markdown files.

  brew cask install qlmarkdown


Preview JSON files

  brew cask install quicklook-json


Preview .patch files.

  brew cask install qlprettypatch


Preview CSV files.

  brew cask install quicklook-csv


Preview archives

  brew cask install betterzipql


Display image size and resolution

  brew cask install qlimagesize


Preview WebP images

  brew cask install webpquicklook

Suspicious Package

Preview the contents of a standard Apple installer package

  brew cask install suspicious-package


Enable the Develop menu and the Web Inspector:

  defaults write IncludeDevelopMenu -bool true
defaults write WebKitDeveloperExtrasEnabledPreferenceKey -bool true
defaults write "" -bool true

Add a context menu item for showing the Web Inspector in web views:

  defaults write NSGlobalDomain WebKitDeveloperExtras -bool true


Use the system native print preview dialog in Chrome:

  defaults write DisablePrintPreview -bool true
defaults write DisablePrintPreview -bool true


Copy email addresses as instead of Foo Bar <> in Mail:

  defaults write AdressesIncludeNameOnPasteboard -bool false

Updating to OS X 10.11 – El Capitan

The update resets some default settings that need to be reapplied. Firstly we need to reset permissions on the /usr/local/ folder:

  sudo chown -R `whoami` /usr/local

Confirm this command with your password and you are set up to use Homebrew again.

Next we make sure to have the latest versions of our software for the new OS by running the outdated alias (see above). At the time of this writing there is a bug with the brew npm update and an error might be thrown. If you encounter this run npm install -g npm@latest which should solve the problem.

atom /private/etc/apache2/httpd.conf/ The update resets or apache config and replaces it with a new file. However your old configuration is stored in the httpd.conf~previous file. To set it back up just rename it to httpd.conf (you might want to first backup the OS default httpd.conf file though). To do this run:

  open /private/etc/apache2

Rename the files straight from the finder. You wil probably need to confirm these changes with your password.

After adjusting these filenames make sure to restart your server:

  sudo apachectl restart

WordPress Development

Some helpers for WordPress development can be installed through Homebrew as well.


A command line interface to interact with your WordPress installation. It can be installed by running:

  brew install homebrew/php/wp-cli

There is also a plugin for Oh-My-Zsh which integrates WP CLI better with your command line. Therefore reopen your ~/.zshrc file and change around line 53

  plugins=(git brew extract bower osx)

to look like

  plugins=(git brew extract bower osx wp-cli)

We basically just add the WP CLI plugin to this list. This adds some custom aliases as well as bash completion for WP CLI.

Make sure to restart your iTerm application or source the configuration again: source ~/.zshrc.