A skeleton project for creating applications that use node.js server-side, backbone.js client-side, underscore.js templates, CoffeeScript as a JS pre-processor and Compass/SASS as a CSS pre-processor..
CoffeeScript JavaScript Ruby
Pull request Compare This branch is 1 commit ahead, 1 commit behind brikis98:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
bootstrap
client-lib
compiled
config
controllers
dependencies
models
node_modules
public
server-lib
stylesheets
templates
util
views
.gitignore
README.md
package.json
server.coffee
server.js

README.md

Overview

This is project represents the skeleton of an application with node.js server-side and backbone.js client-side. All JavaScript is written using CoffeeScript, all CSS is written using Compass and SASS, all templates are written using underscore.js and all client-side JavaScript is packaged using Jammit. A utility class is provided that automatically recompiles & packages all of these pre-processor languages every time you hit save, so you can iterate quickly: make a code change, hit refresh.

node-backbone-skeleton is primarily for my own personal use and not a battle-tested, production-ready framework. However, I've found it useful for a few projects, so perhaps other developers will find it a handy starting point.

Getting Started

  1. gem install compass
  2. npm install glob
  3. gem install jammit
  4. npm install -g coffee-script
  5. Add the NODE_ENV=development to your environment variables (e.g. add export NODE_ENV=development to .bash_profile)
  6. Run with node server.js (or node-dev server.js to get "hot redeploy")
  7. Go to http://localhost:8003
  8. Make changes to the code and watch the CoffeeScript, SASS and templates get recompiled as soon as you hit save

Technologies

Directory structure

  • /bootstrap: client-side JS files used to bootstrap the application, e.g. setup the namespace as well as create the backbone.js controllers, models and views.
  • /compiled: all files compiled to JavaScript - namely, all the CoffeeScript and templating code - is dumped in this directory. You should never need to change anything in here by hand.
  • /config: configuration settings for the project.
  • /controllers: backbone.js controllers.
  • /lib: 3rd party libraries, including jQuery, underscore.js and backbone.js.
  • /models: backbone.js models.
  • /node_modules: node.js modules installed via npm, including express, watch-tree, node-utils and underscore.js.
  • /public: all static content (CSS, JS, images) publicly visible to the browser gets dumped here.
  • server.coffee: the main node.js server file. Gets automatically compiled into server.js using /util/watcher.coffee.
  • /stylesheets: SASS stylesheets go here and are compiled when you hit save via Compass into /public/css.
  • /templates: underscore.js templates go here and are compiled when you hit save into /compiled/templates.
  • /util: utility class that auto-recompiles and packages all the JavaScript and CSS.
  • /views: backbone.js views.

/util/watcher.coffee

This class is loaded by server.js at startup to watch the project using watch-tree and recompile and package files as necessary so that you can iterate quickly. The goal is to support "make a change, hit reload" style development even though this project uses a number of pre-processors that require "compilation". It works reasonably well already and as I improve, I'll likely break this off into its own Github/NPM project.

Sample usage:

var Watcher = require('./util/watcher').watcher;
var options = {
  compass: 'config/config.rb',
  verbose: true,
  templates: templates,
  package: 'config/jammit.yml',
  packageOut: 'public/js',
  paths: {
    'server.coffee':                    {type: 'coffee', out: '.'},
    'templates/**/*.html':              {type: 'template', out: 'compiled/templates', package: true},
    'views/**/*.coffee':                {type: 'coffee', out: 'compiled/views', package: true}     
  }
};
var watcher = new Watcher(options);
watcher.watch();

Executing the watch() function does the following:

  • Runs compass watch if a config file is specified in options.compass
  • Watches over the root directory (as specified in options.root or '.' by default) and takes action any time a file changes that matches one of the keys (globs processed using node-glob). The action taken depends on the type:
    • coffee: compiles the file using CoffeeScript and puts the output into the directory specified by out
    • template: compiles the template using underscore.js and puts the output into the directory specified by out. Also adds this template by filename into the object specified in options.templates: e.g. if foo.html changed, foo.js would be created and options.templates['foo'] would be set to the compiled function.
    • If package: true is specified, will also run Jammit using the config file specified in options.package and put the output in the folder specified in options.packageOut