Create simple web application in Node js Express js and EJS template

In this article you will read about how to build a simple website in Node, Express and EJS template engine.

Nowadays Node and complete Javascript stack has become the epicenter of web programming. Because Node has proved that it is best for realtime apps such as textual chat app, video chat app, taxi booking app and many apps which require events listeners which trigger each time an event is occured. In short Node has better performance than PHP.

Those who want to start programming in Node but do not know where to start. So this article is for you.

So let's get started

First of all make sure you have Node and NPM installed.
You can check whether Node is installed or not by typing the command
```
node --version
```
in your system's terminal. And same goes for NPM
```
npm --version
```
and if you get the version number then Node and NPM are installed on your system. And if you do not get version number then navigate to https://nodejs.org/en/ to download them.

After setting up things, got to terminal and type in
```
mkdir simple-website
```
then change directory to simple-website by command cd simple-website

Then we will crete an inital package.json file. For this type
```
npm init -y
```

Then we will download some dependecies. These dependencies are used to create app. Express is used to create express environment. It is just a minimal framework based on Node. EJS is a templating engine for Node. For these to download type in
```
npm i express ejs --save
```

Now open simple-website directory in code editor of your choice. We are using VS Code.

Create a new file named as server.js and type in the following script.

var express = require('express');
var app = express();

app.set('view engine', 'ejs');

app.get('/',(req,res)=>{
res.render('pages/home');
});
app.get('/products',(req,res)=>{
res.render('pages/products');
});
app.get('/services',(req,res)=>{
res.render('pages/services');
});
app.get('/contact',(req,res)=>{
res.render('pages/contact');
});
app.get('/*',(req,res)=>{
res.render('pages/invalid');
});

app.listen(8080,()=>{
console.log('server started');
});

After this create a new directory named as 'views' to create all the views files in this directory. And in views directory again create a new directory and name it as 'common_files' and create following files in common_files directory.
- header.ejs
- footer.ejs
Then go back to views directory and create a new directory named as 'pages'. Create following files in pages directory.
- home.ejs
- products.ejs
- services.ejs
- contact.ejs
- invalid.ejs

Go to views/common_files/header.ejs and type in the script.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>Node app with EJS</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<li class="nav-item">

<a class="nav-link" href="/">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="/products">Products</a>

</li>

<li class="nav-item">

<a class="nav-link" href="/services">Services</a>

</li>

<li class="nav-item">

<a class="nav-link" href="/contact">Contact</a>

</li>            

</ul>

</div>
</nav>
<br/>

Go to views/common_files/footer.ejs and type in script.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Go to views/pages/home.ejs and type in the script.

<%- include ('../common_files/header') -%>
<div class="jumbotron container">
<h3>This is home page</h3>
</div>
<%- include ('../common_files/footer') -%>

Go to views/pages/products.ejs and type in the following script.

<%- include ('../common_files/header') -%>
<div class="jumbotron container">
<h3>This is products page</h3>
</div>
<%- include ('../common_files/footer') -%>

Go to views/pages/services.ejs and type in the following script.

<%- include ('../common_files/header') -%>
<div class="jumbotron container">
<h3>This is services page</h3>
</div>
<%- include ('../common_files/footer') -%>

Go to views/pages/contact.ejs and type in the following script.

<%- include ('../common_files/header') -%>
<div class="jumbotron container">
<h3>This is contact page</h3>
</div>
<%- include ('../common_files/footer') -%>

Go to views/pages/invalid.ejs and type in the following script.

<%- include ('../common_files/header') -%>
<div class="jumbotron container">
<h3 class="alert alert-danger">This is an invalid request</h3>
</div>
<%- include ('../common_files/footer') -%>

All's done now. Run command node server.js in your terminal to run the app.

Lastly to check the app running go to any browser and type http://localhost:8080.`