Mini Tutorial Node.js, Express, and Jade.

I was having some problems deploying some jade web pages over Node.js with Jade template engine.

So I'm leaving a small tutorial for not forgetting what i have done so far...

Let's see first install everything we need:

>npm install express >npm install jade

Now we have the pieces lest make the directory structure for this project, just add the directories "views" and "public" we will save the static things in public, like JavaScript and CSS files and jade views in views. Pretty obvious right...

Now lets write some server code...

var app = express(); app.configure(function(){ app.set('port', process.env.PORT || 3000); //set the port app.set('views', __dirname + '/views'); //set views dir app.set('view engine', 'jade'); // set the template engine app.use(express.favicon()); //set the favicon app.use(express.static(path.join(__dirname, 'public'))); //set the public dir for static content }); app.get('/', function(req, res){ res.render('index.jade', {title: 'Jade Example'}); //sends title to the template and renders it }); app.listen(3000);

Let's make some views...

First the layout: layout.jade

!!! 5 html head title= title link(rel='stylesheet', href='/css/bootstrap.css') link(rel='stylesheet', href='/css/bootstrap-responsive.min.css') body header.site-header a.logo(href='/', title='Express, Jade and Stylus') Express, Jade and Stylus nav.site-nav ul.nav li.current a(href='/', title='Home') Home block content p | Created by a(href='http://http://grimaldigerardo.blogspot.com.ar/') Gerardo Grimaldi

Then a simple index: index.jade

extends layout block content h1 = title p Welcome to #{title}

The bootstrap css it's inside the public directory in: '/public/css/bootstrap.css'

All ready, let's take it for a spin...

node app.js

Bye