Getting Started With Jade Templating System on Express.js Web Framework

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.

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/napp.set('view engine', 'jade');
   // Set where to find the view files/napp.set('views', './views');
   // A route for the home page - will render the correspondent view/napp.get('/', function(req, res) {
   res.render('index');
   });
   // A route for /helloworld - will render the correspondent view/napp.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