Before reading this article, I would recommend that you read my previous articles.
In my previous article Building Web Application Using Node.js - Part 1, I have explained how to start work with node Web Application, we have seen about initializing node project, Package.json file, using express, npm start command, Routing, using templates and Bower.
In this article, I will explain you how can we use templating engines in our Web Application. Thus, I will use same project and we will learn how can we modify our Website templates in node.js.
Templating Engines
JavaScript template engines are often used when writing thick JS-clients or as "normal" template engines when using Server side JS like Node.js. Instead of cluttering the code by generating HTML, using string concatenating etc., you instead use a template and interpolate variable in them.
In our Application, we will use templating to allow express to build HTML pages. All the data and everything will be retrieved from the database and data will process at Server side and will generate HTML. There are various types of templating engines available. Some popular templating engines are listed below.
- Mustache
- Jade
- Handlebars
- Dust
- doT
- Underscore
- EJS
In this Web Application, I am going to use EJS. Let's start step by step.
First of all, download ejs package from node package manager, using the command, mentioned below.
npm install ejs --save
After installing ejs, you can check your ejs dependency will be in your package.json file.
![Templating Engines]()
Now, open app.js file and now we will setup our environment for templating engine. Whenever we work with any templating engine, couple of things are required. First, we will tell express that where we will store our views, which is possible, using set function. Open app.js and set your views path, as shown below.
![Templating Engines]()
In the second step, we have to tell express; which template engine you are going to use? The snapshot given below helps you in regards to this.
![Templating Engines]()
Now, in next step, I am going to copy my index.html file and save as index.ejs.
![Templating Engines]()
Now, write the code in ejs file, as shown below.
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <title>
- <%=title%>
- </title>
- </head>
-
- <body>
- <h1>
- <%=heading%>
- </h1>
- <ul>
- <% for(var i=0;i<foodItems.length;i++){ %>
- <li>
- <%=foodItems[i]%>
- </li>
- <% } %>
- </ul>
- </body>
-
- </html>
In ejs templating engine, we code like JavaScript in between <% and %>.
![Templating Engines]()
Now, I am modifying my app.js file. I am writing the code, mentioned below.
- app.get('/', function(req, res) {
- res.render('index', {
- title: 'Web Application using Node.js',
- heading: 'Hello C# Corner, Welcome to Node.js Tutorial',
- foodItems: ['Pizza', 'Burger', 'Pasta']
- });
- });
app.js complete code
- var express = require('express');
- var app = new express();
- var port = 3000;
- app.listen(port, function(err) {
- if (typeof(err) == "undefined") {
- console.log('Your application is running on : ' + port + ' port');
- }
- });
- app.use(express.static('public'));
- app.set('views', './src/views');
- app.set('view engine', 'ejs');
- app.get('/', function(req, res) {
- res.render('index', {
- title: 'Web Application using Node.js',
- heading: 'Hello C# Corner, Welcome to Node.js Tutorial',
- foodItems: ['Pizza', 'Burger', 'Pasta']
- });
- });
- app.get('/articles', function(req, res) {
- res.send('<h1>Welcome to C# Corner Articles.</h1>');
- });
After completing it, lets run the project, using npm start command and you will get an output, as shown below.
![Templating Engines]()
In next tutorial, we will learn about routing and we will explore more about ejs. Subsequently, after connecting our node program to the database and we will bind data in our Web Application.
<<Previous Article Next Article>>