Introduction

I noticed that there wasn't a really good step by step guide for setting yourself up professionally to develop a web app from step 1 on Ubuntu. I'm a vim user, and setting vim up for javascript is a whole other post or two, but this should be editor agnostic. I don't know if this is perfect, for example I will probably add a test runner and test framework.
Suggestions for things to add, especially test setup, are welcome.

Karma and Jasmine for unit testing?
Protractor and Selenium Web Driver for End to end testing?

Still I don't know that this is all collected anywhere.

Summary of steps

1 Install Requirements to build nvm and git

We are installing nvm so we don't have a local version of node and don't have to constantly invoke sudo to install stuff with npm.
First we install requirements to build nvm as well as download it:

sudo apt-get install build-essential libssl-dev curl git-core

2 Install nvm

You can use the very insecure and easy to hijack:

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

Hopefully though, you are a bit smarter, and also want control over what you do.
Choose the Manual Install:

git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

3 Make your .bash_profile source nvm and install the stable version of nodejs

add the following to your .bash_profile

export NVM_DIR="/home/lawrence/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
NVM_SYMLINK_CURRENT="true"

open a new shell, it should source nvm as above.
run the following to install the latest stable version of node.

nvm install stable

4 Make your .bash_profile run nvm use stable

Add the following to the bottom of your .bash_profile to have node always running
nvm use stable > /dev/null
run nvm use stable in your shell and there you go.

5 Use npm to install yo, grunt-cli, and bower

simple:
_{npm install --global yo bower grunt-cli}

6 Run yo and install angular generator

type yo at the command line and search for angular, then install it.

yo

Why are we installing yeoman? It basically sets up grunt tasks for us, so we can have grunt do lots of things for us without having to understand grunt.
What are grunt tasks? Minification of javascript files for example.

7 Run yo angular to generate angular

yo angular

I'm using angular as an example, but there are plenty of generators for yeoman.

8 Use grunt serve to display an example front page

grunt serve

9 Use yo to add angular directives, controllers etc.

run yo as needed.

10 Develop your app

Simple enough

Constant Coding

Friday, December 5, 2014

A work flow for setting up front end development professionally on ubuntu