Skip to content

Instantly share code, notes, and snippets.

@marcobarbosa
Last active November 29, 2016 06:16
Show Gist options
  • Save marcobarbosa/4755025 to your computer and use it in GitHub Desktop.
Save marcobarbosa/4755025 to your computer and use it in GitHub Desktop.
Reference for the steps necessary to code a good front-end project on a Mac.

Front-end coding environment set-up

This guide covers pretty much all that you need to have installed in your Mac for a top notch front-end coding environment.

This guide also assumes that you are going to use yeoman or grunt for your project.

XCode

It is recommended that you have Xcode installed and it's Command Line Tools to give you any command line binary that you might need (such as wget). You can also download it within Xcode itself

ZSH (optional)

Want to get more productive on the command line? Install ZSH with oh-my-zsh.

Homebrew

Home brew is a sort of package manager for Mac OSX. It's important that you install this one first to make the next steps easier.

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

Node

I recommend that you install nvm to handle your node installation(s).

Install nvm

git clone git://github.com/creationix/nvm.git ~/.nvm

Source nvm to make it available straight away

. ~/.nvm/nvm.sh

Install and use the latest 0.8.x version of node

nvm install 0.8    

Grunt

If you have grunt install globally, uninstall it.

npm uninstall -g grunt

Why? Because from v0.4.x on, grunt should be installed locally per project. You only need grunt-cli globally:

npm install -g grunt-cli

Yeoman

Install Yeoman with node's package manager:

npm install -g yeoman

Then run the script to see if any additional packages are missing:

curl -L get.yeoman.io | bash

SASS + Compass

In case you need them, they are both Ruby gems. Simply install them by running:

gem install sass
gem install compass
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment