Chapless Brunch is a skeleton for building web applications, specifically single-page applications. It is a modification of Brunch with Chaplin. This skeleton leverages node, Brunch, Scaffolt, Bower, and Jake to provide cross-platform tasks in a simple package.
For a mobile/Cordova friendly variant, check out this skeleton.
├── app # Assets/code/styles for the client application
│ ├── assets # Static files copied without modification
│ ├── controllers # Chaplin controllers
│ ├── lib # Chaplin utilities and helpers
│ ├── models # Chaplin models and collections
│ ├── views # Chaplin views and collection views
│ ├── app.coffee # Chaplin application definition
│ ├── app.less # Application/page styling definition
│ ├── base.less # LESS variables and mixins for the application
│ ├── initialize.coffee # Chaplin views and collection views
│ └── routes.coffee # Route definitions for Chaplin
├── generators # Generators used by Scaffolt
├── jakelib # Unified set of tasks for development
├── public # Compiled client-side assets
├── server # Server configuration
│ ├── models # Persistent server-side model configuration
│ ├── passport # Passport integration
│ ├── routes # Custom routes/proxies/etc. (server-side)
│ ├── config.coffee # Configuration options
│ ├── prerender.coffee # Prerender middleware integration
│ └── session.coffee # Session configuration
├── test # Test-related files
│ ├── code # Code tests that run with Karma
│ ├── site # Site tests that run with WebDriverJS
│ ├── mocha.opts # Default options for site testing
│ └── setup.js # Initialization for site testing
├── vendor # Additional 3rd party JS/CSS libraries
├── .editorconfig # EditorConfig definitions for coding styles
├── bower.json # Listing for Bower dependencies to download
├── brunch-config.js # Brunch app build configuration
├── karma.conf.js # Karma runner setup
└── package.json # Node project dependencies and configuration
- Install node.js.
- If using Windows and leveraging Bower, install Git.
- If working on development, install Jake.
- Open a terminal window and navigate to the project directory.
- Execute the command
npm installto install all package dependencies. - If server is not going to just serve static assets, run the
add:serverextrastask.
One-line commands are provided for convenience as well for those that want to start running things as quickly as possible by installing depedencies automatically. Use npm start to download non-development packages and run the server:prod task. Use npm test to download all packages and run the test:all task.
Out of the box the server provided simply serves static assets with support for HTML5 push state. Extensible server extras can be added to support models and sessions with Mongoose, authentication with Passport, and caching with Prerender. To add extras, see the add:serverextras task.
While Brunch/Scaffolt/etc. can be used, Jake commands are provided for a simple and consistent interface. These tasks can be executed using jake. (jake [task]) These are the following available tasks provided out of the box:
Remove downloaded Node modules. This is useful if you want to reinstall dependencies. (ex. updated/corrupted package(s)) Remember that you need to call npm install to install dependencies.
Download and preinstall any Bower dependencies in advance. You can run this if you want to download Bower dependencies in advance.
Remove downloaded Bower dependencies. This is useful if you want to reinstall dependencies. (ex. updated/corrupted package(s))
These commands add additional features/items to the project that are not included by default.
Add/remove packages require to run code and site testing.
Add/remove extra packages to the server so that it does more than just serve static assets. For more information see notes above.
Add/remove the ubiquitous library jQuery to/from the project.
Add/remove normalize.css to ensure a consistent starting point in styling between different browsers.
Add/remove Lo-Dash to/from the project.
Add/remove Rivets.js to/from the project for binding models and views. No additional configuration is needed if added. To reference a model from a view with rivets use the model object. To access model properties from Rivets by default use :. (ex: model:name equates to model.get('name'))
Add/remove Exoskeleton to/from the project for a more lightweight Backbone. Note that this removes/restores classic Backbone, jQuery, and Lo-Dash. You can use other tasks to add/remove jQuery and Lo-Dash again.
Add/remove Davy to/from the project for simple and lightweight Promise support. Add this if you are using Exoskeleton and want support for promises.
Scaffolding commands are available in the form of generate and destroy. (syntax ex: jake generate codetest=user) Multiple scaffolds can be specified in a single command, as well as separating names with commas. (ex: jake generate codetest=test1,test2 sitetest=test3) The following aliases are also available: g, gen, d, del. (ex: jake g codetest=user) Unit test files are automatically generated for Chaplin items. For Chaplin views, a template and stylesheet is also provided in addition to the code file.
List available scaffolds.
Generate/destroy a Chaplin model.
Generate/destroy a Chaplin collection. Generating a Chaplin collection will also generate its corresponding model. Specify the name in singular form, as collection will automatically be pluralized.
Generate/destroy a Chaplin view.
Generate/destroy a Chaplin collection view. Generating a Chaplin collection view will also generate the individual item view.
Generate/destroy a Chaplin controller.
Generate/destroy a test file with the given test name for testing client-side code with Karma.
Generate/destroy a test file with the given test name for testing the site with WebDriverJS.
Tests leverage Mocha, Mocha as Promised, and Chai. Code and site testing is provided. Code testing adds Sinon and Sinon-Chai. Testing packages will automatically be installed if not available.
Run all tests listed below once. For more information on reporters see below.
Run code-based tests (ex. unit tests) using Karma. Karma is preconfigured to run with all available browsers on the system. (PhantomJS is included). Karma reporter can be specified with the reporter option. If you run this task with watch=true Karma will auto-run on file changes. Otherwise by default Karma runs once. You can also run the server while watching files with watch=server.
Run site-based tests (ex. system tests) using PhantomJS and WebDriverJS. A server is started up temporarily to interact with the site. A Mocha reporter can be specified with the reporter option. If you run this task with watch=true Mocha will auto-run on file changes with nodemon. Otherwise by default Mocha runs once. The global method getDriver is provided to get a setup and built driver. WebDriverJS' use of Promises can be combined with Mocha as Promised to handle asynchronous behavior easily. ex:
describe 'Sample', ->
before ->
@driver = getDriver()
beforeEach ->
@driver.get(baseUrl)
it 'Has a proper title', ->
@driver.getTitle().then (title) ->
title.should.equal('Chapless Brunch')
after ->
@driver.quit()These commands are used to assemble the application, generating the necessary JS/CSS and adding assets. Use dev mode to keep readable JS/CSS, plus include source maps. Use prod mode to minify/uglify JS/CSS as well as omit source maps and tests. If any Bower dependencies have not been downloaded yet, Bower will first download them.
Assemble the application once.
Assemble the application and continue to watch for changes. Rebuild every time a change is detected.
Assemble the application and continue to watch for changes. Rebuild every time a change is detected. Also, the application is served locally to open with a browser.
- Brunch Toolchain 0.9.3
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent