Custom AngularJS seed project

This is a custom AngularJS seed project based on grunt the JavaScript task runner.

AngularJS 1.2.0
CoffeeScript and Less support
Bower for front-end packages management
Full support for unit and end2end tests
Unit tests with Mocha, Chai and SinonJS
Generates test code coverage for the unit tests
Support for protractor integration tests
Support for Karma Test Runner (formerly Testacular)
Continuous Integration ready ready via grunt test:ci task
Grunt task runner along with several useful plugins
Production release minification and angular template caching
..and a lot more

Demo: http://lucassus-angular-seed.herokuapp.com

Directory structure

./app - contains CoffeeScript sources, styles, images, fonts and other assets
- ./app/scripts - CoffeeScript sources
- ./app/styles - stylesheets
- ./app/views - html templates used by AngularJS
./test - contains tests for the application
- ./tests/integration - protractor integration specs
- ./test/e2e - AngularJS end2end scenarios
- ./tests/unit - unit tests for AngularJS components

Third-party libraries

./bower_components - components dowloaded by bower install command
./custom_components - you could put custom components here
./node_modules - command dowloaded by npm install command

Generated stuff

./dev - compiled development release
./dist - created by grunt build command, contains the minified production release of the app

Bootstrap

Install nodejs v0.10.12 from the sources:

sudo apt-get install build-essential openssl libssl-dev pkg-config

wget http://nodejs.org/dist/v0.10.12/node-v0.10.12.tar.gz
tar -xzf node-v0.10.12.tar.gz

cd node-v0.10.7
./configure
make
sudo make install

Install grunt, nodemon and bower globally

sudo npm install -g grunt-cli
sudo npm install -g nodemon
sudo npm install -g bower

Run the app

npm install
bower install
script/start-server

Navigate to http://localhost:9000

Running tests

By default all tests are executed in PhantomJS browser

grunt test:unit or grunt test - run unit tests
grunt test:unit:watch or
grunt test:watch - run unit tests in watch mode
grunt test --coverage-reporter=html - generate html code coverage report

Run test against specific browsers

grunt test:unit --browsers=Chrome,Firefox,Opera,PhantomJS

Running integration tests

script/test-unit - run unit tests
script/test-integration - run integration specs

How to develop specs

install standalone Selenium node_modules/protractor/bin/webdriver-manager update
start the app in the test evn script/start-test-server
run it with grunt coffee:test && protractor dev/test/protractor-conf.js

WebDriver and PhantomJS

stop selenium
run PhantomJS with WebDriver support phantomjs --webdriver=4444
setup protractor browserName: "phantomjs"
run specs

Running tests for the server side application

mocha --compilers coffee:coffee-script --watch --reporter spec server/test

How to debug failing specs

Put debugger in the failing spec:

describe "Failing spec", ->

  it "should run smoothly", ->
    debugger # this is like setting a breakpoint
    failMiserably()

Run karma in Chrome browser:

grunt test:unit:watch --browsers=Chrome

Go to the newly opened Chrome Browser
Open Chrome's DevTools and refresh the page
Now in the source tab you should see the execution stopped at the debugger

Run karma directly without CoffeeScript compilation:

karma start test/karma-conf.coffee --single-run

or with auto watch option:

karma start test/karma-conf.coffee

karma test:unit:watch

Running tests headlessly

Start Xvfb and export DISPLAY variable:

./script/xvfb start
export DISPLAY=:99

Perform single run:

grunt test --browsers=Firefox,Chrome,Opera,PhantomJS

grunt test:watch --browsers=Chrome

Build process

script/build will build the minified production release.

(cd dist/ ; python -m SimpleHTTPServer 8000) will serve a static assets from ./dist directory.

Navigate to http://localhost:8000 to see the production release.

Heroku deployment

git co heroku-production
git merge master
grunt build
git push heroku heroku-production:master -f

lucassus / angular-coffee-seed