Table of Contents

1. About
   1. Core
   2. Testing
   3. Cordova
   4. Serverpack
   5. Frameworks
2. Getting Started
3. Tasks
   1. Packages
   2. Extras
   3. Generators
   4. Assembling
   5. Testing

About

These are set of starter projects to build rich client-side experiences using Node.js. These skeletons are aimed at leveraging packages to develop and build, while providing a set of unified tasks and definitions to focus less on configuration and setup.

Core

The following tools are leveraged to provide a unified workflow:

• Jake to provide consistent tasks.
• Brunch to assemble client-side assets.
• Bower for front-end packages.
• Scaffolt to generate files from templates.
• BrowserSync for synchronized autoreloading across multiple environments.

Testing

Additional packages can be introduced to cover testing of your JavaScript applications:

• Karma to test code under multiple environments.
• Selenium WebDriver to test the site by controlling the browser(s).
• PhantomJS as the headless browser used by default in Karma and Selenium WebDriver.
• Mocha as the versatile test framework.
• Chai as the versatile assertion library.

Cordova

Skeleton variants are available to package your web applications to run with access to native components using Apache Cordova. Visit this page for more information about extras that are provided for Cordova.

Serverpack

Skeleton variants are available that provide additional packages to build a full stack application, inspired by MEAN:

• MongoDB as the simple and versatile database.
• Mongoose as the ORM for MongoDB.
• Passport for authentication.
• Prerender to support search crawlers.

Frameworks

The following starter projects are available to download, including Cordova and Serverpack variants. The JavaScript frameworks available include:

• AngularJS (HTML enhanced for web apps)
• Chaplin (HTML5 application architecture)
• Ember.js (A framework for creating ambitious web applications)

Getting Started

1. Download and install the following if you have not already:
   • Node.js
   • Git
   • Jake (if developing)
   • Platform SDKs (if using Cordova)
   • MongoDB or service (if using Serverpack)
2. Download one of the starter projects from GitHub.
3. Navigate to the project directory and run the command npm install.

Tasks

You are free to work with the individual packages that these skeletons use. (ex: Brunch, Scaffolt, etc.) However, tasks are provided to simplify your workflow with consistency. These tasks are executed using Jake. ex: jake [task]

Packages

These tasks are to handle things that are package-related, such as Bower and NPM.

bower:clean

Remove downloaded Bower components. This is useful if you want to reinstall dependencies, such as updates or packages have been corrupted.

bower:install

Download Bower components.

npm:clean

Remove downloaded NPM modules. This is useful if you want to reinstall dependencies, such as updates or packages have been corrupted. Remember that after running this task npm install needs to be executed to install dependencies.

Extras

These commands add additional features/items to the project that are not included by default.

add:jquery

rem:jquery

Add/remove the ubiquitous library jQuery to/from the project.

add:normalize

rem:normalize

Add/remove normalize.css to/from the project to ensure a consistent starting point in styling between different browsers.

Generators

Generator commands are available to generate and tear down files from templates given a type and name, eliminating the writing of boilerplate code.

generate / destroy

Generate or tear down templates. ex: jake generate codetest=user

• The following shorthand aliases are also available:
• generate / gen / g
• destroy / del / d
• ex: jake g codetest=user
• Multiple generator types and names can be specified in a single command. ex: jake gen codetest=test1,test2 sitetest=test3
• If the tasks are run without any names specified, the list of available generator names are displayed.

generate codetest=[name]

destroy codetest=[name]

Generate/destroy a test file with the given test name for testing client-side code with Karma.

generate sitetest=[name]

destroy sitetest=[name]

Generate/destroy a test file with the given test name for testing the site with WebDriverJS.

generate servermodel=[name]

destroy servermodel=[name]

(Serverpack only) Generate/destroy a Mongoose model.

Assembling

The following tasks are for assembling the application, generating JS/CSS and copy assets. The following modes are provided:

• dev mode keeps the readable JS/CSS originally written, plus include source maps.
• prod mode minifies JS/CSS and omits source maps.

If any Bower dependencies have not been downloaded yet, Bower will first download them.

build:[mode]

Assemble code and assets once.

watch:[mode]

Assemble the code and assets, plus watch for changes. Rebuild every time a change is detected.

server:[mode] browsersync=false

Assemble the code and assets, plus watch for changes. Rebuild every time a change is detected. Also, the server is booted up.

• If running in dev mode, the page will automatically refresh on changes as well.
• By default in dev mode Autoreload Brunch is used to automatically refresh the page on changes.
• If running the task with browsersync=true then BrowserSync is used instead for additional functionality.

Testing

To begin running tests make sure that the task test:install is run first to install required packages.

test:install

Install packages required to run code and site testing. You should only need to run this once, unless the task npm:clean has been invoked, or testing packages have been updated.

test:all codereporter=[codereporter] sitereporter=[sitereporter]

Run all tests listed below once. For more information on reporters see below.

test:code reporter=[reporter] watch=false browsersync=false

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. By default Karma runs once. If you run this task with watch=true Karma will watch for changes and auto-run on changes. You can also run the server while watching files with watch=server, plus use BrowserSync with browsersync=true.

test:site reporter=[reporter] watch=false

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. By default Karma runs once. If you run this task with watch=true Mocha will auto-run on changes with Nodemon. The global method getDriver is provided to setup a driver, while the global property baseUrl returns the root url. (ex: http://localhost:3333) Mocha as Promised is also included to take advantage of WebDriverJS' use of promises.