Setting up web development environment on a Mac

Overview

Now that Yosemite and all the essentials are installed, next up is setting up my environment. When I first started out, the easiest way to get things set up was installing MAMP and calling it a day, but I've since decided to get my hands dirty and use nginx as my HTTP server, which will be covered in this guide. In addition, I'll be installing Node.js, Homebrew, MySQL, and a few other things that I use on occasion as part of my workflow.

Command Line Tools for Xcode

First up, I'll be installing Command Line Tools for Xcode to have access to common Linux-based utilities, tools, and compilers. This allows more awesome stuff to be installed (many of the Unix tools require GCC which Command Line Tools makes available). Mavericks and above allows you to install via the command line whereas older versions of OS X requires you to install Xcode.

$ xcode-select --install

The $ character shouldn't be typed, as it's just a cue to enter a shell command.

Once you agree to the license agreement it'll take a couple minutes to download and install (~130mb).

A few things I've found useful:

  • Copy large sets of data with rsync: When moving thousands of files from one location to another, I've found this to be a godsend and crushes cp or finder drag-dropping in terms of transfer speed. I've been using rsync -vaP Volumes/Source Volumes/Target wherev increases verbosity, a for archive mode which mirrors symlinks and permissions, P for partial transfer resume and progress. I've also seen suggestions for rsync --ignore-existing -raz Volumes/Source Volumes/Target.

  • Search your command line history by using `history | grep 'string to search for' to get a list of matches.

  • 'ls -lrt Directory >> filetosaveresults.log' will list the contents of Directory into a text file named filetosaveresults.log

  • Get the total file size of a directory by using du -hs FOLDER/PATH where h outputs human-readable numbers and s summarizes only the size of the folder rather than all of its contents.

NVM + node

I want to avoid having to use sudo for installing NPM or packages so I'll be installing node version manager first, which can be done by running the following command:

$ curl https://raw.githubusercontent.com/creationix/nvm/v0.12.1/install.sh | bash

I actually ran into the following error message which was asking me to create a profile and add the NVM directory path:

$ => nvm is already installed in /Users/USERNAME/.nvm, trying to update
$ => HEAD is now at 68574cc... v0.12.1
$ error: branch 'master' not found.

It offers 2 options to fix this problem in the output – I opted for the first which asks you to create a bash profile and run the command again. To create the file, I ran $ touch ~/.bash_profile before running the curl command above again.

Nano is the command line editor, once you add the above lines you can save and exit by hitting ctrl + X, Y to save changes and 'enter' to confirm selection

After restarting terminal, running the $ nvm command confirmed it's been installed by it's output of usage instructions. I also ran into an issue where the nvm current version wouldn't stick on a new terminal window, so i had to set the default version by running $ nvm alias default 0.10.33.

Since node version manager is now working, I went ahead and installed the latest version of Node (v0.10.33 at time of writing) by running $ nvm install 0.10.33. The latest version number of Node can be found at nodejs.org. $ node -v should now return the current installed version of node, $ npm -v the version of node package manager, and '$ which node` the path node has been installed to (the home directory).

$ node -v
v0.10.33
$ npm -v
1.4.28
$ which node
/Users/USERNAME/.nvm/v0.10.33/bin/node 

With node and NPM installed, I can now install my essentials:

$ npm install -g bower #[Bower](http://bower.io/) - package manager for the web
$ npm install -g grunt #[Grunt](http://gruntjs.com/) - javascript task runner
$ npm install -g gulp #[Gulp](http://gulpjs.com/) - a streaming build system

# is a comment and can be ignored when entering commands