Skip to content

jimmyhchan/jhc-no-de

Repository files navigation

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. It is primarily for my own personal use as I develop projects using these technologies, but may be handy for others too. I will gradually evolve and improve this structure as I become more familiar with these JavaScript tools.

Getting Started

  1. gem install compass
  2. npm install glob
  3. Add the NODE_ENV=development to your environment variables (e.g. add export NODE_ENV=development to .bash_profile)
  4. Run with node server.js (or supervisor server.js to get "hot redeploy")
  5. Go to http://localhost:8003
  6. 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

About

source for jhc.no.de

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published