Getting-Started with Jade Templating System on Express.js Web Framework

January 17th, 2014 by thelinuxevangelist

Express.js Jade Template Quick-Start




The Tutorial Shows You How-to Getting-Started with Jade Language Templating System for Express.js Web Apps Development.

The Jade Language offers an Alternative Way to specify HTML. The key difference between Jade and the majority of other templating systems is the use of meaningful whitespace.

The Jade Templates use Indentation to indicate HTML tag nesting.
Indentation tags don’t have to be explicitly closed, which eliminates the closing tags problems.

Using Indentation also results in templates that are less visually dense and easier to maintain.

Express.js Jade Templates Quick-Start - Featured
  1. Make the Jade Templates Directory

    mkdir views

    You Can Set an Arbitrary Directory Name.

  2. Making some Jade Express.js Views

    nano views/index.jade

    Inserting:

    html
     head
      title Welcome
     body Welcome!
    

    Ctrl+x to Save & Exit from nano.

    nano views/helloworld.jade

    Inserting:

    html
     head
      title Hello World
     body
      b Hello World!
    
  3. Express.js App with Jade Views

    nano express-jade.js
    var http = require('http');
    var express = require('express');
    var app = express();
    // Set the view engine
    app.set('view engine', 'jade');
    // Set where to find the view files
    app.set('views', './views');
    // A route for the home page - will render the correspondent view
    app.get('/', function(req, res) {
     res.render('index');
    });
    // A route for /helloworld - will render the correspondent view
    app.get('/helloworld', function(req, res) {
     res.render('helloworld');
    });
    
    http.createServer(app).listen(3000, function() {
     console.log('App started');
    });
    
  4. Running Express.js App with Jade Views

    node express-jade.js

    Show Up Express.js Views on Browser:

    http://localhost:3000/

    http://localhost:3000/helloworld

Tags: , , , , , , , , ,