Scott Stults
Category: Uncategorized
… and NodeJS, and Yeoman, and Compass, and …
Vagrant is a super way to keep project dependencies isolated and explicit so you can easily jump between projects. AngularJS is an great framework that’s sort of an MVC (do people still say “MVC”?) for JavaScript development. I won’t do either project justice by going into any of their details here. Instead I’ll describe how to quickly bootstrap an AngularJS development environment so you can do a little more hacking and a little less installing.
Here’s a preview:
- Install Vagrant if you haven’t already
- Grab the two short files I’l gist
- Do some console stuff to generate a Yeoman AngularJS project
- Go to http://localhost:9000/
Vagrant
To start with, make a project folder and pull down this Vagrantfile:
This starts a new Ubuntu VM and installs the a NodeJS puppet module (it’s a little irksome you can’t use puppet to install puppet modules, but I guess at some point the turtles have to end.) By the way, I had a little trouble with the particular version of Ubuntu and the PuppetLabs NodeJS module, which is why I’m using willdurand’s. NPM wasn’t getting installed.
Note that I’m forwarding ports 9000 and 35729 so that grunt can serve and live-reload the app to the host. Another way to get that to happen is to start an ssh tunnel into the VM with something like: vagrant ssh -- -L 9000:localhost:9000 -L 35729:localhost:35729 -N
Puppet
Then, make a “puppet” folder and put this site.pp file in there:
This installs git, bower, grunt-cli, gulp, and Compass. It also adds the NPM global bin directory to users’ $PATH. Edited on 2015-02-12: Yeoman was no longer working and I needed to update some required packages.
Command Prompt
Finally, use Yeoman to start an AngularJS project:
I could’ve put the “npm install” stuff into puppet, but I was thinking I might use this for EmberJS development too. Also, since I’m forwarding grunt’s ports to the host I want to serve on 0.0.0.0 rather than localhost. The only other peculiarity I should note is that the VM I’m using doesn’t have any browsers installed so karma testing doesn’t work. To-Do!
The thing that I hope sticks with you beyond bootstrapping Angular development is how easy it is to encapsulate and script all such bootstrapping. This helps projects get going so much quicker than even the most lucid README file.