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
- 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
$ brunch new email@example.com:smokku/brunch-with-dragons.git
$ git clone firstname.lastname@example.org:smokku/brunch-with-dragons.git $ npm install $ git update-ref -d refs/heads/master # optional
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
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.
- Based on angular-brunch-seed
- Dragon ASCII Art by Erik Andersson