In this article, I am going to create a Nodejs express sample app using the jade template engine. Jade is a template engine of Node.js. Template engine helps us to create an HTML template with minimal code. Also, it can inject data into the HTML template at the client-side and produce the final HTML. Vash, Ejs, Mustache, Dust are the other popular template engines available for Node.js.
What is Jade?
Jade is a template engine for Node.js. Jade syntax is easy to learn. It uses whitespace and indentation as a part of the syntax.
Let's Get Started
Create package.json file
At first create Nodejs app for creating a server, For that we need to create package.json file first. Create a folder named 'nodejs-with-jade'. After navigating to this folder over terminal run below command to create package.json file
npm init --yes
With above command, package.json file is created with default configuration.
What is package.json file?
All npm packages contain a file, usually in the project root, called package.json - this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies.
Install required NPM package
Install express and jade NPM packages. Run below command for the same.
npm install express jade --save
Create server.js file
This is the first file where the request comes from the frontend/client. create this file with touch server.js and put below code inside it.
const express = require('express');
const app = express();
// Jade
app.set('views', __dirname+'/views');
app.set('view engine', 'jade');
app.get('/', function(req, res){
res.render('home', {
title: "Welcome to Home page",
date: new Date()
});
});
app.get('/about-us', function(req, res){
res.render('about-us', {
title: "Welcome to About us page",
date: new Date()
});
});
app.listen(3000,()=>{
console.log('Server is running on port 3000');
});
In the above file, Below is done
Express is imported and app is create using express.
views folder is made public so that the template files stored inside will be available to browser.
Node.js view engine is set to jade
Two get routes is created to show two different pages, home and about us on the browser.
App started on port 3000
Create Template files
create a folder name views, then create layout.jade file under the view folder.
doctype html5
html
head
title #{title}
link(rel="stylesheet", href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css")
style(type='text/css').
#nav li {
list-style: none;
float: left;
padding: 0 10px;
}
body
div.container(style="max-width: 800px;")
h1 Nodejs Jade Sample Application
block content
footer(style="text-align:center;")
p Copyright © XYZ
The next file inside the template folder is home.jade, Put below code inside home.jade.
extends layout
block content
ul#nav
li
a(href="/") Home
li
a(href="/about-us") About us
br
h2 #{title}
p The current date is: #{date}
p.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The last file is about-us.jade, Put below code inside about-us.jade
extends layout
block content
ul#nav
li
a(href="/") Home
li
a(href="/about-us") About us
br
h2 #{title}
p The current date is: #{date}
p.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Note: Jade uses whitespaces and indentation to define nesting of tags. So the indentation and whitespaces play a crucial role in Jade. So tags should be proper indented otherwise the app will throw an error.
Run the app
Run below command to run the app.
node server.js
Now check the app on browser. It will look like below:
Conclusion
Using the template engine with Node.js is quite easy. The template engine maximizes client-side processing and it is very useful when we are working on a Node.js application and we want a few pages to host on the application.
You can also find other demos of Other [Sample Application](Conclusion
Using the template engine with Node.js is quite easy. The template engine maximizes client-side processing and it is very useful when we are working on a Node.js application and we want a few pages to host on the application.
You can also find other demos of Other Sample Application here to start working on enterprise-level applications.
Let me know your thoughts over email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share it with your friends.
Thanks!
This article is originally posted over jsonworld