AngularJS seed based on grunt JavaScript tasks runner and bower a package manager for the web
CoffeeScript HTML Shell CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
client
script
server
.editorconfig
.gitignore
.travis.yml
LICENSE.txt
Procfile
README.md
shippable.yml

README.md

Custom AngularJS seed project

Build status Dependency Status Stories in Ready

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

or

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

or

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