Macbook Pro from 0 to Dev Machine

posted


I recently switched back to OSX for my development environment after some struggles expanding my developer workflow on Windows.

So, this is to help anyone else setting up a new Macbook Pro as a dev machine, and so I can refer back to it if I’m ever starting with another clean slate.

It’s a bit of a lengthy post, but I didn’t want to miss any important details.

I’m going to assume we’ve already booted up the laptop and set up user accounts and all that fun stuff.

We’ll be setting the machine up for various types of development, so if you don’t think a certain step applies to what you’ll be doing, feel free to skip it.

At the end of this guide you’ll have your machine set up for some serious Internet Alchemy.

NOTE: Several of the steps below involve personal preference, they will be noted as totally optional.

01. Updates

Go ahead and install any OSX updates so you don’t have to deal with them later. You can do other things while they are downloading, too.

02. Browsers

  1. Install Chrome
  2. Install Opera
  3. Install Firefox

Set your favorite browser as your default.

For me this is Chrome, switched over to the Dev Channel so that I can see what’s coming up and play around with some of the experimental features when I want to.

I also grab the Canary build of Chrome so I've got that to play around with and can easily access other Google accounts without adding them to my default Google session.

03. Download XCode

Start the download for XCode now, so you can move onto other tasks while waiting for it to finish. If, unlike me, you have a pretty fast Internet connection, go ahead and install it, too.

04. The IDE

Instead of going with a full-blown IDE for any particular language or environment, I prefer Sublime Text, which I can customize to work the way I want in pretty much any language I’ve ever wanted to work in.

After installing Sublime Text, run the command below to enable the subl command in your Terminal.

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

05. Utilities (optional)

Install the various utilities that you will be using. For me this list looks like:

  1. Alfred + Powerpack
  2. Anvil
  3. f.lux
  4. Dropbox
  5. ImageOptim
  6. ImageAlpha
  7. Cinch until I find a better alternative

This will help run down the clock while we’re waiting for that XCode download.

06. Install XCode

Hopefully by now you’ve got XCode downloaded, so it’s time to run the installation. If not, go get some coffee, or a sandwich.

07. Install XCode Command Line Tools

Once XCode has installed, open it up and then click on Xcode>Preferences.

Select the Downloads tab from the Preferences navigation and install the Command Line Tools, we’ll need these installed for a few steps later on, and while you’re in there install the various Simulators that are available.

08. Upgrade Terminal (optional)

So, Terminal is okay as is, but it’s not quite what I’m looking for.

Let’s fix that by installing TotalTerminal.

Once it’s installed, I like to set the keyboard shortcut to CTRL + ~, so it kind of has that Quake console feel when you start it up, but the CTRL still allows you to utilize the ~ key.

Now is a good time to set up your ~/.bash_profile and ~/.bashrc files, as well as your ~/.gitconfig.

I like to keep all my aliases and $PATH variables and customizations in ~/.bashrc, so my ~/.bash_profile is pretty much just this:

# Load the .bashrc configuration whenever .bash_profile (this file) is sourced
if [ -f ~/.bashrc ]; then
    source ~/.bashrc
fi

09. Stop Some Sudos

Instead of having to sudo when we want to install npm packages and ruby gems (if you run rbenv you won't have to worry about sudoing your gem installs, anyway), let’s give ourselves full control of the /usr/local directory.

Run this command:

sudo chown -R $USER /usr/local

10. Install Homebrew

Get Homebrew installed by running their recomended installation command in your terminal

After this, go ahead and run brew doctor to make sure there isn’t some issue that will prevent Homebrew from working correctly.

Then run brew update to make sure everything is up to date.

NOTE: You could go with MacPorts if that’s your thing, but the rest of these steps will assume you went with Homebrew.

11. Install nodejs

Download and install nodejs, which will also install npm for you.

12. Yeoman

Let’s install Yeoman, Grunt, and Bower.

Run this command:

npm install -g yo grunt bower

Now would be a good time to install any yo generators you want to use.

13. Install rbenv

rbenv lets you easily manage your ruby versions for specific apps.

Run this command:

brew install rbenv ruby-build`

Because we used Homebrew, we’ll need to add a line to the end of our ~/.bashrc file:

eval "$(rbenv init -)"

14. Install SASS

I prefer SASS as my CSS preprocessor, but you could go with Stylus, LESS, or whatever you prefer here.

gem install sass

With CodeKit, we don’t necessarily need to install SASS, but I prefer to use my own version so that plug-ins are available.

15. Install Compass

I like to use Compass, and you could also install Bourbon and any other SASS frameworks/libraries you prefer.

Run this command:

gem install compass

Now would be a good time to install all the preprocessor plug-ins you like using.

16. Install PhoneGap

For hybrid mobile apps, we’ll be using PhoneGap, so let’s install the PhoneGap cli.

Run this command:

npm install -g phonegap cordova ios-sim ios-deploy

17. Apache, MySQL, & PHPMyAdmin

For PHP development, we’ll want to get Apache and MySQL up and running. I also prefer setting up PHPMyAdmin for a simple GUI for database administration.

If you’re on Mountain Lion, like me, these aren’t set up by default anymore, but you can follow this detailed guide to setting up Apache, MySQL, and PHPMyAdmin on Mountain Lion.

When you’ve finished following that guide, come back and follow the rest of this guide.

Okay, now that you’ve got everything installed, let’s prevent MySQL permission errors because of the command we ran earlier to allow us to run npm install -g and gem install without sudo.

Run this command:

sudo chown -R mysql /usr/local/mysql/data

18. Pow + Apache + PHP Rack Apps

If you already set up Anvil, you already have Pow installed, but we’ll want Pow and Apache to play nice together, and we’ll also want to set things up so that PHP apps can be run through Pow’s rack server and give us the nice .dev domain for local testing.

This is a multi-part process, so make sure you don’t miss a step.

First, we’ll be setting up Pow to play nice with Apache. There is another very detailed guide you can follow, but make sure to read through the troubleshooting, as you will likely need to perform those steps to get things up and running correctly: Running Pow with Apache.

Once you’ve followed that guide, come back for the rest of the steps.

Second, we’ll need to set up rack to work with PHP apps, too.

Run these commands:


curl -O https://raw.github.com/gist/4129846/7ae1709453a8a19ce9c030bf41d544dd08d96d85/php.rb
mv php.rb brew --prefix/Library/Formula
brew install php --with-mysql

Then run this command:

gem install rack-legacy rack-rewrite

Now, download this config.ru file and save it to ~/Sites/config/config.ru.

It’s the same as the config.ru found in this guide, except I commented out one line that was preventing my CSS and JS files from loading in WordPress sites running through Pow.

From now on you can use the command below to symlink the config.ru file into your PHP app’s directory. I prefer to add this command to an alias that I use when initializing my projects.

ln -s ~/Sites/config/config.ru

19. Install powder

Powder gives us an easy command line interface for setting up apps on Pow.

Run the following command:

gem install powder

20. Generating xip.io URLs

If you’re working on a team and you’re on the same network, sometimes it’s nice to be able to send those local development URLs to your team for review.

It’s also nice to have a simple URL you can point your mobile devices to for testing.

So, let’s set up a simple way to generate URLs through xip.io so we can access our .dev site from other devices or so our teammates can see them.

First, download xip.io.scpt and save it to ~/Sites/config/xip.io.scpt.

Now, whenever you set up a project, symlink the xip.io.scpt file using this command:

ln -s ~/Sites/config/xip.io.scpt

Just like the config.ru symlink above, I add this command to an alias I use when initializing a project.

Then edit your ~/.bashrc to add this alias:

alias xipit='osascript xip.io.scpt'

So now we can run the xipit command in Terminal to automatically copy the xip.io URL for the project to our clipboard and also print the URL to the Terminal.

21. Setting up the alias

My project initialization alias is pretty personal to my tastes, so here’s some simple examples of what you may want yours to look like.

First, an alias that symlinks our xip.io.scpt file, adds the app to Pow, and then opens the link in our default browser:

alias project-init='ln -s ~/Sites/config/xip.io.scpt; powder link; powder open;'

Second, an alias that symlinks both the xip.io.scpt file and the config.ru file, adds the app to Pow, and then opens the Pow link in our default browser:

alias project-init-php='ln -s ~/Sites/config/xip.io.scpt; ln -s ~/Sites/config/config.ru; powder link; powder open;'

22. Install Composer

Let’s get Composer set up so we can use package management in our PHP apps.

Run this command:

curl -sS https://getcomposer.org/installer | php

23. Install git flow (optional)

I prefer using Git Flow for my version management, so let’s install it.

Run the following command:

brew install git-flow

24. CodeKit Preferences (optional)

We need to tell CodeKit to use our version of Compass so we can use Compass plug-ins, like Breakpoint.

  1. Open CodeKit then click CodeKit>Preferences
  2. Click on the Languages tab
  3. Click on Sass/Scss in the sidebar
  4. Click the radio button for Use the Sass executable at this path:
  5. Choose the SASS executable found in /Users/[your user name]/.rbenv/shims/sass
  6. Click on Compass in the sidebar
  7. Click the radio button for Use the Compass executable at this path:
  8. Choose the Compass executable found in /Users/[your user name]/.rbenv/shims/compass

25. Setting Up Sublime Text (optional)

The first thing to do, after you’ve set up your tab settings, typeface settings, rulers, and whitespace settings, is install Package Control.

Follow the installation instructions at the URL above for your version of Sublime Text.

Once you’ve installed Package Control, go crazy getting new Themes, Color Schemes, Syntax Highlighting, Snippets, etc. to tweak out your code editor.

26. Stop making .DS_Store files (optional)

To prevent .DS_Store files from being created, install DeathToDSStore and run it.

27. Show hidden files (optional)

There are a lot of files that can get hidden from you as a developer. Let’s just stop that nonsense.

Run this command:

defaults write com.apple.finder AppleShowAllFiles TRUE && killall Finder

28. Take control of the Menu Bar (optional)

I prefer being able to have some sort of control over my Menu Bar, so let’s install BarTender. There are some free alternatives that don't quite deliver as much as BarTender, like Broomstick if the price tag is too high.

29. Better battery information (optional)

I also prefer being able to see how much time is left on my battery and how long before my battery finishes charging, so let’s install Battery Time Remaining 2.

30. ImageOptim cli (optional)

It’s nice to be able batch optimize your images for a project via the command line, so let’s hook up the imageoptim-cli.

Run this command:

npm install -g imageoptim-cli

31. For WordPress devs (optional)

If you’re a WordPress dev, you might want to set up YeoPress so you can easily generate a new WordPress project via the yo command.

Run this command:

npm install -g generator-wordpress

NOTE: You’ll also want to remember to install the Root Relative URLs plugin so your xip.io URLs will load assets correctly.

Future Updates

After I get PhoneGap deploying to the simulator and connected devices from terminal, I’ll post another guide picking up where this one left off.

comments powered by Disqus