Post
Ask Question

Building Web Application Using Node.js - Part Two

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.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>  
  6.         <%=title%>  
  7.     </title>  
  8. </head>  
  9.   
  10. <body>  
  11.     <h1>  
  12.         <%=heading%>  
  13.     </h1>  
  14.     <ul>  
  15.         <% for(var i=0;i<foodItems.length;i++){ %>  
  16.             <li>  
  17.                 <%=foodItems[i]%>  
  18.             </li>  
  19.             <% } %>  
  20.     </ul>  
  21. </body>  
  22.   
  23. </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.
  1. app.get('/', function(req, res) {  
  2.     res.render('index', {  
  3.         title: 'Web Application using Node.js',  
  4.         heading: 'Hello C# Corner, Welcome to Node.js Tutorial',  
  5.         foodItems: ['Pizza', 'Burger', 'Pasta']  
  6.     });  
  7. });  
app.js complete code
  1. var express = require('express');  
  2. var app = new express();  
  3. var port = 3000;  
  4. app.listen(port, function(err) {  
  5.     if (typeof(err) == "undefined") {  
  6.         console.log('Your application is running on : ' + port + ' port');  
  7.     }  
  8. });  
  9. app.use(express.static('public')); //making public directory as static diectory   
  10. app.set('views', './src/views');  
  11. app.set('view engine', 'ejs');  
  12. app.get('/', function(req, res) {  
  13.     res.render('index', {  
  14.         title: 'Web Application using Node.js',  
  15.         heading: 'Hello C# Corner, Welcome to Node.js Tutorial',  
  16.         foodItems: ['Pizza', 'Burger', 'Pasta']  
  17.     });  
  18. });  
  19. app.get('/articles', function(req, res) {  
  20.     res.send('<h1>Welcome to C# Corner Articles.</h1>');  
  21. });  
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>>


Similar Articles