Skip to content

A beginner's guide to setting up a development environment on Mac OS X

Notifications You must be signed in to change notification settings

llbbl/mac-dev-setup

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mac OS X Dev Setup

This document describes howto setup a developer environment on a new Mac. We will set up PHP, nginx, Python, MySQL, Ruby, Node and Redis.

System update

First thing you need to do, on any OS actually, is update the system! For that: Apple Icon > Software Update...

System preferences

If this is a new computer, there are a couple tweaks I like to make to the System Preferences. Feel free to follow these, or to ignore them, depending on your personal preferences.

In Apple Icon > System Preferences:

  • Trackpad > Tap to click
  • Keyboard > Key Repeat > Fast (all the way to the right)
  • Keyboard > Delay Until Repeat > Short (all the way to the right)
  • Dock > Automatically hide and show the Dock

Apps

Google Chrome
www.google.com/chrome.

Firefox
https://www.mozilla.org/en-US/firefox/new/

Querious - MySQL Tool
http://www.araelium.com/querious/

Evernote - Storing notes and stuff
https://evernote.com/

Sublime3 - Text Editor
http://www.sublimetext.com/3

Ultraedit - Text Editor
http://www.ultraedit.com/downloads/uex.html

PhpStorm - IDE
https://www.jetbrains.com/phpstorm/

Git Tower - Version Control
http://www.git-tower.com

Github Desktop - Version Control
https://desktop.github.com

Affinity Designer - Illustrator, Vector editor
https://itunes.apple.com/us/app/affinity-designer/id824171161?mt=12

Airmail 2 - Email client
https://itunes.apple.com/us/app/airmail-2.5/id918858936?mt=12

Dash - Search Docs
https://itunes.apple.com/us/app/dash-3-api-docs-snippets./id449589707?mt=12

BetterSnapTool - Resizing windows
https://itunes.apple.com/us/app/bettersnaptool/id417375580?mt=12

Dropbox
https://www.dropbox.com/install

Google Drive
https://www.google.com/drive/

Adobe Photoshop
https://creative.adobe.com/products/download/photoshop

iTerm2

Since we're going to be spending a lot of time in the command-line, let's install a better terminal than the default one. Download and install iTerm2 (the newest version, even if it says "beta release").

In Finder, drag and drop the iTerm Application file into the Applications folder.

You can now launch iTerm, through the Launchpad for instance.

Let's just quickly change some preferences. In iTerm > Preferences..., under the tab General, uncheck Confirm closing multiple sessions and Confirm "Quit iTerm2 (Cmd+Q)" command under the section Closing.

In the tab Profiles, create a new one with the "+" icon, and rename it to your first name for example. Then, select Other Actions... > Set as Default. Finally, under the section Window, change the size to something better, like Columns: 125 and Rows: 35.

When done, hit the red "X" in the upper left (saving is automatic in OS X preference panes). Close the window and open a new one to see the size change.

Homebrew

Homebrew.

Install

An important dependency before Homebrew can work is the Command Line Tools for Xcode. These include compilers that will allow you to build things from source. Install Xcode from the Mac App Store.

Install the Xcode Command Line Tools directly from the command line: xcode-select --install

Finally, we can install Hombrew! In the terminal paste the following line (without the $), hit Enter, and follow the steps on the screen:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

One thing we need to do is tell the system to use programs installed by Hombrew (in /usr/local/bin) rather than the OS default if it exists. We do this by adding /usr/local/bin to your $PATH environment variable:

echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile

Open a new terminal tab with Cmd+T (you should also close the old one), then run the following command to make sure everything works:

brew doctor

PHP

brew tap homebrew/dupes

brew tap homebrew/versions

brew tap homebrew/homebrew-php

PHP56

brew install --without-apache --with-fpm --with-mysql php56

brew install php56-xdebug composer

PHP70

brew install --without-apache --with-fpm --with-mysql php70

brew install php70-xdebug php70-mcrypt composer

nginx

brew tap homebrew/nginx

brew install nginx

mkdir -p /usr/local/etc/nginx/logs mkdir -p /usr/local/etc/nginx/sites-available mkdir -p /usr/local/etc/nginx/sites-enabled mkdir -p /usr/local/etc/nginx/global mkdir -p /usr/local/etc/nginx/conf.d mkdir -p /usr/local/etc/nginx/ssl

rm /usr/local/etc/nginx/nginx.conf

curl -L https://gist.githubusercontent.com/llbbl/321c0c6981ccfd33f04e/raw/464e7f7852fbb81a39cdc716df172a6e51684414/osx-nginx.conf -o /usr/local/etc/nginx/nginx.conf

curl -L https://gist.githubusercontent.com/llbbl/a4635cd4985374374957/raw/3caa8da2345b98765a8c4ee0da367402e50f80af/php.conf -o /usr/local/etc/nginx/global/php.conf

curl -L https://gist.githubusercontent.com/llbbl/13594edde83da889603f/raw/9705f3e2c309a944e97294e296974741a3634557/common.conf -o /usr/local/etc/nginx/global/global.conf

LaunchRocket

A Mac PreferencePane for managing services with launchd.
https://github.com/jimbojsb/launchrocket

brew cask install launchrocket

Beautiful terminal

Since we spend so much time in the terminal, we should try to make it a more pleasant and colorful place. What follows might seem like a lot of work, but trust me, it'll make the development experience so much better.

Let's go ahead and start by changing the font. In iTerm > Preferences..., under the tab Profiles, section Text, change both fonts to Consolas 13pt.

Now let's add some color. I'm a big fan of the Solarized color scheme. It is supposed to be scientifically optimal for the eyes. I just find it pretty.

Scroll down the page and download the latest version. Unzip the archive. In it you will find the iterm2-colors-solarized folder with a README.md file, but I will just walk you through it here:

  • In iTerm2 Preferences, under Profiles and Colors, go to Load Presets... > Import..., find and open the two .itermcolors files we downloaded.
  • Go back to Load Presets... and select Solarized Dark to activate it. Voila!

Note: You don't have to do this, but there is one color in the Solarized Dark preset I don't agree with, which is Bright Black. You'll notice it's too close to Black. So I change it to be the same as Bright Yellow, i.e. R 83 G 104 B 112.

Not a lot of colors yet. We need to tweak a little bit our Unix user's profile for that. This is done (on OS X and Linux), in the ~/.bash_profile text file (~ stands for the user's home directory).

We'll come back to the details of that later, but for now, just download the files .bash_profile, .bash_prompt, .aliases attached to this document into your home directory (.bash_profile is the one that gets loaded, I've set it up to call the others):

$ cd ~
$ curl -O https://raw.githubusercontent.com/nicolashery/mac-dev-setup/master/.bash_profile
$ curl -O https://raw.githubusercontent.com/nicolashery/mac-dev-setup/master/.bash_prompt
$ curl -O https://raw.githubusercontent.com/nicolashery/mac-dev-setup/master/.aliases

With that, open a new terminal tab (Cmd+T) and see the change! Try the list commands: ls, ls -lh (aliased to ll), ls -lha (aliased to la).

At this point you can also change your computer's name, which shows up in this terminal prompt. If you want to do so, go to System Preferences > Sharing. For example, I changed mine from "Nicolas's MacBook Air" to just "MacBook Air", so it shows up as MacBook-Air in the terminal.

Now we have a terminal we can work with!

(Thanks to Mathias Bynens for his awesome dotfiles.)

Git

What's a developer without Git? To install, simply run:

$ brew install git

When done, to test that it installed fine you can run:

$ git --version

And $ which git should output /usr/local/bin/git.

Let's set up some basic configuration. Download the .gitconfig file to your home directory:

$ cd ~
$ curl -O https://raw.githubusercontent.com/nicolashery/mac-dev-setup/master/.gitconfig

It will add some color to the status, branch, and diff Git commands, as well as a couple aliases. Feel free to take a look at the contents of the file, and add to it to your liking.

Next, we'll define your Git user (should be the same name and email you use for GitHub and Heroku):

$ git config --global user.name "Your Name Here"
$ git config --global user.email "your_email@youremail.com"

They will get added to your .gitconfig file.

To push code to your GitHub repositories, we're going to use the recommended HTTPS method (versus SSH). So you don't have to type your username and password everytime, let's enable Git password caching as described here:

$ git config --global credential.helper osxkeychain

Note: On a Mac, it is important to remember to add .DS_Store (a hidden OS X system file that's put in folders) to your .gitignore files. You can take a look at this repository's .gitignore file for inspiration.

Source Code Pro Font

Download the release here:
https://github.com/adobe-fonts/source-code-pro/tree/release

Double click on the files in the OTF folder to install

Sublime Text

With the terminal, the text editor is a developer's most important tool. Everyone has their preferences, but unless you're a hardcore Vim user, a lot of people are going to tell you that Sublime Text is currently the best one out there.

Install Package Control
https://packagecontrol.io/installation

Some Packages to Install:

auto-save
https://packagecontrol.io/packages/auto-save

CSS Format
https://packagecontrol.io/packages/CSS%20Format

Dracula Color Scheme
https://packagecontrol.io/packages/Dracula%20Color%20Scheme

HTMLBeautify
https://packagecontrol.io/packages/HTMLBeautify

SCSS
https://packagecontrol.io/packages/SCSS

Theme - Spacegray
https://packagecontrol.io/packages/Theme%20-%20Spacegray

Just like the terminal, let's configure our editor a little. Go to Sublime Text 2 > Preferences > Settings - User and paste the following in the file that just opened:

{
	"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
	"font_face": "Source Code Pro",
	"font_size": 14,
	"ignored_packages":
	[
		"Vintage"
	],
	"theme": "Spacegray Eighties.sublime-theme"
}

Feel free to tweak these to your preference. When done, save the file and close it.

I use tab size 2 for everything except Python and Markdown files, where I use tab size 4. If you have a Python and Markdown file handy (or create dummy ones with $ touch dummy.py), for each one, open it and go to Sublime Text 2 > Preferences > Settings - More > Syntax Specific - User to paste in:

{
    "tab_size": 4
}

Now for the color. I'm going to change two things: the Theme (which is how the tabs, the file explorer on the left, etc. look) and the Color Scheme (the colors of the code). Again, feel free to pick different ones, or stick with the default.

A popular Theme is the Soda Theme. To install it, run:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/
$ git clone https://github.com/buymeasoda/soda-theme/ "Theme - Soda"

Then go to Sublime Text 2 > Preferences > Settings - User and add the following two lines:

"theme": "Soda Dark.sublime-theme",
"soda_classic_tabs": true

Restart Sublime Text for all changes to take effect (Note: on the Mac, closing all windows doesn't close the application, you need to hit Cmd+Q).

The Soda Theme page also offers some extra color schemes you can download and try. But to be consistent with my terminal, I like to use the Solarized Color Scheme, which already ships with Sublime Text. To use it, just go to Sublime Text 2 > Preferences > Color Scheme > Solarized (Dark). Again, this is really according to personal flavors, so pick what you want.

Sublime Text 2 already supports syntax highlighting for a lot of languages. I'm going to install a couple that are missing:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/
$ git clone https://github.com/jashkenas/coffee-script-tmbundle CoffeeScript
$ git clone https://github.com/miksago/jade-tmbundle Jade
$ git clone https://github.com/danro/LESS-sublime.git LESS
$ git clone -b SublimeText2 https://github.com/kuroir/SCSS.tmbundle.git SCSS
$ git clone https://github.com/nrw/sublime-text-handlebars Handlebars

Let's create a shortcut so we can launch Sublime Text from the command-line:

$ cd ~
$ mkdir bin
$ ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~/bin/subl

Sublime 3

$ ln -s "/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl

Now I can open a file with $ subl myfile.py or start a new project in the current directory with $ subl .. Pretty cool.

Sublime Text is very extensible. For now we'll leave it like that, we already have a solid installation. To add more in the future, a good place to start would be to install the Sublime Package Control.

Vim

Although Sublime Text will be our main editor, it is a good idea to learn some very basic usage of Vim. It is a very popular text editor inside the terminal, and is usually pre-installed on any Unix system.

For example, when you run a Git commit, it will open Vim to allow you to type the commit message.

I suggest you read a tutorial on Vim. Grasping the concept of the two "modes" of the editor, Insert (by pressing i) and Normal (by pressing Esc to exit Insert mode), will be the part that feels most unnatural. After that it's just remembering a few important keys.

Vim's default settings aren't great, and you could spend a lot of time tweaking your configuration (the .vimrc file). But if you're like me and just use Vim occasionally, you'll be happy to know that Tim Pope has put together some sensible defaults to quickly get started.

First, install pathogen.vim by running:

$ mkdir -p ~/.vim/autoload ~/.vim/bundle && \
    curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

Then create a file ~/.vimrc (you can use $ subl ~/.vimrc), and paste in the following:

execute pathogen#infect()
syntax on
filetype plugin indent on

And finally, install the Vim "sensible defaults" by running:

$ cd ~/.vim/bundle
$ git clone git://github.com/tpope/vim-sensible.git

With that, Vim will look a lot better next time you open it!

Python

OS X, like Linux, ships with Python already installed. But you don't want to mess with the system Python (some system tools rely on it, etc.), so we'll install our own version with Homebrew. It will also allow us to get the very latest version of Python 2.7.

The following command will install Python 2.7 and any dependencies required (it can take a few minutes to build everything):

$ brew install python

When finished, you should get a summary in the terminal. Running $ which python should output /usr/local/bin/python.

It also installed Pip (and its dependency Distribute), which is the package manager for Python. Let's upgrade them both:

$ pip install --upgrade distribute
$ pip install --upgrade pip

Executable scripts from Python packages you install will be put in /usr/local/share/python, so let's add it to the $PATH. To do so, we'll create a .path text file in the home directory (I've already set up .bash_profile to call this file):

$ cd ~
$ subl .path

And add these lines to .path:

PATH=/usr/local/share/python:$PATH
export PATH

Save the file and open a new terminal to take the new $PATH into account (everytime you open a terminal, .bash_profile gets loaded).

MySQL

Install

We will install MySQL using Homebrew, which will also install some header files needed for MySQL bindings in different programming languages (MySQL-Python for one).

To install, run:

$ brew update # Always good to do
$ brew install mysql

As you can see in the ouput from Homebrew, before we can use MySQL we first need to set it up with:

$ unset TMPDIR
$ mkdir /usr/local/var
$ mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

Usage

To start the MySQL server, use the mysql.server tool:

$ mysql.server start

To stop it when you are done, run:

$ mysql.server stop

You can see the different commands available for mysql.server with:

$ mysql.server --help

To connect with the command-line client, run:

$ mysql -uroot

(Use exit to quit the MySQL shell.)

Note: By default, the MySQL user root has no password. It doesn't really matter for a local development database. If you wish to change it though, you can use $ mysqladmin -u root password 'new-password'.

Node.js

Install Node.js with Homebrew:

$ brew update
$ brew install node

The formula also installs the npm package manager. However, as suggested by the Homebrew output, we need to add /usr/local/share/npm/bin to our path so that npm-installed modules with executables will have them picked up.

To do so, add this line to your ~/.path file, before the export PATH line:

PATH=/usr/local/share/npm/bin:$PATH

Open a new terminal for the $PATH changes to take effect.

We also need to tell npm where to find the Xcode Command Line Tools, by running:

$ sudo xcode-select -switch /usr/bin

(If Xcode Command Line Tools were installed by Xcode, try instead:)

$ sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

Node modules are installed locally in the node_modules folder of each project by default, but there are at least two that are worth installing globally. Those are CoffeeScript and Grunt:

$ npm install -g coffee-script
$ npm install -g grunt-cli

Ruby and RVM

Like Python, Ruby is already installed on Unix systems. But we don't want to mess around with that installation. More importantly, we want to be able to use the latest version of Ruby.

Install

When installing Ruby, best practice is to use RVM (Ruby Version Manager) which allows you to manage multiple versions of Ruby on the same machine. Installing RVM, as well as the latest version of Ruby, is very easy. Just run:

$ curl -L https://get.rvm.io | bash -s stable --ruby

When it is done, both RVM and a fresh version of Ruby 2.0 are installed. The following line was also automatically added to your .bash_profile:

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function*

I prefer to move that line to the .extra file, keeping my .bash_profile clean. I suggest you do the same.

After that, start a new terminal and run:

$ type rvm | head -1

You should get the output rvm is a function.

Usage

The following command will show you which versions of Ruby you have installed:

$ rvm list

The one that was just installed, Ruby 2.0, should be set as default. When managing multiple versions, you switch between them with:

$ rvm use system # Switch back to system install (1.8)
$ rvm use 2.0.0 --default # Switch to 2.0.0 and sets it as default

Run the following to make sure the version you want is being used (in our case, the just-installed Ruby 1.9.3):

$ which ruby
$ ruby --version

You can install another version with:

$ rvm install 1.9.3

To update RVM itself, use:

$ rvm get stable

RubyGems, the Ruby package manager, was also installed:

$ which gem

Update to its latest version with:

$ gem update --system

To install a "gem" (Ruby package), run:

$ gem install <gemname>

To update all gems or a particular gem:

$ gem update [<gemname>]

RubyGems keeps old versions of gems, so feel free to do come cleaning after updating:

$ gem cleanup

I mainly use Ruby for the CSS pre-processor Compass, which is built on top of Sass:

$ gem install compass --no-document

LESS

CSS preprocessors are becoming quite popular, the most popular processors are LESS and SASS. Preprocessing is a lot like compiling code for CSS. It allows you to reuse CSS in many different ways. Let's start out with using LESS as a basic preprocessor, it's used by a lot of popular CSS frameworks like Bootstrap.

Install

To install LESS you have to use NPM / Node, which you installed earlier using Homebrew. In the terminal use:

$ npm install less --global

Note: the --global flag is optional but it prevents having to mess around with file paths. You can install without the flag, just know what you're doing.

You can check that it installed properly by using:

$ lessc --version

This should output some information about the compiler:

lessc 1.5.1 (LESS Compiler) [JavaScript]

Okay, LESS is installed and running. Great!

Heroku

Heroku, if you're not already familiar with it, is a Platform-as-a-Service (PaaS) that makes it really easy to deploy your apps online. There are other similar solutions out there, but Heroku was among the first and is currently the most popular. Not only does it make a developer's life easier, but I find that having Heroku deployment in mind when building an app forces you to follow modern app development best practices.

Install

Assuming that you have an account (sign up if you don't), let's install the Heroku Client for the command-line. Heroku offers a Mac OS X installer, the Heroku Toolbelt, that includes the client. But for these kind of tools, I prefer using Homebrew. It allows us to keep better track of what we have installed. Luckily for us, Homebrew includes a heroku-toolbelt formula:

$ brew install heroku-toolbelt

The formula might not have the latest version of the Heroku Client, which is updated pretty often. Let's update it now:

$ heroku update

Don't be afraid to run heroku update every now and then to always have the most recent version.

Usage

Login to your Heroku account using your email and password:

$ heroku login

If this is a new account, and since you don't already have a public SSH key in your ~/.ssh directory, it will offer to create one for you. Say yes! It will also upload the key to your Heroku account, which will allow you to deploy apps from this computer.

If it didn't offer create the SSH key for you (i.e. your Heroku account already has SSH keys associated with it), you can do so manually by running:

 $ mkdir ~/.ssh
 $ ssh-keygen -t rsa

Keep the default file name and skip the passphrase by just hitting Enter both times. Then, add the key to your Heroku account:

$ heroku keys:add

Once the key business is done, you're ready to deploy apps! Heroku has a great Getting Started guide, so I'll let you refer to that (the one linked here is for Python, but there is one for every popular language). Heroku uses Git to push code for deployment, so make sure your app is under Git version control. A quick cheat sheet (if you've used Heroku before):

$ cd myapp/
$ heroku create myapp
$ git push heroku master
$ heroku ps
$ heroku logs -t

The Heroku Dev Center is full of great resources, so be sure to check it out!

Redis

Redis is a blazing fast, in-memory, key-value store, that uses the disk for persistence. It's kind of like a NoSQL database, but there are a lot of cool things that you can do with it that would be hard or inefficient with other database solutions. For example, it's often used as session management or caching by web apps, but it has many other uses.

Install

To install Redis, use Homebrew:

$ brew update
$ brew install redis

Usage

Start a local Redis server using the default configuration settings with:

$ redis-server

For advanced usage, you can tweak the configuration file at /usr/local/etc/redis.conf (I suggest making a backup first), and use those settings with:

$ redis-server /usr/local/etc/redis.conf

In another terminal, connect to the server with the Redis command-line interface using:

$ redis-cli

I'll let you refer to Redis' documentation or other tutorials for more information.

About

A beginner's guide to setting up a development environment on Mac OS X

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Shell 100.0%