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.

Terminal

> curl -L http://install.ohmyz.sh | sh
> ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
> 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"

#hosts
alias hosts='subl /etc/hosts'

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

#ls
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/libphp5.so  

Uncomment line - enable multiple websites

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

Uncomment line - enable alias

LoadModule vhost_alias_module  
libexec/apache2/mod_vhost_alias.so  

Change Default DocumentRoot

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

Add a virtual host

<VirtualHost *:80>  
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Users/username/www/example"
    ServerName local.example.com
    ServerAlias www.local.example.com
    ErrorLog "/private/var/log/apache2/local.example.com-error_log"
    CustomLog "/private/var/log/apache2/local.example.com-access_log" common
</VirtualHost>  
  • Edit hosts
> hosts

Add a host

127.0.0.1   local.example.com  
  • Restart Apache:
> apachestart

Server - Node.js

Git

  • Install Git
> brew install git

to verify

> which git
/usr/local/bin/git
  • Config global git. Run the following commands
> git config --global user.name "YOUR_NAME"
> git config --global user.email 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
user.name=YOUR_NAME  
user.email=YOUR_EMAIL  
core.excludesfile=/Users/your_name/.gitignore_global  
core.editor=subl  
merge.tool=Kaleidoscope  
diff.tool=Kaleidoscope  

to verify .gitconfig

> cat .gitconfig
[user]
    name = YOUR_NAME
    email = YOUR_EMAIL
[core]
    excludesfile = /Users/your_name/.gitignore_global
    editor = subl
[merge]
    tool = Kaleidoscope
[diff]
    tool = Kaleidoscope
  • Edit .gitignore_global
.sass-cache
.DS_Store

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

Grunt

  • 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] (http://gruntjs.com/getting-started) * 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

Bower

  • Install Bower
> npm install -g bower

Editor - Sublime

  • Install [Sublime] (http://www.sublimetext.com/)
  • Install [Sublime Package Manager] (https://packagecontrol.io/)
  • 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

MongoDB

  • 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.


Comment