generator-spa-project

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.

Usage no npm install needed!

<script type="module">
  import generatorSpaProject from 'https://cdn.skypack.dev/generator-spa-project';
</script>

README

generator-spa-stack Build Status

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

Unit Testing

End-to-End Testing

Build Automation

UI

Routing

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