Mini Tutorial Node.js, Express, and Jade. - Gerardo Grimaldi

Post Top Ad

Your Ad Spot

Tuesday, June 4, 2013

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


1 comment:

vkg69utnug said...

The plastic fully surrounds the insert on injection, bonding it securely in place. The insert is Panties for Women vibrated utilizing an ultrasonic transducer melting the plastic, permitting it to be pressed into place. The planned material earlier than tooling so the injection point could be designed appropriately.