README

generator-spa-stack

Yeoman generator for creating a single-page application with unit and e2e testing integrated and utilizing best practices for react, flux, and other front-end frameworks.

Technology Stack

bower

Unit Testing

End-to-End Testing

nightwatchjs (coming soon)

Build Automation

browserify
gulp
CSS auto-prefixer
CSS, HTML, JavaScript, image minification
CDN support for third-party scripts

Routing

crossroads (coming soon)
history.js (coming soon)

Miscellaneous

Generated Project

Project Structure

.
|-- src
|    |-- app
|        |-- actions
|        |-- components
|        |-- dispatcher
|        |-- lib
|        |-- stores
|    |-- images
|    |-- styles
|        |-- partials
|        +-- app.styl
|    +-- index.html
|-- test
|   |-- unit
|        |-- lib
|            +-- {{unit being tested}}-spec.js
|   |-- e2e
+-- .bowerrc
+-- .jshintrc
+-- bower.json
+-- gulpfile.js
+-- package.json

Build Output Structure

.
|-- public
|    |-- images
|    |-- js
|        +-- index.js
|    |-- styles
|        +-- index.css
|    |-- vendor
|        |-- {{bower third party dependency}}
             +-- {{bower main files}}
|    +-- index.html

Usage: gulp Tasks

To run the site, use the following command

gulp dev

To run all tests, use the following command

gulp tests

To run only unit tests, use the following command

gulp tests-unit

To run only end-to-end tests, use the following command

gulp tests-e2e

To create a development build, use the following command

gulp build

Build Customization

Any of the above accepts an optional CLI parameter to configure to build. An example is generated and named example.env.build.config.js and is located in the root of the project. Passing the optional parameter would look like this:

gulp build --buildConfigFile './example.env.build.config.js'

Production Builds

For production builds, the build.config.js can be updated to appropriate values to utilize CDNs over local resources.

third-party dependencies use their respective CDN as specified by the build's configuration file
application specific assets (css, javascript, images) utilize a CDN as specified by the build's configuration file

generator-spa-project

Usage no npm install needed!