Getting a JS Dev Environment Setup Quick

Connor Doherty
Apr 28, 2015 · 4 min read

These are the scripts I use to get a new computer setup quick. These scripts are for use on OSX (Tested on 10.12.1).

Step 1) Install Packages, Setup Terminal & Download Applications

Run the following scripts in terminal:
This will install homebrew, a package manager for OSX

### install homebrew ###
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Next install packages from brew:

################
# Install brew packages
################
### wget ###
brew install wget
### Mongo DB ###
# Great DB to have ready to go for quick prototyping projects
brew install mongodb
### MySQL - for running local database ###
brew install mysql
### nginx ###
# An HTTP and reverse proxy server, a mail proxy server,
# and a generic TCP proxy server.
brew install nginx
### PhantomJS - headless WebKit scriptable with a JavaScript API ###
brew install phantomjs
### s3cmd - command Line S3 Client and Backup ###
brew install s3cmd
### Node.js Version Manager ###
# Easily building fast, scalable network applications.
brew install nvm
mkdir ~/.nvm
cat >> ~/.bash_profile << 'EOL'
# add alias for nvm so it can be accessed from the command nvm
export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"
EOL

Note: to make use of s3cmd you will need to add a .s3cfg file to you user base directory.

Next get terminal set up with some helpful additions:

################
# Setup Terminal
################
### install Git Completion ###
wget -O .git-completion.bash https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash
# move it to the user root
mv .git-completion.bash ~/.git-completion.bash
# link git completion in bash_profile
cat >> ~/.bash_profile << 'EOL'
# include git complete
# allow for using tab to complete git commands
# ex. git checkout feature/th + tab => git checkout feature/this_is_a_test
source ~/.git-completion.bash
EOL### Show the current git branch and update the color scheme ###
# This writes the color scheme to use into your .bash_profile
cat >> ~/.bash_profile << 'EOL'
#Change text styles and include git branchfunction parse_git_branch_and_add_brackets {
git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\ \[\1\]/'
}
#PS1 modification
GRAY_COLOR='\[\e[m\n\e[1;30m\]'
BOLD_BLUE_COLOR='\[\e[1;34m\]'
LIGHT_GRAY_COLOR='\[\e[0;37m\]'
WHITE_COLOR='\[\e[1;37m\]'
GREEN_COLOR='\[\e[0;92m\]'
GIT_WHERE='$(parse_git_branch_and_add_brackets)'
PS1="$GRAY_COLOR[$BOLD_BLUE_COLOR\u@\H$LIGHT_GRAY_COLOR] $WHITE_COLOR\w $GREEN_COLOR$GIT_WHERE$LIGHT_GRAY_COLOR\n$ "
PS2='> '
PS4='+ '
EOL### Create an alias for creating a simple HTTP server ###
# link git completion in bash_profile
cat >> ~/.bash_profile << 'EOL'
#create an alias for creating a simple HTTP server
server() {
open "http://localhost:${1}" && python -m SimpleHTTPServer $1
}
EOL### Add git lg - a better git log ###
# This allows you to use the git lg command to get a pretty view
# of your git log
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

Next download some useful applications:

################
# Download Applications
################
### Chrome ###
wget https://dl.google.com/chrome/mac/stable/GGRO/googlechrome.dmg -O ~/Downloads/googlechrome.dmg
### Sublime Text Editor ###
wget https://download.sublimetext.com/Sublime%20Text%20Build%203126.dmg -O ~/Downloads/Sublime.dmg
### Sketch - Designing for web and mobile ###
wget https://www.sketchapp.com/download/sketch.zip -O ~/Downloads/sketch.zip
### Spectacle - Very helpful for resizing windows ###
wget https://s3.amazonaws.com/spectacle/downloads/Spectacle+1.1.zip -O ~/Downloads/Spectacle.zip
### ClipMenu ###
# A great clipboard manager with some easy shortcut commands.
# cmd + shift + v = shortcut to pull up manager
wget https://dl.dropboxusercontent.com/u/1140644/clipmenu/ClipMenu_0.4.3.dmg -O ~/Downloads/ClipMenu.dmg
### CyberDuck - FTP UI system ###
wget https://a48823c7ec3cf4539564-60c534a1284a12ce74ef84032e9b4e46.ssl.cf1.rackcdn.com/Cyberduck-5.1.0.20872.zip -O ~/Downloads/Cyberduck.zip

Also manually download:
Xcode (requires login)

Once this is finished running, quit terminal and open a new terminal window. You should see the updated color scheme and have access to the added brew packages.

You’ll need to open the downloaded applications follow the prompts to install.

Step 2) Setup Application & Packages

Sublime Text 3
Sublime really shines with the right set of plugins installed. Run the following in terminal:

### Add Sublime Text shortcut command to terminal ###
# This allows you to open all files in a directory by running subl .
ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

Install package control — open Sublime and open the console via ctrl+` and paste in snippet found on the package control page here.

Once installed, quit sublime and reopen. You can now access package control.

  • Open package control via Command + Shift + p.
  • Bring up the package install view by typing “install” into the text input.
  • Search for and install desired packages, a couple handy ones for JS are SublimeLinter, JsFormat.

Node
Open terminal and run:

# download stable node version
nvm install stable
# set stable as node version to use
nvm use stable
#To set a default Node version to be used in any new shell, use the alias 'default'
nvm alias default node

Step 3) Install Node Packages

With node installed via nvm we can install some of the nice to have global packages.

### Yeoman ###
# Helps you to kickstart new projects,
# prescribing best practices and tools to help you stay productive.
npm install -g yo
### Grunt ###
# Performs repetitive tasks like minification,
# compilation, unit testing, linting, etc.
npm install -g grunt-cli

There are probably other things that’ll be needed, but this will give you a good head start at getting a new machine set up for JS Dev.

This will be a growing doc, so leave a comment if there are other packages you think should be added, or other quick ways to get a system set up.

Connor Doherty

Written by

Excited about how new tech is changing behaviors. PM/Tech Lead at Google Ventures & USV backed startup @yieldmo

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade