Brunch with Dragons


                           ,/     _,---._
                ,       _,'/|  ,-'       `.
                 \.__,-' // `./   ____     \
                  \\    //   `. ,'\__/`.    \
                   \\  //      `.,'  `./`.   `.
                    ||//         `-.   `.'|    \
                    / ,`,===========:=- |-|     \
        __        ,' )\,_        ,-'    | |      `.__
      /))/)       \,/)/ \\\    /'      /`-|          `---.___
     ())'_)       / '   /,\\ ,/       |`-,'
     /)).\____,-_/  , ,'~  \\|        |--|          ,
    (()||_)~~~~|' ,','      )'        `._,\  `.     `.
     ((\\/      \/_/       (          / `.-\   \      )
       /\\                  `,       /    \-`-.,'   ,/
      / ')\                        ,'     /`-./   ,'---.____
     |     |                      /   ,--'   /   /---.______
     |  |  |            ,-.-. _,-'  ,-,-._  /  _/
     |_/|_,'           /\/ ) `  /|,/\/\_, `-  /\
      // ||_          //'|/\__,'\|(/'|/ \___,'`,)
      `-  ~~          `  `           `

Here be dragons

Brunch with Dragons is a Brunch application skeleton bundled with cream of the crop technologies.

Development Environment Features

• LiveScript for all the code
• Karma unit test runner
• Mocha test framework
• Chai assertion library
• Sinon test spies, stubs and mocks
• Chai as Promised support for assertions about promises
• Protractor functional test runner (with Mocha, Chai and Sinon too)
• Chai-webdriver Protractor sugar for the Chai assertion library
• Brunch Auto-Reload browser
• Brunch multiple assets folders

Application Features

• Initializr boilerplate
• Browser console polyfill
• Bower components
• LESS for all the CSS
• Bootstrap CSS framework (LESS flawor)
• Bootswatch themes for Bootstrap
• Jade for layouts with jade-angularjs-brunch compiler to AngularJS modules
• AngularJS Frontend Application framework
• AngularUI Router for nested routing
• AngularUI Bootstrap directives
• Angular Dialog Service application modals and dialogs for use with Angular-UI-Bootstrap
• Font Awesome with Angular FontAwesome directives
• Environment aware YAML configurations for Angular app with constangular-brunch
• API mock for development without real API backend around

Getting started

$ brunch new git@github.com:smokku/brunch-with-dragons.git

or

$ git clone git@github.com:smokku/brunch-with-dragons.git
$ npm install
$ git update-ref -d refs/heads/master  # optional

Developer Workflow

In one terminal window run Brunch build process:

$ npm start

In second terminal window run Karma tests:

$ npm test

Open browser-of-choice pointing to http://localhost:3333/ to see your application.

After every file edited and saved Brunch will rebuild _public directory, which triggers Karma tests run and brunch-auto-reload app in browser.

To run functional (e2e) tests run:

$ npm run-script test:functional

To build production release do:

$ rm -r _public
$ npm run-script build

Guide

There is a ton of functionality integrated and getting around may be confusing at first. Here are some random notes to guide you.

There are examples of two kinds of Angular modules:

• 'todo' is one-directory per module with separate source files for services, controllers, etc.
• 'view' has multiple, but related modules in one directory, each in own LiveScript source file
• common services, layouts, etc. are located in app/ directory without any subdirectory.

Choose module layout depending on how large and complicated the module is.

Unit tests are in *.spec.ls files together with components they test.

Functional (e2e) tests are in *.scenario.ls files together with parts they test.

There are *.mock.ls files, that will not be included in production release.

See services.spec.ls for example how to use Mocha asynchronous tests.

See todo.scenario.ls for examples of chai assertions for promises and chai-webdriver assertions and DOM selectors.

See api.mock.ls for API mock response example.

You can change Bootwatch theme in the first line of app/styles/app.less.

Foot-Notes

• Based on angular-brunch-seed
• Dragon ASCII Art by Erik Andersson