My Front End Development Setup Guide - Mac

This guide will help you install the most basic packages and command line tools that are needed for front end development on a Mac.


> curl -L | sh
> ruby -e "$(curl -fsSL"
> brew install fasd
  • Add the following to .zshrc file
# Load fasd
eval "$(fasd --init auto)"

# Enable plugins
plugins=(git fasd history history-substring-search sublime)

# Example aliases
alias zshconfig="subl ~/.zshrc"  
alias ohmyzsh="subl ~/.oh-my-zsh"

alias hosts='subl /etc/hosts'

alias ..='cd ..'  
alias ...='cd ~'

alias la='ls -la'

# apache 
alias apachestart="sudo apachectl start"  
alias apachestop="sudo apachectl stop"  
alias apacherestart="sudo apachectl restart"  
alias apachevhosts='subl /etc/apache2/extra/httpd-vhosts.conf'  
alias apacheconf='subl /etc/apache2/httpd.conf'  

Server - Apache

  • Edit Apache config
> apacheconf

Uncomment line - enable PHP

LoadModule php5_module libexec/apache2/  

Uncomment line - enable multiple websites

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf  

Uncomment line - enable alias

LoadModule vhost_alias_module  

Change Default DocumentRoot

DocumentRoot "/Users/username/www"  
<Directory "/Users/username/www”>  
  • Edit Apache virtual host
> apachevhosts

Add a virtual host

<VirtualHost *:80>  
    DocumentRoot "/Users/username/www/example"
    ErrorLog "/private/var/log/apache2/"
    CustomLog "/private/var/log/apache2/" common
  • Edit hosts
> hosts

Add a host  
  • Restart Apache:
> apachestart

Server - Node.js


  • Install Git
> brew install git

to verify

> which git
  • Config global git. Run the following commands
> git config --global "YOUR_NAME"
> git config --global YOUR_EMAIL
> git config --global core.editor "subl -n -w"
> git config --global core.excludesfile ~/.gitignore_global
> git config --global merge.tool Kaleidoscope
> git config --global diff.tool Kaleidoscope

to verify

> git config --list  

to verify .gitconfig

> cat .gitconfig
    name = YOUR_NAME
    email = YOUR_EMAIL
    excludesfile = /Users/your_name/.gitignore_global
    editor = subl
    tool = Kaleidoscope
    tool = Kaleidoscope
  • Edit .gitignore_global

SASS & Compass

  • Install Ruby via Homebrew
> brew install ruby
  • Install SASS
> gem install sass
  • Install Compass
> gem update --system
> gem install compass
  • To verify
> sass -v
> compass -v


  • Install Grunt's command line interface (CLI) globally
> npm install -g grunt-cli
  • Change to the project's root directory. Create package.json
> npm init
  • Install project dependencies locally with npm install.
> npm install grunt grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-htmlmin grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-concat grunt-contrib-imagemin grunt-contrib-watch grunt-contrib-sass grunt-contrib-compass grunt-contrib-clean grunt-usemin --save-dev

To verify npm packages has been installed successfully, see package.json:

  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-compass": "^1.0.1",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-imagemin": "^0.9.2",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-sass": "^0.8.1",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-usemin": "^3.0.0"

and check node_modules folder in project's root directory.
* To uninstall node module locally, run

> npm uninstall module_name

Or delete node_modules folder from the project directory.
* Create [Gruntfile.js] ( * Run Grunt

> grunt
  • To view global npm packages
> npm ls -g --depth=0
  • To install node packages globally
> npm install -g package_name

It's located at /usr/local/lib/node_modules
* To remove node packages globally

> npm uninstall -g package_name


  • Install Bower
> npm install -g bower

Editor - Sublime

  • Install [Sublime] (
  • Install [Sublime Package Manager] (
  • Install the following packages via package manager

  • Dotfiles Syntax Highlighting

  • Editor Config
  • SASS
  • Syntax Highlighting for Sass
  • DocBlockr
  • BracketHighlighter
  • Git Config
  • Markdown Editing
  • Markdown Preview
  • jade


  • Install MongoDB
> brew update
> brew install mongodb
  • Go to home folder. Create a data folder:
> sudo mkdir -p /data/db
> sudo chown `id -u` /data/db
  • Run MongoDB
> mongod

Open browser and go to [http://localhost:27017/] (http://localhost:27017/)

> mongod --rest

Open browser and go to [http://localhost:28017/] (http://localhost:28017/)
* Use mongo Shell

> mongo

Yang Zhao

Read more posts by this author.