A simple example of using yeoman on an express app

readme.md

A simple example of using yeoman on an express app.

didn't tested yeoman build, just the watch / reload setup

The key to start using yeoman on any kind of webapp is to treat your assets separately from backend specificity.

Use your usual node, php, ruby, python, whatev server to browse your app, like you would do usually. Then in another shell, simply run the yeoman server to run the watch / compilation / reload process.

1. First, if not installed already, go ahead and install the appropriate browser extension

2. Make sure yeoman server is listening on port 35729 (standard livereload port).

3. Browse to your app URL (not yeoman's).

4. Establish connection by clicking on the LiveReload icon. If you see an error, double-check yeoman's server port.

5. Edit any assets within public/ dir, grunt will catch it, and send a LiveReload notif to the browser extension.

yeoman server can be used for static websites, for any other user case, use this technique.

Quick start

# init project / install deps
$ npm init && yeoman express jade --save-dev

# init app project structure
$ npm run init

# start the express server, redirect logs and detach in background
$ npm start > app.log 2>&1 &

# start the yeoman dev server
$ yeoman server

# close the opened webpage, we won't use it

# browse to the node app
$ open http://localhost:3000

# establish the livereload connection
# sorry no command for that :( you need to do so manually (click LR icon)

# edit some of the public/ assets, should be LiveReloaded

Description

Init package json and dependencies

$ mkdir -p ~/test/yeoman-express-app
$ cd ~/test/yeoman-express-app
$ npm init
$ npm i yeoman express jane --save-dev

Init express app structure

$ ./node_modules/.bin/express
destination is not empty, continue?
destination is not empty, continue? (yes or no) yes

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/user.js
   create : ./views
   create : ./views/layout.jade
   create : ./views/index.jade

   install dependencies:
     $ cd . && npm install

   run the app:
     $ node app

Init your project Gruntfile

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
      reload: {
        files: ['public/**', 'views/**'],
        tasks: 'reload'
      }
    },

    // setup server port to standard LiveReload, so that we can use the browser extension safely
    server: {
      port: '35729'
    }
  });


  function noop() {}
  // noopify some of the tasks triggered by yeoman server (or add the proper config)
  grunt.registerTask('clean', 'im a dirty guy', noop);
  grunt.registerTask('coffee', '', noop);
  grunt.registerTask('compass', '', noop);
};

Then, you need to start both express server (node app.js) and yeoman server (yeoman server), either in background or via two different shell.

That's it!

Going further

Run your app in background, redirect log to log/app.log

$ npm start > log/app.log 2>&1 &

# see the backgound jobs
$ jobs

# kill
$ kill %1

# foreground
$ fg

# once process attached again, simply hit Ctrl-C

Gruntfile.js

module.exports = function(grunt) {
  function noop() {}

  grunt.initConfig({
    watch: {
      reload: {
        files: ['public/**', 'views/**'],
        tasks: 'reload'
      }
    },

    // setup server port to standard LiveReload, so that we can use the browser extension safely
    server: {
      port: '35729'
    }
  });

  grunt.registerTask('sayhello', 'Hello', function() {
    grunt.log.writeln('hello');
  });

  // noopify clean (or add the proper config)
  grunt.registerTask('clean', 'im a dirty guy', noop);

  // and a bunch of other tasks
  grunt.registerTask('coffee', '', noop);
  grunt.registerTask('compass', '', noop);



};

package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app",
    "init": "express"
  },
  "dependencies": {
    "express": "3.0.6",
    "jade": "~0.27.7"
  }
}