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

• mocha
• chai
• sinon
• karma

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

UI

• flux
• react
• stylus
• font awesome
• normalize
• semantic grid system

Routing

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

Miscellaneous

• q
• signal-js
• momentjs

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