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

January 17, 2014 | By the+gnu+linux+evangelist | Filed in: Tutorial.

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


      title Welcome
     body Welcome!

    Ctrl+x to Save & Exit from nano.

    nano views/helloworld.jade


      title Hello World
      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) {
    // A route for /helloworld - will render the correspondent view
    app.get('/helloworld', function(req, res) {
    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:



Tags: , , , , , , , , ,

QuickChic Theme • Powered by WordPress