Introduction

After spending the better part of two years working on the server side of websites, as well as Objective-C, I'm starting to dive back into the client side of web development. Boy have things changed; I'm both scared and excited!

I decided on giving AngularJS a go based on its features, documentation, and community support. Since I've been gone the tools have evolved to include things I've been used to on the server side such as:

• scaffolding
• unit tests with code coverage
• automated builds
• dependency management

Getting all these things set up now is quite easy thanks to Yeoman, but it took me the better part of a day of troubleshooting issues mostly between NodeJS and VirtualBox. I'll detail steps to get your development environment up and running and outline some of the issues I came across.

Given: You have a functional VirtualBox with a folder shared between your host and guest. I used Ubuntu 12.10 64bit.

Symlinking

The most contentious issue was between VirtualBox shared folders and NodeJS wanting to use symbolic links. The general consensus is if you try to use symlinks in a shared folder you're gonna have a bad time. This feature is disabled by default for security reasons.

I tested this setup on two versions of VirtualBox (4.2.1 and 4.2.10). Despite me not using symlinks I had to run this command on 4.2.10 (but not 4.2.1) before I launched the VirtualBox:

VBoxManage setextradata *VirtualBoxName* VBoxInternal2/SharedFoldersEnableSymlinksCreate/*SharedFolderName* 1

Where VirtualBoxName and SharedFolderName match your systems configuration. Launch your box and ssh into it.

Installing Node

The version in apt isn't always updated or may not work with Yeoman/AngularJS/Grunt/etc. Enter Node Version Manager nvm. It allows you to install multiple versions of node as an un-privileged user and freely switch between them. Install Node's dependencies and NVM:

sudo apt-get install g++ curl libssl-dev apache2-utils git-core
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.profile

Next we'll install a version of Node:

nvm install 0.8
nvm alias default 0.8

I chose 0.8 because at the time (v0.10.1) failed to install yeoman and karma with the error: cb() never called!

Yeoman

yeoman does all the setup for us saving hours of time. At the time of this writing I've tested against v1.0-BETA. Let's install yeoman and it's dependencies "globally" (in the scope of our user):

npm install -g karma yo grunt-cli bower

PhantomJS

PhantomJS is a headless WebKit browser. This browser lets you run Javascript unit tests in your console without needing a GUI. We're going to download a pre-compiled binary and install it (1.9 in this example):

wget https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-x86_64.tar.bz2
tar jxvf phantomjs-1.9.0-linux-x86_64.tar.bz2
sudo mv phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/local/bin/

If /usr/local/bin/ isn't in your $PATH move the bin somewhere that is. You could also install PhantomJS via apt-get or compile by source.

Setting up the project

Let's get to creating our AngularJS project. cd to your shared virtual folder and setup the project:

mkdir angularjs-project && cd angularjs-project
npm install generator-angular generator-karma --no-bin-links
yo angular
npm install --no-bin-links
bower install --dev

Answer "No" when yeoman asks "Twitter Bootstrap for Compass?" unless you know what compass is and want to use it.

This creates AngularJS boilerplate with unit testing scaffolding, live folder watching/reloading, Javascript dependencies, and more.

You'll notice the "--no-bin-links" on the npm install's. This tells npm to not create any symlinks; this will prevent npm from spitting out un-readable errors because VirtualBox isn't happy.

Bower error?

I've received 5 different, intermittent, error messages when setting this up. If you receive any errors while running bower install (my most common was 128) manually clear the cache and try again; repeat until it works:

rm -rf ~/.bower/cache
bower install --dev

Tweak the configuration

Open up karma.conf.js and change line 49:

browsers = ['PhantomJS'];

Open Gruntfile.js. First go to line 51 and change 'localhost' to '0.0.0.0' then search for and remove the following lines for each spot they appear:

'coffee:dist',
'compass:server',
'coffee',
'compass',

Changing localhost to the IP lets our host access the guest server. Removing the other lines keeps Grunt from complaining if your'e not using CoffeeScript or Compass (default we're not); of course, if you're using either of those, leave them in. :)

Test

Let's go! Run the following command to test:

grunt test

If that works, we're ready to go. You can launch the development server with node:

grunt server

Now you're ready to start developing in your IDE on your host system and access it with your browser as well. When you save a file in your IDE it should automatically reflect in your browser.

npm install generator-angular generator-karma --no-bin-links

npm install generator-angular --no-bin-links