Creating a simple website with Node.js, Express and EJS view engine

4 min readJan 12, 2021

This tutorial is for beginners who wanted to start with Node.js. We will be creating a simple website with Node.js and the Express framework and will be using EJS view engine to manage our HTML code

Prerequisites
Step 1: Install nodejs and npm

Follow links as per your development environment

If everything installed correctly, open terminal and type node -v and npm -v and you should get the following output based on the version you have installed

node -v
v12.18.0
npm -v
6.14.10

Step 2: Install Express generator package globally (g stand for global in command)

npm install express-generator -g

Read more about express at https://expressjs.com/

Step 3: To run our node server we will install the nodemon package globally

npm install nodemon -g

Read more about nodemon at https://www.npmjs.com/package/nodemon

I hope we are on the same page till now, its time to get our hands dirty with some code. Fasten your seatbelt Here we go….

Open a terminal and move to your directory where you want your code to reside and type

express --view=ejs ejs_node_website

As I told we will be using ejs view engine to manage our HTML code throughout our tutorial and this command will create skeleton of our node application and will set ejs as our default view engine

Next step is to install all dependencies listed in ejs_node_website/package.json file. Move to your ejs_node_website directory and type

npm install

Now we are all set to run our node server, type command

nodemon start

If you see following output in your terminal, voila!!! node server is up and running

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./bin/www`

Now open your browser and tune to the following URL

http://localhost:3000

You will see the following page

3000 is port no which is configured by default, you can change by editing ejs_node_website/bin/www file.

Open ejs_node_website/app.js file, you will see

var index = require('./routes/index');

So this is place where we will be defining all our website routes i.e. routes/index file.

Open your routes/index.js file and replace your route entry.

Old 
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});New 
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', {page:'Home', menuId:'home'});
});
router.get("/", function (req, res, next) {res.render("index", { page: "Home", menuId: "home" });});router.get("/about", function (req, res, next) {res.render("about", { page: "About", menuId: "about" });});router.get("/contact", function (req, res, next) {res.render("contact", { page: "Contact", menuId: "contact" });});

we are passing page and menuId variable to index view file.

Now open your views/index.ejs file and replace your code with following

<!DOCTYPE html>
<html lang="en">
<head>
 <% include partials/head %> 
</head>
<body>
<% include partials/menu %><div class="container-fluid bg-3 text-center">    
  <h3><%= page %></h3><br>
  <div class="row">
    <div class="col-sm-4">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
    </div>
    <div class="col-sm-4"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="col-sm-4"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div></body>
<% include partials/script %>
</html>

Create partials directory in ejs_node_website/views directory and create following files in partials directory

head.ejs

<title>Static Website | <%= page %></title>
<meta charset="utf-8">
<meta name="active-menu" content="<%= menuId %>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./stylesheets/style.css">

2. menu.ejs

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">LOGO</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="home"><a href="/">HOME</a></li>
        <li id="about"><a href="/about">ABOUT US</a></li>
        <li id="contact"><a href="/contact">CONTACT US</a></li>
      </ul>
    </div>
  </div>
</nav>

3. script.ejs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./javascripts/menu.js"></script>

If you have noticed we have seperated our header, topbar menu and master scripts(javascript which need to be load in all pages) code. And all the partials files are included in views/index.ejs file

<% include partials/head %> 
 <% include partials/menu %>
 <% include partials/script %>

Create javascripts and stylesheets directory inside ejs_node_website/public directory and create new file menu.js inside javascript directory and style.css inside stylesheets directory, I have created these 2 files just to show how we can load external CSS and js file in our app.

4. menu.js

$(document).ready(function(){
    var element = $('meta[name="active-menu"]').attr('content');
    $('#' + element).addClass('active');
});

5. style.css

.bg-3 { 
      background-color: #ffffff;
      color: #555555;
  }
  .container-fluid {
      padding-top: 70px;
      padding-bottom: 70px;
  }
  .navbar {
      padding-top: 15px;
      padding-bottom: 15px;
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 12px;
      letter-spacing: 5px;
  }
  .navbar-nav  li a:hover {
      color: #1abc9c !important;
  }.active>a {
    color: #1abc9c !important;;
  }

Now again tune to URL http://localhost:3000, our updated home page will be loaded similarly, you can create multiple static views like we did for index page.

You can find complete code on Github

Creating a simple website with Node.js, Express and EJS view engine

Written by Seetharam SR