A Simple static website using node js ejs template engine

The following is an example to create A simple static website using Node.js & EJS template engine. All you know that node.js is now a days very popular and growing tremendously. In this example, I have used EJS template engine to build a static website using Node.js. There are different Template Engines available for Node.js like Jade, Handler etc. But, I focus mostly EJS engine which I feel comfort to work for. You can choose your Template Engine which gives you almost the same result. You can create dynamic or server side functionalities in Node.js like other server side web technologies like PHP, ASP.NET, JSP etc. Node.js boom rapidly increasing now a days so that it is better update this technology as much as you can. To build even a dynamic application using Node.js you can focus any database like MySQL, SQLServer, MongoDB etc. Steps to create static website using Node.js EJS Template Engine : Don’t forget to do the following configuration : 1. 2. 3. 4. 5. 6.

Install Node.js Create a Folder Configure Package.json : npm init Configure Express JS : npm install express –save Configure Body-Parser : npm install body-parser –save Configure EJS template engine : npm install ejs –save

The above steps must be fulfilled in order to work with example. Packange.JSON File code looks like this :

{ "name": "spa", "version": 1 { 2 "name": "spa", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "dependencies": { 12 "body-parser": "^1.15.0", 13 "ejs": "^2.4.1", 14 "express": "^4.13.4" 15 } 16 }

Create server.js file in your main folder. The server.js file code looks like this :

A Simple static website using node js ejs template engine

var express = require('express'); var bodyParser = 1 2 var express = require('express'); 3 var bodyParser = require('body-parser'); 4 var app = express(); 5 app.set('views', __dirname + '/views'); 6 app.set('view engine', 'ejs'); //extension of views 7 app.use(bodyParser.urlencoded({ extended: false })); 8 9 //opening view 10 11 app.get('/', function(req,res){ 12 res.render('index'); 13 }); 14 15 app.get('/about', function(req,res){ 16 17 res.render('about'); 18 }); 19 20 app.get('/services', function(req,res){ 21 res.render('services'); 22 }); 23 24 app.get('/contact', function(req,res){ 25 26 res.render('contact'); 27 }) 28 29 30 //start server 31 32 var server = app.listen(8000, function () { 33 34 var host = server.address().address 35 var port = server.address().port 36 37 console.log("Example app listening at http://%s:%s", host, port) 38 39 }) 40

Create a folder named “includes” and add the following include files : Code for header.ejs :



A Simple static website using node js ejs template engine

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

SPA template using Angular .container .jumbotron, .container-fluid .jumbotron { margin:0px !important; } .navbar { border-radius:0px; margin:0px; } .panel-body { height:300px; margin-top:0px !important; border-radius:0px !important; } NODE.JS - A SIMPLE WEBSITE PHPTUTORIALS.CLUB Home About Us Service Contact us

Code for footer.ejs :



A Simple static website using node js ejs template engine

1 2 Copyrights @ wesohaex.com 3

Code for index-content.ejs :

Welcome to Weoshaex PHP Live Project 1 Welcome to Weoshaex 2 PHP Live Project Training 3 100% REAL-TIME WITH WEB SERVER AND DOMAIN 4 Step by Step Project Explanation.

Code for about-content.ejs :

Welcome to About Us 1 Welcome to About Us

Code for services-content.ejs :

Website Development Web Hosting 1 Website Development 2 Web Hosting 3 SEO Services

Code for contact-content.ejs :

Email: [email protected] 1 Email: [email protected]

Files in Views Folder : Index.ejs File Code :

5 6 7 8 9 10 11 12 13 14 15 16 17

Code for services.ejs :

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Explanation : See, the following is the code for routing placed in server.js. Each route is going call respective page in the views folder.

//opening view

A Simple static website using node js ejs template engine

app.get('/', function(req,res){ res.render('index'); }); app.get('/about', function(req,res){

res.render('about'); }); app.get('/services', function(req,res){ res.render('services '); }); app.get('/contact', function(req,res){

res.render('contact' ); });

A Simple static website using node js ejs template engine

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//opening view app.get('/', function(req,res){ res.render('index'); }); app.get('/about', function(req,res){ res.render('about'); }); app.get('/services', function(req,res){ res.render('services'); }); app.get('/contact', function(req,res){ res.render('contact'); });

The following code represent server start port : You can run the file by typing “node server.js” in node command prompt.

//start server var server = 1 //start server 2 3 var server = app.listen(8000, function () { 4 5 var host = server.address().address 6 var port = server.address().port 7 8 console.log("Example app listening at http://%s:%s", host, port) 9 10 })

Sharing is Caring : WhatsApp Email Print