Quick introduction to using Express and Grunt with Node.js.

1. INTRODUCTION TO EXPRESS
AND GRUNTJS
Peter deHaan @pdehaan pdehaan@mozilla.com
Wednesday, November 6, 13

2. WHAT IS EXPRESS?
Fast, unopinionated, minimalist web development framework for
Node.js. Inspired by Ruby’s Sinatra. Insanely fast, flexible, and simple.
Wednesday, November 6, 13

3. WHY EXPRESS?
•
Express is fast, lightweight, and... does nothing.
•
You only include the features that you need, and Express doesn’t
force you to use specific databases or frameworks.
•
5th most depended upon Node.js module.
•
Over 1900 Node.js modules use express.
•
173k downloads last week.
•
More info at http://expressjs.com/
Wednesday, November 6, 13

4. GETTING STARTED
1. Install Node.js: http://nodejs.org/
2. Install express module via npm (you only need to do this once):
$ [sudo] npm install express -g
3. Create a new express application named “hello-world”:
$ express hello-world
4. Install all the Node.js dependencies:
$ cd hello-world && npm install
5. Run the application:
$ node app
Wednesday, November 6, 13

5. CONGRATS YOU’RE NOW A
WEB DEVELOPER!
•
By default express created 6
directories, 7 files.
•
After `npm install`
(which installs all
dependencies)... 234
directories, 979 files. npm
creates a /node_modules/
directory w/ 227
subdirectories and 972 files
for all the required modules.
Wednesday, November 6, 13

6. COOL STORY, BRO!
$ tree
.
├── app.js
├── package.json
├── public/
│
├── images/
│
├── javascripts/
│
└── stylesheets/
│
└── style.css
├── routes/
│
├── index.js
│
└── user.js
└── views/
├── index.jade
└── layout.jade
Wednesday, November 6, 13

7. SAMPLE PACKAGE.JSON
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.4",
"jade": "*"
}
}
Wednesday, November 6, 13

8. WAIT. WHAT?
NO! OH
COME ON!
By default, express uses the Jade templating language
(which is a crime against /(read|us)ability/i). Although
there are lots of other templating languages that you
can use instead (ie: ejs, handlebars, hogan, etc):
doctype 5
html
head
title= title
link(rel='stylesheet', href='/
stylesheets/style.css')
body
block content
Wednesday, November 6, 13

9. OK, I’M BORED ALREADY, LETS
LOOK AT CODE
Wednesday, November 6, 13

10. GRUNT - THE JAVASCRIPT
TASK RUNNER
•
The greatest thing to happen
to Node.js since npm.
•
Like Ant, but better!
•
Built using Node.js/JavaScript,
so it’s “easy” to pick up and
extend and write your own
custom tasks.
•
More info at http://gruntjs.com/
Wednesday, November 6, 13

11. GRUNT: BY THE NUMBERS
•
4th most starred module on npm.
•
26th most depended upon Node.js module.
•
52k downloads from npm last week. 258k downloads in the last month. It’s kind of
a big deal.
•
At least 443 modules in npm are dependent on Grunt. https://npmjs.org/browse/
depended/grunt. Grunt maintains a better list at http://gruntjs.com/plugins. You can
also follow newly updated grunt- packages from npm via Twitter: @gruntweekly.
•
The Grunt core team maintains about 35 ‘official’ plugins, including ones for
CoffeeScript, Sass/Compass, compressing files/folders, concatenating files, copying
files/folders, linting/minifyng CSS/JavaScript, running test suites, blah blah blah...
Wednesday, November 6, 13

12. HOW DO I EVEN?
Grunt is made up of a few different pieces:
1. $ npm install grunt-cli -g: Installs the grunt CLI globally.
2. $ npm install grunt: Installs the grunt task runner into current
project.
3. $ npm install grunt-{packages}: Installs grunt plugins into
current project.
4. Create a Gruntfile.js which defines your tasks.
5. Run `grunt` from the same directory as your Gruntfile.js file and specify
optional build targets.
Wednesday, November 6, 13

13. AUTOMATE ALL THE THINGS!
Wednesday, November 6, 13

14. SAMPLE GRUNTFILE.JS
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
// Task configuration.
// [snip-snap]
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['jshint', 'nodeunit']);
};
Wednesday, November 6, 13

15. ZZZZZZZ.....
Shut up and show me some code already!
Wednesday, November 6, 13

16. CREATING CUSTOM TASKS
// Impossible to read code snippet ahoy!
module.exports = function (grunt) {
grunt.initConfig({
copyright: {
files: [
"**/*.js",
"!**/node_modules/**"
],
options: {
pattern: "This Source Code Form is subject to the terms of the Mozilla Public"
}
}
});
grunt.registerMultiTask('copyright', 'Copyright all the things!', function () {
var pattern = this.options().pattern;
var files = this.filesSrc.map(function (file) {
return {
"name": file,
"txt": grunt.file.read(file, "utf8")
};
}).filter(function (file) {
return !file.txt.match(pattern);
});
if (files.length) {
grunt.log.subhead("The following files are missing copyright headers:");
files.forEach(function (file) {
grunt.log.warn(file.name);
});
return false;
}
});
grunt.registerTask('default', ['copyright']);
};
Wednesday, November 6, 13

17. CONCLUSION
express is a great way to quickly prototype dynamic Node.js based websites.
grunt is pretty awesome, use it.
Wednesday, November 6, 13