Now you can provide your feedback to our articles!

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

Last updated : Oct 01, 2021

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

  1. 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.

  2. After setting up things, got to terminal and type in

    mkdir simple-website
    then change directory to simple-website by command cd simple-website

  3. Then we will crete an inital package.json file. For this type

    npm init -y

  4. 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

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


  6. 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');
    });

  7. 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

     

  8. 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/>

  9. 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>

  10. 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') -%>

  11. 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') -%>

  12. 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') -%>

  13. 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') -%>

  14. 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') -%>

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


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



Setup react and express on sam...

Read more

How neurons in brain function

Read more

How to create custom router in...

Read more

Run C++ as CGI script in web b...

Read more

Real time chat application usi...

Read more

How to setup lemp stack in ubu...

Read more

How to secure phpmyadmin in Ub...

Read more

How to create real time notifi...

Read more

How to create simple api in no...

Read more

Task scheduling with cron job ...

Read more

How to use modules in Javascri...

Read more

Create a multi language(lingua...

Read more

Create food ordering app - Foo...

Read more

Linear Regression in machine l...

Read more

Why algorithms can drive the i...

Read more

Why Javascript frameworks are ...

Read more

Create authenticated API in La...

Read more

Create simple and static websi...

Read more

Setup Pusher app

Read more

Laravel Installation and setti...

Read more

Realtime chat application in L...

Read more

Working of neurons (the easy w...

Read more

Progressive web app

Read more

Sign in for comment. Sign in