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
Comments