Friday, February 6, 2015

rutha - A Hapi and Angular boilerplate stack

Introduction

Rutha is a simple, one of many, Hapi boilerplate stack that  uses AngularJS as default client side technology. The basic premise is that it contains npm modules that handles the Grunt tasks, Mongo migrations (yes we are MEAN oriented) and system utils. Plus one forthcoming Vagrant / Ansible based deployment repo.


Rutha Modules

rutha-utils (npm: rutha-utils, github: molekilla/rutha-utils)

Based on my experience with Express, I'm using nconf and winston for configuration and logging management. Additionally, rutha-utils/mongoose binds the Mongoose schemas and events. This module keeps the boilerplate at a minimum but at the same time lets you decide which dependencies will be linked with the internal Hapi controllers. Look here for more details: https://github.com/molekilla/rutha/blob/master/ui/lib/hapi/index.js#L1-L63

rutha-grunt-mongo-migrations 

(npm: rutha-grunt-mongo-migrations, github: molekilla/rutha-grunt-mongo-migrations)

Runs a shell script for mongo-migrate. An optional module for those using Mongo. It might even be possible to add it as a set of npm scripts, but works for the use case required. Look here for more details: https://github.com/molekilla/rutha-grunt-mongo-migrations/blob/master/grunt/shell.js

rutha-grunt-tasks-service 

(npm: rutha-grunt-tasks-service, github: molekilla/rutha-grunt-tasks-service)

Groups all service layer tasks. Separates having all grunt tasks inside rutha and allows for decoupling (rutha might use a newer version than a cloned repo). Because service doesn't required client side madness, it contains a really simple set of task flows.

  • grunt serve: Runs concurrent
  • grunt spec: Runs jshint and jasmine 2.0 specs
  • grunt coverage: Runs jshint, cleans previous coverage and runs Istanbul js code coverage
  • grunt auditpkg: Checks module security
  • grunt docs: Runs jsdoc3


rutha-grunt-tasks-ui 

(npm: rutha-grunt-tasks-ui, github: molekilla/rutha-grunt-tasks-ui)

Groups all UI related tasks. This is where the magic happens for the client side part. It handles both developer and build / deployment environment.

grunt autosync

This never got traction so it will be deprecated in 1.0

grunt serve

The tasks are:
  • preprocess: Runs any grunt-preprocess template found in any client side HTML. Will not process any server side HTML. For that use Hapi.
  • ngtemplates: Runs grunt-angular-templates. Takes the output in dist/html and generates a templates.js
  • concat: Concat files
  • ngannotate: Takes care of Angular Depedency Injection tagging. Uses grunt-ng-annotate.
  • uglify: Does a uglify run and generates sourcemaps.
  • bower_concat: Concats bower dependencies
  • wiredep: For serving files, we recommend bower_concat, but wiredep is still an option.
  • copy: Copies images in src/img and any inside src/css
  • cssmin: Minifies bower CSS and src/css
  • concurrent: Runs concurrent

grunt spec

The tasks are:
  • preprocess: Runs any grunt-preprocess template found in any client side HTML. Will not process any server side HTML. For that use Hapi.
  • jshint: Runs jshint
  • jasmine_node: Runs Jasmine 2.0 Hapi Specs
  • ngtemplates: Runs grunt-angular-templates. Takes the output in dist/html and generates a templates.js
  • wiredep: Generates a list of dependencies for Karma.
  • karma: Runs Karma

grunt build

The tasks are:
  • preprocess: Runs any grunt-preprocess template found in any client side HTML. Will not process any server side HTML. For that use Hapi.
  • ngtemplates: Runs grunt-angular-templates. Takes the output in dist/html and generates a templates.js
  • copy: Copies images in src/img and any inside src/css
  • bower_concat: Concats bower dependencies
  • copy: Copies views and front end code (those required)
  • concat: Concat files
  • ngannotate: Takes care of Angular Depedency Injection tagging. Uses grunt-ng-annotate.
  • uglify: Does a uglify run with no sourcemaps.
  • cssmin: Minifies bower CSS and src/css
  • compress: Zip files
There are other tasks, but these are the ones you'll use almost daily.

rutha_deploy (github: molekilla/rutha_deploy)

This will help you test your apps locally inside a Vagrant VM. Because the provisioning is Ansible based, you will be able to deploy to any cloud (AWS, Azure, DigitalOcean, etc)

rutha (github: molekilla/rutha)

rutha is then the main repo. At the top level you have a travis.yml and a package.json with a set of npm scripts that actually runs both service and UI specs to satisfy Travis or any CI package.

Service

The folder structure is as follow
  • config: Add your JSON config by NODE_ENV name. Example: production.json will be read by an environment variable NODE_ENV=production
  • lib: Contains the service business logic
    • hapi/index.js: Important to know that it contains the REST documentation Swagger API. For production release, we recommend to remove this plugin.
    • controllers: hapi based plugins.
  • migrations: mongo-migrate migrations
  • models: Mongoose schemas
  • spec: Jasmine 2.0 specs

UI

The folder structure is as follow
  • config: Add your JSON config by NODE_ENV name. Example: production.json will be read by an environment variable NODE_ENV=production
  • lib: Contains the service business logic
    • hapi/index.js: Handles server side pages and security.
    • controllers: hapi based plugins.
  • migrations: mongo-migrate migrations
  • views: Hapi views
    • partials: Hapi partials
  • spec: Jasmine 2.0 specs

Up Next

Next post we'll show how to start with Hapi and some basics of how to create APIs and Views.

Rogelio Morrell





No comments:

Post a Comment