js-boilerplate

Technology

We'll use the following technologies in JavaScript projects (other type of projects i.e. Ruby, can be differ from these recommendations):

• Client and server language: latest EcmaScript version (currently: ES6)
• Node.js version: we will trying to use io.js on Heroku
• Task framework: Gulp
• Module loader: Browserify
• CSS pre-processor: Stylus (compatible with SASS)
• Template system: Jade
• Server framework: Koa
• Client framework: AngularJS
• UI framework: latest Bootstrap (currently v3.3.x)
• Dropdown component: Select2
• Client side dependency manager: we use npm where possible
• Test framework: Mocha
• End-to-end test framework: Protractor

Please note:

• all project must be compatible with Node.js 0.11 with harmony mode
• we will use 6to5 to convert ES6 to browser compatible JavaScript

Prerequisites

To use this project, you'll have to have the following packages on your computer:

• Git or use GitHub Desktop (Windows and Mac)
• Node.js (0.11.x) and NPM
• MongoDB

Setting up

If you haven't done it yet, set up your Github account to use an SSH key.

When you're done and you have all the prerequisite software, clone the repo:

git clone [e-mail]:emartech/js-boilerplate.git

If you don't have Node.js already, download and install from here.

To run the sample application, you'll have to install MongoDB for your system.

On Mac OSX (with HomeBrew):

brew install mongodb --with-openssl

To use gulp from the command line, you have to install it globally using npm:

sudo npm install gulp -g

Now you can nstall all the required packages:

npm install

To start the application, simply run gulp start and open http://localhost:3000 in your browser.

Gulp tasks

• start the project for developing: gulp start
• create a build for deployment: gulp build
• run all tests: gulp test
• run client side tests: gulp client-test
• run server side tests: gulp server-test

Configuring PHPStorm

How to run client side tests

1. Install NodeJS and Karma plugins

• Run / Edit configurations / Add karma
  1. set configuration file: /js-boilerplate/karma.conf.js
  • set node interpreter: ~/.nvm/v0.11.14/bin/node
  • set karma package: /js-boilerplate/node_modules/karma

How to run server side tests

1. Install NodeJS plugin

• Run / Edit configurations / Add mocha
  1. set node interpreter: ~/.nvm/v0.11.14/bin/node
  • set node options: --harmony
  • set working directory: main directory (/js-boilerplate)
  • set mocha package: main directory and mocha module (/js-boilerplate/node_modules/mocha)
  • set extra mocha options: -r co-mocha
  • set test directory: main directory and server (/js-boilerplate/server)

Configuring Server Side

How to start your app

• Connect to mongoose with app.connectToMongoose(config.mongooseUri);
• Add Jade rendering with app.addDynamicViewMiddleware('viewPath', cache);
• Serving the static contents with app.addStaticContentMiddleware(path.join(config.root, '/assets'));
• Prepare for render mock with app.addHookMiddleware();
• Load controllers with app.loadControllers(path.join(config.root, 'controllers'));
• Load mongoose models with app.loadModels(path.join(config.root, 'models'));