Backend Development With ExpressJS

Lek Hsiang Hui

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
 Learning Objectives
At the end of this lecture, you should:
Understand backend development using Javascript frameworks
Master ExpressJS fundamentals (Routing, Middleware, Templating, Handling Forms)

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 2
 What is Backend Development?
Handle server-side application logic
Database integration
API development
Will be performing backend development using Javascript (NodeJS)

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 3
 What is NodeJS?
Javascript runtime environment built on Chrome's V8 Javascript engine
Allows us to run Javascript codes outside of the usual web browser environment
Essentially allowing us to create programs similar to other programming languages
(Java, Python, etc)

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 4
 Why Use NodeJS for Backend Development?
Since frontend development would mainly involve JS, by also adopting JS for backend
development would streamline the processes
Single programming language for both frontend and backend
Developers can more easily switch between backend and frontend development (or at
least makes it easier to edit small bits of codes)
Codes/Libraries (from the frontend/backend) could be reused

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 5
 Popular Backend Development Frameworks
Koa
Hapi
Sails
ExpressJS (will be focusing on this)

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 6
 Getting Started with ExpressJS

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 7
 Introduction to ExpressJS
Minimalist web framework for NodeJS
Simplifies server-side development
Middleware and routing support

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 8
 Setting Up ExpressJS
1. Install NodeJS
2. Create a new Node project
3. Install ExpressJS using Node Package Manager (NPM)

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 9
 1. Install NodeJS

[Link]
©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 10
 2. Create a new Node project
Open Command Prompt/Terminal, go to a location, and create a new directory:
#suppose we want to create the folder in Desktop
cd Desktop
mkdir myapp

Go into the directory and initialize the folder as a Node project

cd myapp
npm init -y

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 11
 3. Install ExpressJS
While still within the myapp directory, install ExpressJS
npm install express

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 12
 Basic ExpressJS Application
//[Link]
const express = require("express");
const app = express();
const port = 3000;

[Link]("/", (req, res) => {

[Link]("Hello World!");
});

[Link](port, () => {
[Link](`Example app listening at [Link]
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 13
 Running Server
node [Link]

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 14
 Running Server
Go to [Link] on your web browser
If everything works out it should look like this:

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 15
 Basic ExpressJS Application Explanations
This will create an instance of Express
//[Link]
const express = require("express");
...

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 16
 Basic ExpressJS Application Explanations
Define a route to /
And specify the response to output when a GET request is received at /
//[Link]
...

[Link]("/", (req, res) => {

[Link]("Hello World!");
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 17
 Basic ExpressJS Application Explanations
Start the web server, listening to port 3000
//[Link]
...
const port = 3000;
...

[Link](port, () => {
[Link](`Example app listening at [Link]
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 18
 ExpressJS Fundamentals

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 19
 ExpressJS Concepts
Routing
Middleware
Templating
Handling Forms

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 20
 Routing and Middleware

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 21
 Routing
Use to define the various endpoints of your application
Specify how the application should respond to client requests at those endpoints
Example:
[Link]("/", (req, res) => {
[Link]("Hello World!");
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 22
 Routing Method
The most commonly used methods are:
[Link](path, callback) : Defines a route for GET requests.

[Link](path, callback) : Defines a route for POST requests.

[Link]("/about", (req, res) => {

[Link]("About Page");
});

[Link]("/submit", (req, res) => {

[Link]("Form Submitted");
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 23
 Route Parameters
Possible to define route parameters
Placed in the URL using the : prefix
Can then access the route parameter using [Link]
[Link]("/users/:userId", (req, res) => {
[Link](`User ID: ${[Link]}`);
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 24
 Query Strings
Apart from route parameters, it's also possible to define query strings in the URL
(e.g. /search?keyword=abc )
Can then access the query string using [Link]
[Link]("/search", (req, res) => {
const { keyword } = [Link];
[Link](`Search query: ${keyword}`);
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 25
 Using [Link]()
[Link]() allows us to chain multiple handlers for a specific path
[Link]("/book")
.get((req, res) => {
[Link]("Get a book");
})
.post((req, res) => {
[Link]("Add a book");
})
.put((req, res) => {
[Link]("Update the book");
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 26
 [Link]
[Link] class can be used to create modular, mountable route handlers
A Router instance is a complete middleware
const express = require("express");
const userRouter = [Link]();

// Define routes
[Link]("/", (req, res) => {
//get all users
});
[Link]("/", (req, res) => {
//add a user
});
// Use the router in your app
[Link]("/users", userRouter);

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 27
 Middleware
Middleware functions are executed during the request-response cycle

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 28
 Middleware
Middleware can
Execute any code
Make changes to req and res
End the request-response cycle
Call the next middleware in the stack
If the current middleware function does not end the request-response cycle, it must
call next() to pass control to the next middleware function (otherwise the request will be left hanging)

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 29
 Logger Middleware
//define the logger
function requestLogger(req, res, next) {
const fullUrl = [Link] + "://" + [Link]("host") + [Link];
const timeElapsed = [Link]();
const today = new Date(timeElapsed);
[Link]([Link](), fullUrl);
next();
}

//use the middleware

//apply to all routes
[Link](requestLogger);

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 30
 Logger Middleware

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 31
 Authentication Middleware
function auth(req, res, next) {
...
[Link]("check authentication");
if (isAuthenticated) {
next(); //continue - pass to the next middleware
} else {
[Link](401).send("Unauthorized");
}
}

//apply to all secret routes

[Link]("/secret/*", auth, (req, res) => {
[Link]("Secret path");
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 32
 Middleware Types
Application-level middleware
[Link](requestLogger);

[Link]("/secret/*", auth, (req, res) => { ... });

Router-level middleware
const userRouter = [Link]();
...
[Link]("/users", userRouter);

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 33
 Middleware Types
Error-handling middleware
//always provide 4 arguments (even if next is not used)
[Link]((err, req, res, next) => {
[Link]([Link]);
[Link](500).send("Something broke!");
});

Built-in middleware
//can load files from the public directory
[Link]([Link]("public"));

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 34
 Middleware Types
Third-party middleware
const cors = require("cors");
[Link](cors());

List of Third-party Middleware

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 35
 Templating

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 36
 Template Engine
Template engine enables us to generate dynamic HTML content
Popular Engines: EJS, Pug, Handlebars

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 37
 Setup EJS with ExpressJS
Install EJS using npm
npm install ejs

Set EJS as the view engine

[Link]("view engine", "ejs");

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 38
 Using EJS with ExpressJS
Defining the template (e.g. views/[Link] )
Variables passed to the template can be printed by wrapping within <%= and %>
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 39
 Using EJS with ExpressJS
Using template
[Link]() will look at the template in the views folder
Also possible to pass data into the template
[Link]("/", (req, res) => {
[Link]("index",
{
title: "Home",
message: "Welcome to ExpressJS"
});
});

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 40
 Include Templates in Another Template
Sometimes we might want to have fixed header/footer for most pages, possible to
make the header/footer into a template
And include it in a template`
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body class="container">
<header><%- include('header'); %></header>
<main>...</main>
<footer><%- include('footer'); %></footer>
</body>
</html>
©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 41
 Looping of Data in EJS
<!DOCTYPE html>
<html lang="en">
...
<body>
...
<ul>
<% [Link](function(person){ %>
<li><%= [Link] %> (<%= [Link] %>)</li>
<%}); %>
</ul>
</body>
</html>

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 42
 Handling Forms

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 43
 Handling Form Submit
Install the body-parser middleware
npm install body-parser

Use the body-parser middleware

const bodyParser = require("body-parser");

// Use bodyParser middleware to parse form data

[Link]([Link]({ extended: false }));
[Link]([Link]());

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 44
 Handling Form Submit
Read form data
[Link]("/submit", (req, res) => {
const formData = [Link];
const name = [Link];
[Link](`Form data: ${[Link](formData)}`);
});

...
<form action="/submit" method="POST">
<label for="name">Name:</label> <input type="text" name="name" /><br />
<label for="age">Age:</label> <input type="text" name="age" /><br />
<input type="submit" value="Submit" />
</form>
...

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 45
 Handling Form Submit

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 46
 What's Next
API Development

©2025 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner. 47