stowns/clean-slate

so fresh

Clean Slate

Clean Slate aims to be the perfect starting point for an AngularJS/NodeJS webapp. This boilerplate is heavily modified from angular-app. The largest modifications are to the mongodb implementation (more easily allowing a local instance to be configured) as well as introducing mongoosejs for persistence. Also, the configuration has been spruced up and I've moved away from using mongolab-resource in favor of api-resource as I'm not huge on the client talking directly to the db. There is still some view-gutting to do but it's a work-in-progress.

__TODO

• Add Tests
• continue to gut application-specific views remaining from angular-app
• build out a few /api routes

Stack

• Persistence store: MongoDB hosted on MongoLab
• Backend: Node.js
• Awesome AngularJS on the client
• CSS based on Twitter's bootstrap

Build

It is a complete project with a build system focused on AngularJS apps and tightly integrated with other tools commonly used in the AngularJS community:

• powered by Grunt.js
• test written using Jasmine syntax
• test are executed by Testacular (integrated with the Grunt.js build)
• build supporting JS, CSS and AngularJS templates minification
• Twitter's bootstrap with LESS templates processing integrated into the build
• Travis-CI integration

Installation

Platform & tools

You need to install Node.js and then the development tools. Node.js comes with a package manager called npm for installing NodeJS applications and libraries.

• Install node.js (requires node.js version >= 0.8.4)

• Install Grunt-CLI and Testacular as global npm modules:

  npm install -g grunt-cli testacular@0.4.x
  

(Note that you may need to uninstall grunt 0.3 globally before installing grunt-cli)

App Server

Our backend application server is a NodeJS application that relies upon some 3rd Party npm packages. You need to install these:

• Install local dependencies:

  cd server
  npm install
  cd ..
  

Client App

Our client application is a straight HTML/Javascript application but our development process uses a Node.js build tool Grunt.js. Grunt relies upon some 3rd party libraries that we need to install as local dependencies using npm.

• Install local dependencies:

  cd client
  npm install
  cd ..
  

Building

If you are using Windows then you must run grunt as grunt.cmd. Throughout the rest of this README we will just write grunt.

Build the client app

The app made up of a number of javascript, css and html files that need to be merged into a final distribution for running. We use the Grunt build tool to do this.

• Build client application: grunt build

Configure Server

The server can store its data in a local or remote MongoDB database.

• I currently use Heroku's MONGOLAB_URI in production.

• Edit server/config/production.js/development.js.

  production

  mongodb : process.env.MONGOLAB_URI
  

  development

  mongodb : 'mongodb://localhost/boilerplate'
  

• Run our initialization script to initialize the database with a first admin user (admin@abc.com : password).

  `node server/initDB.js`
  

Running

Start the Server

• Run the server

  node server/server.js
  

• Browse to the application at [http://localhost:3000]

Development

Folders structure

At the top level, the repository is split into a client folder and a server folder. The client folder contains all the client-side AngularJS application. The server folder contains a very basic Express based webserver that delivers and supports the application. Within the client folder you have the following structure:

• build contains build tasks for Grunt
• dist contains build results
• src contains application's sources
• test contains test sources, configuration and dependencies
• vendor contains external dependencies for the application

Default Build

The default grunt task will build (checks the javascript (lint), runs the unit tests (test:unit) and builds distributable files) and run all unit tests: grunt (or grunt.cmd on Windows). The tests are run by testacular and need one or more browsers open to actually run the tests.

• grunt or grunt.cmd (on Windows)
• Open one or more browsers and point them to [http://localhost:8080/__testacular/]. Once the browsers connect the tests will run and the build will complete.
• If you leave the browsers open at this url then future runs of grunt will automatically run the tests against these browsers.

Continuous Building

The watch grunt task will monitor the source files and run the default build task every time a file changes: grunt watch.

Build without tests

If for some reason you don't want to run the test but just generate the files - not a good idea(!!) - you can simply run the build task: grunt build.

Building release code

You can build a release version of the app, with minified files. This task will also run the "end to end" (e2e) tests. The e2e tests require the server to be started and also one or more browsers open to run the tests. (You can use the same browsers as for the unit tests.)

• Run grunt release
• Open one or more browsers and point them to [http://localhost:8080/__testacular/]. Once the browsers connect the tests will run and the build will complete.
• If you leave the browsers open at this url then future runs of grunt will automatically run the tests against these browsers.

Continuous testing

You can have grunt (testacular) continuously watch for file changes and automatically run all the tests on every change, without rebuilding the distribution files. This can make the test run faster when you are doing test driven development and don't need to actually run the application itself.

• Run grunt test-watch.
• Open one or more browsers and point them to [http://localhost:8080/__testacular/].
• Each time a file changes the tests will be run against each browser.