Setting Up a New Mac on OSX for Web Development

Recently I had a machine break down and had to setup a new one and this is documentation of my setup.

In this article I give you all the apps I use, OS configurations and local hosting setup.

Mac OS X Apps I Install

  • Alfred – Quick shortcut to anything.
  • Sublime Text – For the codes. I switched to it from TextMate because it’s super fast!
  • 1Password – To generate secure passwords is easy, only problem is it introduced a single point of fail. Either way, I can’t live without the convenience of it. Has Safari and Chrome extensions as well as a menu bar icon in OSX for quick access.
  • iTerm2 – Super terminal!
  • Bartender – Nice to clean up OSX icons when you get too many, or it you just want to hide certain icons you don’t use ever.
  • Google Chrome of course.
  • Dropbox – Currently I have 500GB Dropbox and I only sync certain folders to my computer. This gives me an extra 300GB+ of storage. It’s expensive, but I use it primarily to collaborate for work projects so it’s a cost of doing business at this point.
  • MAMP – It’s a nice installer of the latest PHP and MySQL. I could configure this manually, but MAMP is so easy.
    As commentaries suggested, you can Set Up Vagrant instead.
  • Node.js
  • Sequel Pro – Free tool to easily manage MySQL. MAMP starts by default at port 8889 with user:pass as root:root
  • Skype
  • CloudApp – Nice way to drag and drop share files and especially images. Automatically copies the link to the file once it’s uploaded to your clipboard.
  • Twitter – I find Twitter’s default notifications to be annoying so I only setup menu highlighting when I’m mentioned.
  • Caffeine – For keeping your mac awake…especially during those long Dropbox syncs!
  • Pocket – Twitter natively supports saving links to Pocket and there’s a Chrome extension, so if I don’t want to lose a link I drop it in Pocket.
  • Old Skitch – I don’t like the new Skitch…the old one was so simple! You can still download it by the link under the main download.
  • Transmit – For FTP and S3 pushing/pulling files. Be careful with the “sync” feature though, I deleted some files from the server once (was not good).
  • GitHub for Mac – Find it’s nice to keep a running track of all the projects I’ve cloned.
  • ScreenFlow – Best screencasting app I’ve used — I’ve tried most of the Mac ones I could find.
  • Adobe Creative Cloud (Photoshop, Illustrator, Premiere)
  • Microsoft Office (Word and Excel)

OS-level Items Todo

  • Of course lots of updates in the app store including OSX itself.
  • Install XCode and the iOS Simulator (Preferences -> Downloads -> iOS Simulator)
    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications
    Then drag app to dock for iOS testing
  • Setup Messages App for Google Talk and AIM
  • Move the OSX doc to the right. On a 13” the problem is more vertical space than it is horizontal.
  • In Settings -> Mission Control I uncheck “show dashboard as a space” because I want to see what I’m doing and have quick access to the calculator (fn + F12).

Bash Config

Install Homebrew:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

Add Sublime Text bin to terminal (run this in Terminal)

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime

Install Paul Irish dotfiles and dependencies

git clone https://github.com/paulirish/dotfiles.git && cd dotfiles && ./sync.sh
./install-deps.sh sync.sh

Setting up Localhost Websites

I edit my /etc/hosts file adding any local domains to it:
127.0.0.1 localhost mydomain.local myotherdomain.local
Then I make a vhosts.conf file in /Applications/MAMP/conf/apache/vhosts.conf

NameVirtualHost *:80
<VirtualHost *:80>
  ServerName mydomain.local
  DocumentRoot /Users/USERNAME/Sites/projects/mydomain/
  <Directory /Users/USERNAME/Sites/projects/mydomain/>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
  </Directory>
</VirtualHost>
<VirtualHost *:80>
  ServerName myotherdomain.local
  DocumentRoot /Users/USERNAME/Sites/projects/myotherdomain/
  <Directory /Users/USERNAME/Sites/projects/myotherdomain/>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
  </Directory>
</VirtualHost>

Then finally adding Include /Applications/MAMP/conf/apache/vhosts.conf to the httpd.conf file and changing the DocumentRoot to my /Users/USERNAME/Sites/ folder.

Remove MAMP PHP Cacheing

For some reason, MAMP defaults to having caching enabled which caused me issues. I had to disable it by going to

sublime /Applications/MAMP/conf/phpX.X.X/php.ini

Then comment out [OPcach].

; [OPcache]
; zend_extension="/Applications/MAMP/bin/php/php5.5.3/lib/php/extensions/no-; debug-non-zts-20121212/opcache.so"
;   opcache.memory_consumption=128
;   opcache.interned_strings_buffer=8
;   opcache.max_accelerated_files=4000
;   opcache.revalidate_freq=60
;   opcache.fast_shutdown=1
;   opcache.enable_cli=1

Migrate Host Data to Local

I use DB Migrate Pro to export a SQL file and import content to replicate the server to my local instance. Just unselect wp_users and wp_usersmeta if you just want the content.

Update Sublime Settings

{
  "color_scheme": "Packages/Color Scheme - Default/Sunburst.tmTheme",
  "font_size": 16,
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

Sharing Retina Screenshots Easily at Normal Resolution

I managed to get Gyazo Setup on My Own Server which allows you to upload normal resolution screenshots to your server just by opening Gyazo.app. I then used Automator to launch it by keystroke. Works perfectly.

Hopefully you’ve found this setup guide useful. Let me know what apps and utilities I’m missing in the comments!

Comments

  1. Jason Brown says

    Have you ever thought of using Vagrant and VirtualBox instead of MAMP? Better flexibility for working with different environments and allows you to better mirror your local dev with your stage and live environments.

    • Marc Grabanski says

      @Jason: I use Vagrant and VirtualBox all the time for client projects but I haven’t created a box for my own development. I should do that! Thanks.

  2. says

    Given that you had to do this because your machine broken down, I expected the first thing on the list to be backup software.

    You should also install SuperDuper or CarbonCopyCloner so that you have a nightly bootable backup, so that you never have to go through this rigamarole ever again :)

    Of course, 1 backup isn’t enough.
    Augment with TimeMachine (for retrieving individual files or directories) and possibly also Backblaze.com so that if your house burns down or is flooded, or if someone steals your machine and external drives, you STILL have a full backup in the cloud for just $5/mth.

    • Marc Grabanski says

      Awesome. Thanks for the tips with SuperDuper and CarbonCopyCloner!

      I didn’t lose any of my main files because they are all backed up with Dropbox, but there was a few files I was working on that I wish that I still had. I’ll look into those.

  3. Scott González says

    You should create a symlink for sublime instead of creating an alias. Your current alias only supports opening a single file, or passing a single flag.

    You should probably also set EDITOR (and potentially SVN_EDITOR) if you care about using sublime when working from the command line.

    If you tend to use the same config for most of your sites, you might want to use ServerAlias and VirtualDocumentRoot. I recently documented how I manage my virtual hosts.

  4. Rohn Blake says

    Thanks Marc – it’s interesting to learn how others set up their machines, always something good to learn to add to my config, and ultimately my workflow.

    Curious that you don’t use oh-my-zsh though. I’ve really come to enjoy the little tweaks it gives.

  5. Levi says

    Is iTerm2 basically totalTerminal on steroids?
    I will have to look at iTerm2 the next time I am rebuilding my environment.