This article is written keeping in my mind Windows environment, but the basic concepts will be the same in other platforms like Linux, Mac, etc.

In this article we will build simple single page application to display list of employees using Express. So this journey will help us start building our technical muscles with basic concepts of Express integration with node.js.

So every journey starts with preparation, so does ours, lets start with installation of node.js, express and VS Code if we you don't have one.

Starting with node.js
Go to https://nodejs.org/en/download/ and depending upon your OS and your choice of setup process preference, get your node.js. I am downloading Windows Installer for 64 bit machine and running the same to install my node.js globally.

We are going to use VS Code IDE for this article. If you don't have it, install one from https://code.visualstudio.com/download .

Now, go to any drive (I am using D:), create a folder "express_web_development". Open VS Code and Click on File menu -> Open Folder -> select our "express_web_development" folder. Now go to terminal window by pressing ctrl + ~ (will differ for Mac or Linux). In the terminal window write npm init, this will generate package.json file which is sort of configuration file for our project inside our folder.

Now time to get our Express, so going again in the terminal window write npm install express, this command will install express package for us  which we will be using to build our web application. You can see its entry inside package.json file.

Phewwwwww!!! Finally we are done with the most boring task of installation and setup. Lets gets our hand dirty now.

You might have notice that in package.json file there "main": "index.js" attribute, which is a initial entry point for our application. So, lets add index.js file. index.js file will be our main file, where in we will add our express instantiation, template engine integration part, etc.

For starting building application using express we need to choose template engine and let express know which engine we are using. Basically there are 2 template engines 

1. Pug
2. EJS

In this article we will use EJS. The basic idea of difference between these 2 engines is the way they define and declare the templates (e.g. .html files).

Lets install EJS with the help of our old friend npm install. So, type in npm install ejs in terminal window to get one.

Now copy paste below code in your index.js file

var express = require('express'); // getting express

var app = express();// getting express instance

var port = 5000;

app.set('views', './src/views'); // telling express where to find template files 
app.set('view engine', 'ejs');// integrating ejs with express

app.get('/', function (req, res) { // starting express 
    res.render('index',
        {
            title: 'First Express Application',
            employees: [{ employeeName: 'Pranay' }, { employeeName: 'Mohite' }]
        });
});

app.listen(port, function (err) {

});

Now as we are doing web application development, we expects web forms, etc. So lets add index.ejs inside our /src/views folder as this is the place our template engine EJS will go looking for views (as mentioned in code above). Also note we are using .ejs extension, instead of traditional .html, thats because we using EJS template engine, which understands and expects .ejs files.

Lets dissect above code. The above code makes use of render function over response object. The render function expects 2 parameters, first one is the name of the view (index.ejs in our case) and the second parameter is data if we need to pass one. So in order to display the list of employees (we are getting from DB, post business logic massaging, etc.) we need to past the list to template (index.ejs). Also, notice we are passing "title" of the page as well, so we dont need to hardcode it on template side. Now, time to prepare our template. So copy-paste below code in index.ejs file:

<html>

<head>
    <title>
        <%=title%>
    </title>
</head>

<body>
    <ul>
        <% for(let i=0 ; i < employees.length; i++){ %>
            <li> Employee Name:
                <%= employees[i].employeeName %>
            </li>
            <%}%>
    </ul>
</body>

</html>

Note the interpolation technique used, EJS template engine understands <%%> parser. So what ever dynamic code/coding we need to do we can perform inside <%%>. And if you see we are using the same objects and properties we passed in from controller side.Now its time to launch our first Express web application, for that lets setup our command.

 

So go to package.json add below code inside "scripts" tag:

 "start": "node index.js",

 

Now run npm start and you will see your application with title and employees value we passed in. Voila!!! You can build much bigger and better application using this conceptual process.