Setting up AngularJS on a VirtualBox with Yeoman
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:
- 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.
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.
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 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
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.
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.
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
'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. :)
Let's go! Run the following command to test:
If that works, we're ready to go. You can launch the development server with node:
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.
Written by Chris Boden
AngularJS: use $timeout, not setTimeout
Building large apps with AngularJS
Add your response
On the step:
npm install generator-angular generator-karma --no-bin-links
I kept getting a "peerinvalid generator-karma" error.
npm install generator-angular --no-bin-links
also installs generator-karma.
Thanks for the nice instructions!
God I wish I read your blog before I wasted 3 days on the symbolic link issue. My head hurts from obsessing over this and banging my head against the wall.
Thanks a lot.