Switching from Google Web Toolkit (GWT) to AngularJS has probably been the greatest single productivity boost to My Gear Pack development. In other posts, I’ll extoll the virtues of using angularjs for development. However, the first task for me was to get it configured in our automated build system and deploying to an amazon S3 bucket. Below I’ve outlined what our configuration looks like.

Project Structure

projectstructureThe angularjs application is developed inside /app. Our project makes heavy use of grunt for automated tests, minification, and packaging of the final application.

The result of the grunt script ends up in /dist, so everything under /dist is deployed to S3 as the final application structure.  

Build Environment Configuration (Ubuntu)

The build requires node.js package manager (npm), grunt, and s3cmd.

Don’t use the default nodejs that is included with ubuntu. It is outdated and will not have the same featureset as newer versions.

Install the latest node.js which includes npm.

sudo apt-get update
sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository -y ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Install grunt-cli

sudo npm install -g grunt-cli

Install s3cmd (instructions from s3tools.org):

wget -O- -q http://s3tools.org/repo/deb-all/stable/s3tools.key | sudo apt-key add -
sudo wget -O/etc/apt/sources.list.d/s3tools.list http://s3tools.org/repo/deb-all/stable/s3tools.list
sudo apt-get update && sudo apt-get install s3cmd

Configure s3cmd with your credentials

Execute this in your jenkins home directory as your jenkins user. It will prompt you for your s3 credentials.

s3cmd --configure

Amazon Web Services S3 Configuration

In your Amazon Web Services S3 Console, configure your bucket for static web hosting. It’s in a section under properties. mgpwebhost

Jenkins Configuration

Configure your job to have an Execute Shell build step, and use something like this for your shell script. This assumes that you want to distribute the contents of your /dist directory.

npm install grunt-cli
npm install
grunt
s3cmd sync -r -P $WORKSPACE/dist/* s3://[YOUR_BUCKET_NAME]

Deploy

Run your job and watch the results get synchronized with s3!  Hooray!  

References

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager http://s3tools.org/repositories#note-deb

Extra

Check out My Gear Pack, get organized, and start your adventure.