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.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

Let's make some views...
First the layout: layout.jade
!!! 5
    title= title
    link(rel='stylesheet', href='/css/bootstrap.css')
    link(rel='stylesheet', href='/css/bootstrap-responsive.min.css')
     a.logo(href='/', title='Express, Jade and Stylus') Express, Jade and Stylus
             a(href='/', title='Home') Home
    block content
  | Created by 
  a(href='http://') 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



Popular posts from this blog

I hate the PDF format

Free DNS setup for a domain showing a Blogger web page

The Video converter I needed