“Backend Development”

A
Summer training Report
Submitted
in partial fulfillment
for the award of the Degree of
Bachelor of Technology
In Department of computer science

Submitted To: Submitted By:

Mr. Shrinath Tailor Ashish Kumar
HOD (CSE/AI) 21ESBCS006

Department of Computer Science & Engineering

Sri Balaji College of Engineering & Technology, Jaipur
Rajasthan Technical University
(September, 2024)
 Candidate’s Declaration
I hereby declare that the work, which is being presented in the Dissertation, entitled “Backend

Development” in Department of Computer Science & Engineering with Specialization in

Computer Science, and submitted to the Department of Computer Science & Engineering,

Sri Balaji College of Engineering & Technology, Jaipur, Rajasthan Technical University is a

record of my own investigations carried under the Guidance of Mr. Shrinath Tailor,

Department of Computer Science & Engineering, Sri Balaji College of Engineering &

Technology, Jaipur, Rajasthan.

I have not submitted the matter presented in this Dissertation anywhere for the award of any
other Degree.

(Ashish Kumar)
Department of Computer Science & Engineering
Enrolment No. 21E1SBCSM30P006
Sri Balaji College of Engineering & Technology, Jaipur

Counter Signed by:

(Mr. Shrinath Tailor)

HOD, Department of Computer Science & Engineering

Sri Balaji College of Engineering & Technology, Jaipur

i
ii
 ACKNOWLEDGMENT
I would like to express my sincere gratitude to Octanet Pvt Ltd for the invaluable opportunity to
undergo 45 days of training in backend development. I extend my heartfelt thanks to my
mentors, Amrit Sharma for their exceptional guidance and support throughout this journey.
Their expertise and encouragement have significantly enhanced my skills and knowledge in
backend development.

This training experience has been instrumental in shaping my understanding of the field, and I
am truly grateful for the insights and practical knowledge I gained during this time. Thank you,
Octanet Pvt Ltd, for this enriching experience.

I would also like to acknowledge the guidance of the Mr.Shrinath Tailor, (Head of
Department, Computer Science & Engineering), whose support made this training possible.

I am extremely thankful to all my friends for their help, moral support and their valuable
suggestions.
Last but not least, I pay my due regards to my parents, for their unconditional support.

Ashish Kumar

iii
 TABLE OF CONTENT
Candidate’s Declaration i
ACKNOWLEDGMENT ii
TABLE OF CONTENT iii
LIST OF FIGURES v
DAILY DAIRY vi
Training Certificate viii
Abstract ix
Chapter - 1 Introduction 1
1.1 Overview of Technologies 1
1.2 Importance and Relevance 3
Chapter - 2 Backend Development with Node.js and Express 4
2.1 Introduction to Node.JS 4
2.2 Why Node.JS 4
2.3 Why Choose Node.JS 5
2.4 Setting Up the Node.js Environment 6
2.5 Express.js 8
2.6 Creating RESTful APIs with Express.js 11
2.7 Middleware Usage and Routing 12
2.8 Routing in Express.js 14
2.9 Best Practices for Middleware and Routing 15
Chapter - 3 Integrating MongoDB 16
3.1 Introduction to MongoDB
16
3.2 Setting Up MongoDB with Express.js 16
3.3 Steps for Integrating MongoDB with Express.js 17
3.4 Performing CRUD Operations with Mongoose 18
3.5 Use Mongoose Middleware 19
Chapter - 3 Error Handling and Validation 20
4.1 Error Handling 20

iv
 4.2 Key Strategies for Error Handling 20
4.3 Validation 21
4.4 Validating Request Data and Handling Validation Errors 22
Chapter - 5 Authentication and Authorization 24
5.1 Key Points of Authentication: 24
5.2 Authentication Mechanisms 25
5.3 JWT (JSON Web Tokens) 25
5.4 Implementing Login and Registration 27
5.5 Authorization and Role Management 28
5.6 Protecting Routes 30
Chapter - 6 Frontend Development with EJS 31
6.1 Key Features of EJS 31
6.2 Breakdown of how EJS Works 31
6.3 EJS Syntax 32
6.4 Advantages of Using EJS 32
6.5 Common Use Cases 33
Chapter - 7 Connecting Frontend and Backend 34
7.1. Axios 34
7.2. Fetch API 35
7.3 Key Differences 35
7.4 Use Cases 36
Chapter - 8 Performance Optimization 37
8.1 Backend Optimization 37
8.2 Frontend Optimization with EJS 39
Chapter - 9 Deployment and Environment Management 42
9.1 Backend Deployment 42
9.2 Frontend Deployment 44
Chapter - 10 Security Best Practices 45
10.1 Backend Security 45
10.2 Frontend Security 46
Conclusion 47

v
REFERENCES 48

vi
 LIST OF FIGURES

S.No. Figure No. Figure Name Page No.

1 Fig 1.1 Architecture of Development 2
2 Fig 2.1 Architecture of Node.JS 5
3 Fig 3.1 Database Connection 19
4 Fig 4.1 Middleware Validation 23
5 Fig 5.1 JWT Authentication 26

vii
 DAILY DAIRY

S.No DATE TOPIC

1 1/07/2024 Basics of Networking and Internet
2 2/07/2024 HTTP HTTPS and Protocols
3 3/07/2024 Recap of HTML,CSS,JS
4 4/07/2024 Recap of HTML,CSS,JS
5 5/07/2024 Recap of HTML,CSS,JS
6 6/07/2024 Introduction of Node.JS and History
7 7/07/2024 JavaScript in Browser Console
8 8/07/2024 ECMASCRIPT
09 9/07/2024 Node.JS Environment
10 10/07/2024 NPM
11 11/07/2024 Architecture of Node.JS
12 12/07/2024 Blocking and Non-blocking Behavior
13 13/07/2024 Environment Setup
14 14/07/2024 Configure Git
15 15/07/2024 HTTP Server in Node.JS
16 16/07/2024 Fundamentals of Node.JS
17 17/07/2024 Express.JS
18 18/07/2024 CRUD Operations Fundamentals
19 19/07/2024 Middleware and Routing Fundamentals
20 20/07/2024 Asynchronous Processing
21 21/07/2024 Create Basic Express Server
22 22/07/2024 Status Code and HTTP Methods
23 23/07/2024 API Testing Through Postman
24 24/07/2024 Best Practices for Middleware
25 25/07/2024 MongoDB and Mongoose Fundamentals
26 26/07/2024 Connectivity in Express Project

viii
27 27/07/2024 Basics query of mongodb
28 28/07/2024 Error Handling in Server
29 29/07/2024 Validation in Express Server
30 30/07/2024 Express Validator
31 31/07/2024 Authentication
32 01/08/2024 Authentication Mechanisms
33 02/08/2024 Authorization
34 03/08/2024 JWT Token
35 04/08/2024 Login and Registration
36 05/08/2024 Role Management
37 06/08/2024 Protecting Routes
38 07/08/2024 Server Side Rendering
39 08/08/2024 Frontend and Backend Integration
40 09/08/2024 Fetch API
41 10/08/2024 Caching
42 11/08/2024 Sessions
43 12/08/2024 Performance Optimization
44 13/08/2024 Security
45 14/08/2024 Deployment and Environment

ix
Training Certificate

x
 Abstract

This report provides a comprehensive overview of a 45-day training program focused on

backend development using Node.js, conducted at Octanet Pvt. Ltd. The program aimed to equip
participants with essential skills in server-side programming, database management, and API
development. The curriculum was designed to blend theoretical knowledge with practical
application, featuring hands-on projects, code reviews, and collaborative tasks.

Key topics included the fundamentals of Node.js, the Express framework, RESTful API design,
MongoDB integration, and various authentication methods. The training emphasized best
practices in coding, debugging, and deployment processes, ensuring participants developed a
strong foundation in backend development.

Through a series of workshops and mentorship sessions, trainees enhanced their problem-solving
skills and gained valuable insights into real-world applications of the technologies covered.
Feedback collected from participants indicated a notable improvement in technical competencies
and a boost in confidence regarding their ability to contribute effectively to backend projects.

The report also discusses challenges encountered during the training, such as varying skill levels
among participants and the need for additional resources. Recommendations for future training
initiatives are provided, highlighting the importance of adaptive learning strategies and ongoing
skill development to keep pace with the rapidly evolving technology landscape. Overall, this
program underscores the significance of investing in training to build a skilled workforce capable
of meeting the demands of modern backend development.

In conclusion, this training program underscores the importance of continuous skill development
in backend technologies and the need for organizations to invest in training initiatives. By doing
so, companies can cultivate a skilled workforce capable of adapting to the demands of modern
software development and maintaining a competitive edge in the industry.

xi
 Chapter-1

Introduction
This report aims to provide a comprehensive overview of modern web development using key
technologies such as Node.js, Express, MongoDB, EJS, and React. The objectives are to guide
readers through backend and frontend development processes, covering setup, implementation,
and best practices. By the end of this report, readers should have a solid understanding of these
technologies and how to integrate them into a cohesive web application.

1.1 Overview of Technologies

Node.js is pivotal in modern web development due to its ability to execute JavaScript on the
server side, which allows for a unified development experience. By leveraging the same
language on both the front-end and back-end, Node.js simplifies the development process,
reduces context-switching, and accelerates the learning curve for developers. Its non-blocking
I/O model enables applications to handle numerous connections simultaneously, which is
essential for today's real-time applications like chat services and live updates.

Express.js builds on the power of Node.js by offering a streamlined approach to server-side

development. Its minimalist framework provides the tools necessary for handling HTTP
requests, managing routes, and applying middleware. Express.js is valued for its flexibility and
simplicity, allowing developers to structure their applications with ease and focus on business
logic rather than boilerplate code. This results in faster development cycles and more
maintainable codebases.

MongoDB is highly relevant due to its adaptability and performance in handling large amounts
of unstructured data. Its document-oriented approach contrasts with traditional relational
databases, providing a more flexible schema that can evolve with application needs. This
flexibility is crucial for projects that require quick iterations and scalability, such as e-commerce
platforms and social networks.

1
 Chapter – 1

EJS (Embedded JavaScript) serves an important role in server-side rendering, which enhances
the delivery of dynamic content to users. By embedding JavaScript within HTML, EJS allows
developers to generate HTML content on the server based on application data,

improving page load times and SEO performance. This templating engine facilitates the creation
of dynamic and personalized web pages, which is essential for engaging user experiences and
content-rich applications.

React has transformed front-end development with its component-based architecture, which
encourages modularity and code reusability. This approach makes it easier to manage complex
user interfaces and states, and to build interactive elements efficiently. React’s virtual DOM
optimizes rendering performance, leading to a smoother user experience.

In essence, these technologies are significant because they address the diverse needs of modern
web applications ranging from fast and scalable back-end systems to dynamic and responsive
front-end.

Figure 1.1 Architecture of Development

2
 Chapter – 1
1.2 Importance and Relevance
The technologies of Node.js, Express.js, MongoDB, EJS, and React are crucial in modern
web development due to their complementary roles in creating efficient, scalable, and
interactive applications. Node.js stands out for enabling JavaScript on the server side,
fostering a unified development environment that simplifies code management and
enhances performance through its non-blocking architecture. Express.js builds on this by
offering a flexible and minimalist framework for handling server-side logic, routing, and
middleware.

The stack comprising Node.js, Express.js, MongoDB, EJS, and React is essential for
modern web development. Node.js enables server-side JavaScript, enhancing performance
through a non-blocking architecture. Express.js provides a flexible framework for
managing server logic and routing, improving productivity. MongoDB offers a schema-
less NoSQL database, allowing easy adaptation to changing data needs. EJS facilitates
dynamic content rendering by embedding JavaScript in HTML, while React enhances
user interfaces with reusable components and efficient updates Together, these
technologies create a powerful stack that supports the development of modern web
applications.

Their combined strengths in handling server-side operations, database management, and

client-side rendering streamline the development process and enhance application
performance. As businesses increasingly rely on digital solutions, understanding and
leveraging this stack becomes essential for delivering high-quality, user-centric
applications in a competitive landscape.

The relevance of this tech stack is further amplified by its active community and
ecosystem, which provide extensive resources, libraries, and tools that keep developers at
the forefront of innovation. As web development continues to evolve, mastering these
technologies equips developers to meet the demands of contemporary applications and
prepare for future advancements.

3
 Chapter 2

Backend Development with Node.js and Express

2.1 Introduction to Node.JS

Node.js is an open-source, cross-platform JavaScript runtime environment that executes

JavaScript code outside the browser, leveraging the V8 engine—the same engine that powers
Google Chrome. Its single-process model eliminates the need for creating new threads for
each request, which enhances performance and efficiency. Node.js is designed with
asynchronous I/O at its core, ensuring that operations like network requests, database access,
and filesystem interactions do not block the execution of other code, thus optimizing CPU
usage. This non-blocking nature allows Node.js to handle thousands of concurrent
connections seamlessly, without the complexities and potential bugs associated with thread
management. Additionally, Node.js enables frontend developers to use their JavaScript skills
for server-side development, providing a consistent programming environment. It also
supports the latest ECMAScript standards, giving developers the flexibility to use modern
JavaScript features while being independent of browser update cycles.

2.2 Why Node.JS

Node.js is a powerful choice for building back-end services, such as APIs for web and mobile
applications, and web servers that manage file operations and client interactions. Its adoption
by major companies like PayPal, Uber, Netflix, and Walmart highlights its robustness and
efficiency in production environments. One of the primary reasons to choose Node.js is its
ease of use, making it an excellent option for beginners and rapid prototyping. Its scalability
is another significant advantage, as Node.js supports both horizontal and vertical scaling to
accommodate growing application demands. The platform excels in real-time web
applications due to its ability to handle real-time synchronization efficiently.
This non-blocking nature allows Node.js to handle thousands of concurrent connections
seamlessly, without the complexities and potential bugs associated with thread management.
 Chapter – 2

2.3 Why Choose Node.JS

 Easy to Get Started: Node.js is designed to be beginner-friendly, which makes it an

excellent choice for those new to back-end development. Its JavaScript-based
environment aligns with front-end development, allowing developers to use the same
language across both client and server sides.
 Scalability: Node.js is known for its robust scalability features, which can be
achieved both horizontally and vertically. Horizontal scaling involves adding more
server instances to distribute the load, which Node.js handles efficiently due to its
event-driven architecture. Vertical scaling means upgrading the existing server’s
resources, such as CPU or memory, to manage higher loads.
 Real-Time Web Apps: Node.js excels in scenarios where real-time data processing
and synchronization are crucial. Its event-driven, non-blocking architecture makes it
particularly effective for applications like chat platforms, live notifications, and online
gaming, where immediate data updates are necessary.
 Fast Suite: Node.js’s performance is a standout feature, driven by its use of the V8
JavaScript engine, which compiles JavaScript to machine code for faster execution.
Its non-blocking, asynchronous processing model ensures that I/O operations, such as
accessing databases or making network requests, do not halt the execution of other
code.
 Unified Language: One of the significant advantages of Node.js is its use of
JavaScript for both front-end and back-end development. This unified language
approach simplifies the development process, as developers can use the same
language and often the same codebase for both server-side and client-side logic.
 Rich Ecosystem: Node.js benefits from a vast and active ecosystem of open-source
libraries and tools available through npm (Node Package Manager).
 Node.js is particularly well-suited for microservices architectures and cross-platform
development, benefiting from an active community that fosters continuous
improvement and support.

5
 Chapter – 2

2.4 Setting Up the Node.js Environment

Setting up a Node.js environment involves installing Node.js and npm (Node Package
Manager), configuring your development environment, and setting up a project. This guide
will walk you through each step to get your Node.js environment up and running efficiently.

1. Installing Node.js and npm

a. Download and Install Node.js:

1. Visit the Official Node.js Website: Go to the Node.js official website to download
the installer. You'll find two versions available:

 LTS (Long Term Support): Recommended for most users due to its stability
and extensive testing.
 Current: Includes the latest features and updates but might be less stable.

2. Download the Installer: Choose the installer suitable for your operating system:

 Windows: .msi installer

 macOS: .pkg installer
 Linux: Install via a package manager or download the
source code.

3. Run the Installer: Execute the downloaded file and follow the installation wizard.
Ensure the option to install npm is checked, as it’s essential for managing packages.
4. Verify Installation: After installation, open a command prompt (Windows) or
terminal (macOS/Linux) and run the following commands to verify the installation:

node -v
npm -v
By running these commands, you're verifying that Node.js and npm are correctly installed
and accessible from the command line. If these commands return version numbers, it means
the installation was successful. If not, you may need to troubleshoot the installation process.

6
 Chapter – 2

2. Configuring Your Development Environment

a. Choose an Integrated Development Environment (IDE):

Selecting an IDE or code editor that suits your needs can enhance your development
experience. Popular choices include:

 Visual Studio Code: A lightweight, powerful editor with extensive support for
JavaScript and Node.js.
 Sublime Text: Known for its speed and simplicity.
 WebStorm: A feature-rich IDE tailored for JavaScript development.

b. Install Essential Extensions:

If you’re using Visual Studio Code, consider installing extensions to streamline your Node.js
development:

 Node.js: Provides Node.js debugging support.

 ESLint: Integrates ESLint for code linting.

c. Configure Git:
For version control, install Git and set it up:

 Download Git: Visit Git’s official website to download and install.

 Initialize a Repository: In your project directory, use git init to start version control.
 Certainly! Here’s a concise and professional paragraph you can use in a report file to
describe the process of initializing a Git repository:
 To ensure effective version control and collaborative development, we initialized a
Git repository for our project. This process began with installing Git from the official
website and verifying its installation to ensure proper setup.

7
 Chapter – 2

 We navigated to the project directory and executed the git init command, which
created a hidden .git directory necessary for tracking changes.
Figure 2.1 Architecture of Node.JS

2.5 Express.js

Express.js is a minimalist and flexible web application framework for Node.js, designed to
simplify the process of building robust and scalable server-side applications. It provides a set
of tools and utilities that streamline the development of web servers and APIs by handling
HTTP requests and responses efficiently. Express.js is known for its simplicity and high
performance, making it a popular choice for developers seeking to build dynamic web
applications and RESTful APIs.
Express.js offers several key features:

 Middleware: Functions that process requests before they reach route handlers,
allowing for tasks such as logging, authentication, and body parsing.
 Routing: A straightforward way to define and manage different routes (URLs) and
the HTTP methods (GET, POST, PUT, DELETE) associated with them.
 Flexibility: It is unopinionated, meaning it does not impose a specific project
structure or require specific tools, giving developers the freedom to use their preferred
libraries and patterns.

8
 Chapter – 2

 Asynchronous Processing: Leveraging Node.js's non-blocking I/O model, Express.js

handles concurrent requests efficiently, making it suitable for applications that require
real-time interactions or handle high traffic.

Express.js is widely used by developers and companies due to its ease of use, rich ecosystem,
and ability to integrate with various databases and third-party services.

2.5.1 Basic Setup and Creating a Simple Server

1. Basic Setup
To get started with Express.js, follow these steps to set up a basic project:
a. Install Node.js: Ensure that Node.js is installed on your system. This will also include
npm (Node Package Manager), which is used to manage project dependencies.
b. Initialize a New Node.js Project: Create a new directory for your project and initialize it
with npm:

mkdir my-express-app

cd my-express-app
npm init -y

This command creates a package.json file with default settings.

c. Install Express.js: Install Express.js using npm:

npm install express

2. Creating a Simple Server

Once Express.js is installed, you can create a basic server to handle HTTP requests:
a. Create Your Application File: Create a file named app.js in your project directory. This
file will contain your server code.
b. Write Basic Server Code: Open app.js in your text editor and add the following code:

const express = require('express');

const app = express();
const port = 3000;

9
 Chapter – 2

// Middleware to handle JSON requests

app.use(express.json());

// Route handling
app.get('/', (req, res) => {
res.send('Hello, Express!');
});

app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);

});
c. Run the Server: Start your server by running the following command in your terminal:

node app.js

Your server will start, and you should see the message Server is running at
http://localhost:3000 in the terminal.
d. Test the Server: Open a web browser or use a tool like curl or Postman to navigate to
http://localhost:3000. You should see the text "Hello, Express!" displayed in your
browser.
By following these steps, you set up a basic Express.js server that listens for HTTP requests
and responds with a simple message. This setup forms the foundation for building more
complex applications using Express.js.

10
 Chapter – 2

2.6 Creating RESTful APIs with Express.js

Creating RESTful APIs involves designing and implementing endpoints that allow client
applications to interact with server-side resources over HTTP. REST (Representational State
Transfer) is an architectural style that leverages standard HTTP methods to perform CRUD
(Create, Read, Update, Delete) operations on resources. Express.js, a minimalist web
framework for Node.js, simplifies the process of building these APIs by providing tools for
routing, middleware handling, and request processing.
A RESTful API typically consists of various endpoints that correspond to resources, each
exposed via a URL and accessible using standard HTTP methods. These methods include:
 GET: Retrieves data from the server without modifying any resources. It is used to
request information about a resource or a collection of resources.
 POST: Submits data to the server to create a new resource. This method is used when
adding new entries or records.
 PUT: Updates an existing resource or creates a new resource if it does not exist. It is
used to modify a resource with new data.
 DELETE: Removes a resource from the server. It is used to delete a specific resource
based on its identifier.

Figure 2.2 REST API

11
 Chapter – 2

Each HTTP method is associated with specific status codes that indicate the outcome of the
request:
 200 OK: The request was successful, and the server returned the requested data.
 201 Created: The request was successful, and a new resource was created. This status
is typically used in response to a POST request.
 204 No Content: The request was successful, but there is no data to return. This
status is often used for DELETE requests.
 400 Bad Request: The server could not understand the request due to invalid syntax
or missing parameters. This status indicates a client-side error.
 401 Unauthorized: The request requires user authentication. This status indicates that
the user needs to log in or provide valid credentials.
 404 Not Found: The requested resource could not be found on the server. This status
is used when the endpoint does not exist or the resource is not available.
 500 Internal Server Error: The server encountered an unexpected condition that
prevented it from fulfilling the request. This status indicates a server-side error.
By leveraging these HTTP methods and status codes, RESTful APIs provide a standardized
way for clients to interact with server resources, enabling efficient and predictable
communication between applications. Express.js makes it easier to define and manage these
routes, handle incoming requests, and generate appropriate responses, streamlining the
development of RESTful services.

2.7 Middleware Usage and Routing

In Express.js, middleware and routing are fundamental concepts that facilitate the creation
of powerful and flexible web applications and APIs. Understanding how to effectively use
middleware and route requests is crucial for developing scalable and maintainable server-side
applications.
Middleware Usage

Middleware in Express.js refers to functions that have access to the request object ( req), the
response object (res), and the next middleware function in the application's request-response
cycle. These functions can perform a variety of tasks such as:

12
 Chapter – 2

Processing Requests: Middleware functions can modify the request object, add new
properties, or perform validations. For example, you might use middleware to parse incoming
JSON data or validate request parameters.

 Handling Responses: Middleware can modify the response object or end the
response cycle. For instance, you could use middleware to set response headers or
manage cookies.
 Error Handling: Special middleware functions can catch and handle errors that
occur during request processing, providing a centralized way to manage errors and
send appropriate responses to clients.
 Authentication and Authorization: Middleware is often used to check user
credentials, manage sessions, and restrict access to certain routes based on user roles
or permissions.
 Logging: Middleware can log request details such as the URL, HTTP method, and
response time, which is useful for debugging and monitoring.

Figure 2.3 Middleware Architecture

13
2.8 Routing in Express.js

Routing in Express.js is the mechanism used to define and handle different endpoints in your
application. Routes determine how your application responds to client requests for specific
URLs and HTTP methods. Routing allows you to organize your application logic and map
URLs to the appropriate request handlers.

Key Concepts in Routing:

 Defining Routes: You can define routes using app.get(), app.post(), app.put(),
app.delete(), and other HTTP method functions provided by Express. Each route
specifies a URL pattern and a callback function that handles requests to that URL.
 Route Parameters: Express allows you to define dynamic URL segments using route
parameters. For example, /users/:id can match any URL with a user ID, and the
value of :id can be accessed within the route handler.
 Route Handlers: Route handlers are functions that process incoming requests and
send responses. They can be used to perform operations such as querying a database,
rendering a view, or sending data in JSON format.
 Router Instances: Express allows you to create modular route handlers using the
Router class. This helps in organizing routes into separate files or modules, making
your application more maintainable.

By following these steps, you set up a basic Express.js server that listens for HTTP requests
and responds with a simple message. This setup forms the foundation for building more
complex applications using Express.js.

Example of Routing:

// Route to get all users userRouter.get('/', (req, res) =>

{ res.send('List of users'); });
// Route to get a user by ID userRouter.get('/:id', (req, res)
=> { const userId = req.params.id; res.send(`User details for
user with ID ${userId}`); });
 Chapter – 2

Figure 2.4 Middleware Working

2.9 Best Practices for Middleware and Routing

 Modular Middleware: Keep middleware functions modular and reusable. Define

middleware functions in separate files if they are used across different routes or
applications.
 Order Matters: Middleware functions are executed in the order they are added using
app.use(). Ensure that middleware dependencies are ordered correctly to achieve the
desired behavior.
 Error Handling: Implement a centralized error-handling middleware at the end of
your middleware stack to catch and manage errors gracefully.
 Route Organization: Use Express routers to organize routes logically, especially in
larger applications. Group related routes into separate files or modules to improve
maintainability.

 Using app.use() only for middleware functions ensures that middleware and route
handlers are separate and distinct. This approach enhances modularity and separation
of concerns, making it easier to understand and maintain the code.
 Additionally, it enables you to reuse middleware functions across different routes and
applications.
15
 Chapter 3

Integrating MongoDB

3.1 Introduction to MongoDB

MongoDB is a leading NoSQL database known for its flexibility and scalability. Unlike
traditional relational databases that store data in tables with fixed schemas, MongoDB uses a
document-oriented approach. This means it stores data in JSON-like documents (BSON) that
can easily accommodate a variety of data structures and change over time. Here’s why
MongoDB is a popular choice for modern applications:

 Flexible Schema: MongoDB allows for a dynamic schema, meaning you can store
documents with varying structures within the same collection. This flexibility is
particularly useful for applications where data requirements evolve frequently.
 Scalability: MongoDB is designed to scale out horizontally, making it easy to handle
large amounts of data and high traffic loads. It supports sharding, which distributes
data across multiple servers to balance the load and improve performance.
 Rich Query Language: MongoDB provides a powerful query language that supports
a wide range of operations, including complex queries, aggregations, and indexing.
This allows for efficient data retrieval and manipulation.
 Document-Oriented Storage: Data is stored in BSON (Binary JSON) format, which
preserves the hierarchical nature of data and enables complex data structures to be
represented and queried efficiently.
 Geospatial Queries: MongoDB includes support for geospatial indexing and queries,
making it a strong choice for applications that require location-based features.

3.2 Setting Up MongoDB with Express.js

To integrate MongoDB with an Express.js application, you typically use an Object Data
Modeling (ODM) library such as Mongoose. Mongoose provides a higher-level abstraction
for working with MongoDB, making it easier to define schemas, interact with the database,
and perform data validation.

By integrating MongoDB with Express.js, you can leverage the flexibility and scalability of
NoSQL databases while building a robust backend for your applications. This combination
 Chapter – 3

provides a powerful toolkit for managing data and building dynamic, data-driven
applications.

3.3 Steps for Integrating MongoDB with Express.js

1. Install MongoDB and Mongoose:
 Ensure MongoDB is installed and running. You can use a local installation or a
cloud-based service like MongoDB Atlas.
 Install Mongoose, which is an ODM (Object Data Modeling) library for
MongoDB and Node.js.

npm install mongoose

2. Connect to MongoDB:
 Establish a connection to your MongoDB database using Mongoose:

mongoose.connect('mongodb://localhost/mydatabase', {
useNewUrlParser: true, useUnifiedTopology: true, });

3. Defining Schemas in Mongoose

 In MongoDB, data is stored in collections as documents. To manage these documents

effectively, especially in a structured manner, Mongoose provides a way to define
schemas.
 A schema in Mongoose serves as a blueprint for the documents within a collection,
specifying the fields, their types, and validation rules.

const userSchema = new mongoose.Schema({ name: { type:

String, required: true },
email: { type: String, required: true, unique: true},
password: { type: String, required: true }, });

17
 Chapter – 3

3.4 Performing CRUD Operations with Mongoose

CRUD operations Create, Read, Update, and Delete are fundamental tasks when working
with a database.

Create: Creating new documents involves instantiating a model with data and then saving it
to the database. Mongoose’s save() method is used for this purpose. It creates a new
document and inserts it into the collection.

const newUser = new User({ name: 'John Doe', email:

'[email protected]', password: 'securepassword123',
});
newUser.save()
.then(() => console.log('User saved'))
.catch(err => console.error('Error saving user:',
err));

Read: Reading or retrieving documents involves querying the database. Mongoose provides
methods like find(), findOne(), and findById() to retrieve multiple documents, a single
document, or a document by its unique identifier, respectively. These methods allow you to
filter results and perform various types of queries.

User.find({ name: 'John Doe' }) .then(users =>

console.log('Users found:', users)) .catch(err =>
console.error('Error finding users:', err));

Update: Updating documents involves modifying existing records in the database. Mongoose
offers methods such as updateOne(), updateMany(), and
findByIdAndUpdate() to update one or multiple documents based on specified criteria.
These methods allow you to modify fields and apply changes efficiently.
User.updateOne({ email: '[email protected]' }, {
name: 'Jane Doe' })

18
 Chapter – 3

Delete: Deleting documents involves removing records from the database. Mongoose
provides methods like deleteOne(), deleteMany(), and
findByIdAndDelete() to remove individual or multiple documents based on specified
conditions. These methods ensure that unwanted or obsolete data is cleaned up from the
database.
User.deleteOne({ email: '[email protected]' })
.then(() => console.log('User deleted'))
.catch(err => console.error('Error deleting user:',
err));

3.5 Use Mongoose Middleware

 Mongoose Middleware provides a powerful way to execute custom logic during the
lifecycle of a document’s interaction with MongoDB.
 Middleware functions are executed at specific stages of a document’s lifecycle, such
as before or after saving a document, or when querying the database.

userSchema.pre('save', function (next) { if

(this.isModified('password')) { this.password =
hashPassword(this.password); // Example of password
hashing } next(); });

By following these steps and using the provided code examples, you can effectively
integrate MongoDB with your Express.js application, enabling you to manage and
interact with your data efficiently.

19
Figure 3.1 Database Connection
 Chapter 4

Error Handling and Validation

Error handling and validation are crucial components in the development of robust and
reliable web applications. They ensure that the application operates correctly under various
conditions and provides meaningful feedback to users and developers. In Node.js and
Express.js, effective error handling and validation can significantly enhance the stability and
security of an application. This section will cover the essential aspects of error handling and
validation, including strategies, best practices, and practical examples.

4.1 Error Handling

Error handling in Node.js and Express.js involves capturing and managing runtime errors to
prevent application crashes and provide informative feedback. Proper error handling allows
for graceful degradation of service and helps maintain a good user experience.

4.2 Key Strategies for Error Handling

1. Centralized Error Handling Middleware:

 Purpose: To manage errors in a unified manner across the application.

 Implementation: Define a middleware function that handles errors and place
it after all routes and other middleware.

2. Custom Error Classes:

 Purpose: To differentiate between various types of errors and provide specific

error messages.
 Implementation: Create custom error classes that extend the base Error class.

3. Logging and Monitoring:

 Purpose: To track and analyze errors for debugging and performance

improvement.
 Implementation: Integrate logging libraries and monitoring tools.

4. User-Friendly Error Messages:

 Chapter – 4

 Purpose: To ensure that error messages are clear and useful for end-users.
 Implementation: Customize error responses based on error types and user
context.

Example Code

// Centralized error handling middleware

app.use((err, req, res, next) => {
console.error(err.stack);
// Log error
stack res.status(500).send({ error: 'Something went
wrong!'});

4.3 Validation

In Node.js applications, data validation is a critical aspect of ensuring the integrity and
security of user inputs. Libraries such as Joi and express-validator are commonly used for this
purpose. Joi offers a powerful schema-based approach to validation, allowing developers to
define and enforce complex rules for data structures. It is particularly useful for validating
payloads in requests and handling intricate validation logic. Conversely, express-validator
provides a middleware-based solution specifically designed for use with Express.js.

4.3.1 Express Validator

Express-validator is a popular middleware library for validating and sanitizing data in
Express.js applications. It leverages the functionalities of the validator.js library to provide a
robust and flexible validation solution directly within route handlers. This tool enables
developers to define validation rules in a straightforward manner using a series of chained
methods, and it integrates seamlessly with Express.js routes. By incorporating express-
validator, developers can enforce data integrity, sanitize inputs to prevent security issues, and
handle validation errors efficiently.

With express-validator, developers can define validation rules using a series of intuitive,
chained methods, making it easy to implement and maintain. This middleware integrates
seamlessly with Express.js routes, allowing for streamlined validation processes.

21
 Chapter – 4

Key Features:

 Middleware Integration: express-validator operates as middleware in Express.js,

meaning it integrates directly into the request handling pipeline. This allows you to
apply validation and sanitization rules to incoming requests before they reach your
route handlers.
 Error Handling: express-validator provides a systematic approach to handling
validation errors. After validation middleware is processed, error messages are
collected and made available for further handling.
 Custom Validators and Sanitizers: express-validator allows you to define custom
validation and sanitization logic for more complex or specific requirements.

// Define validation and sanitation rules

const validateUser = [
body('name').isString().withMessage('Name must be a
string') .isLength({ min: 3 }).withMessage('Name must be
at least 3 characters long'), body('age')

// Route using validation middleware app.post('/users',

validateUser, (req, res) => { // Check for validation
errors const errors = validationResult(req); if (!
errors.isEmpty()) { return res.status(400).json({ errors:
errors.array() }); }

4.4 Validating Request Data and Handling Validation Errors

Validating request data is a critical step in developing secure and reliable web applications. It
ensures that the data received from users meets expected formats and constraints, preventing
potential errors and vulnerabilities.

Key Points of Validating Request Data and Handling Validation Errors:

22
 Chapter – 4

 Data Integrity Data integrity refers to ensuring that the data entering your system
meets predefined criteria and constraints. This involves validating that input data is
complete, accurate, and formatted correctly according to the application's
requirements.
 Security: Validation helps protect your application from malicious inputs that could
exploit vulnerabilities or lead to security breaches. By enforcing strict input rules, you
can prevent attacks such as SQL injection, cross-site scripting (XSS), and other forms
of data manipulation.
 User Feedback: Providing clear and actionable feedback to users when their input is
invalid helps them understand and correct their mistakes. This improves the user
experience by making interactions with the application smoother and more intuitive
 .Error Management: Handling validation errors involves managing how errors are
reported and processed without causing application disruptions or exposing sensitive
information. It’s important to handle errors gracefully to maintain a good user
experience and keep the system stable.

// Define validation and sanitation rules

const validateUser = [
body('name').isString().withMessage('Name must be a
string') .isLength({ min: 3 }).withMessage('Name must be
at least 3 characters long'), body('age')

Figure 4.1 Middleware Validation

23
 Chapter 5

Authentication and Authorization

Authentication is a crucial aspect of securing applications and systems, ensuring that users
are who they claim to be. It involves validating credentials provided by users—such as
usernames and passwords—or employing other methods like biometrics or multi-factor
authentication (MFA). Effective authentication helps prevent unauthorized access, ensuring
that only legitimate users can interact with sensitive resources and features.

Proper authentication processes not only verify user identity but also protect against various
security threats, such as identity theft and unauthorized data access. It often integrates with
authorization mechanisms to determine what authenticated users can do or access within the
application.

5.1 Key Points of Authentication:

 Verification of Identity: Node.js applications often use authentication mechanisms to

confirm that users are who they claim to be. This is typically done through credentials
such as usernames and passwords. For example, a login process might involve
verifying a password against a stored hash to ensure that the user’s credentials are
correct.
 Credential Management: Managing credentials securely is essential to protect user
data. In Node.js, this involves techniques like hashing passwords before storing them
in a database to prevent exposure in case of a data breach. Libraries such as bcrypt are
commonly used for hashing and comparing passwords securely.
 Multi-Factor Authentication (MFA): To enhance security, Node.js applications can
implement Multi-Factor Authentication (MFA). MFA requires users to provide
additional verification factors beyond just their password, such as a code sent to their
phone or generated by an authenticator app. This extra layer of security helps protect
against unauthorized access.
 Security: Ensuring that your Node.js application is secure involves implementing
robust authentication practices to protect against unauthorized access and potential
security breaches. This includes protecting sensitive data, using secure methods for
authentication, and regularly updating security practices to address new threats.
 Chapter – 6

5.2 Authentication Mechanisms

Authentication mechanisms are methods used to verify the identity of users or systems before
granting access to resources. Effective authentication ensures that only authorized individuals
can interact with sensitive information or perform critical actions. Various mechanisms exist,
each with its own strengths and applications depending on the security requirements and
context.

 Username and Password authentication involves users entering a unique username

and password to access a system. It’s straightforward but vulnerable to attacks like
brute force and phishing, requiring secure password handling practices.
 Multi-Factor Authentication (MFA) adds layers of security by requiring additional
verification methods, such as a code sent to a phone or a biometric scan. It
significantly enhances security but can complicate implementation and user
experience.
 Token-Based Authentication involves issuing tokens, such as JSON Web Tokens
(JWTs), after successful login, which are then used to authenticate subsequent
requests. It’s stateless and scalable, ideal for APIs and Single Sign-On (SSO), but
requires secure token management.
 Certificate-Based Authentication uses digital certificates issued by Certificate
Authorities (CAs) to verify identities. It’s highly secure, especially for enterprise use,
but involves complex certificate management and setup.

5.3 JWT (JSON Web Tokens)

JSON Web Tokens (JWT) are a widely adopted standard for securely transmitting
information between parties as a JSON object. JWTs are compact, URL-safe tokens that
contain claims about a user or system, and are used primarily for authentication and
authorization purposes. A JWT is composed of three parts: a header, a payload, and a
signature.

The header typically consists of the token type (JWT) and the signing algorithm (such as
HMAC SHA256 or RSA). The payload contains the claims or the data to be transmitted,
such as user ID and roles. This part is not encrypted, so it’s important to avoid including

25
 Chapter – 6

sensitive information. The signature is created by encoding the header and payload with a
secret key or a private key and then signing them. This signature ensures that the token has
not been tampered with and can be verified by the recipient.

Key Points of JWT (JSON Web Tokens):

1. Structure: A JWT consists of three parts:

 Header: Contains metadata about the token, including the type of token (JWT)
and the signing algorithm used (e.g., HMAC SHA256).
 Payload: Holds the claims or information being transmitted, such as user details
or permissions. This data is encoded but not encrypted, so sensitive information
should be avoided.
 Signature: Ensures the integrity and authenticity of the token by encoding the
header and payload with a secret key or private key and then signing it.

2. Stateless Authentication: JWTs enable stateless authentication, meaning the server

doesn’t need to store session information. The token itself contains all the necessary
data for authentication.

3. Security: The token’s signature verifies that the token has not been altered. However,
JWTs are not encrypted by default, so sensitive data should not be included in the
payload without additional encryption.

Figure 5.1 JWT Authentication

26
 Chapter – 6

4. Expiration: JWTs often include an expiration ( exp) claim to limit their validity
period, enhancing security by reducing the risk of token misuse.

5.4 Implementing Login and Registration

Implementing login and registration functionality is essential for user authentication in web
applications. This involves creating endpoints for user registration (sign-up) and login (sign-
in), securely handling user credentials, and providing mechanisms for users to access
protected resources once authenticated. Below is a guide on how to implement these features
using Node.js with Express, JWT for token-based authentication, and bcrypt for hashing
passwords.

Key Steps:

1. User Registration: Users create an account by providing a username and password.

The password is hashed before storage to enhance security.
2. User Login: Users authenticate by providing their username and password. The
system verifies the credentials and, if correct, issues a JWT token for subsequent
requests.

// Registration endpoint
app.post('/register', (req, res) => {
const { username, password } = req.body;

// Check if user already exists

if (users.find(u => u.username === username))
{ return res.status(400).json({ message: 'User already
exists' }); }

// Hash the password before storing

const hashedPassword = bcrypt.hashSync(password, 8);
users.push({ username, password: hashedPassword });
res.status(201).json({ message: 'User registered
successfully' });
27
 Chapter – 6

5.5 Authorization and Role Management

Authorization is the process of granting or denying access to specific resources or actions

based on the user's identity and their associated permissions. Once a user is authenticated, the
system needs to evaluate what the user is allowed to do. This often involves checking user
roles or permissions and enforcing access control policies.

Key concepts in authorization include:

 Permissions: Specific rights or actions a user can perform, such as read, write, or
delete.
 Roles: Groupings of permissions that are assigned to users. For example, an "Admin"
role might have permissions to manage users, while a "User" role might only have
permissions to view content.
 Access Control Lists (ACLs): Lists that define which users or roles have access to
specific resources or actions.

Role-Based Access Control (RBAC): A method of managing user permissions based on

roles. Users are assigned roles, and each role has a set of permissions. Role Management
involves defining, creating, and assigning roles to users, ensuring that each user has the
correct permissions to perform their tasks. Effective role management can simplify
permission handling and make it easier to enforce security policies.

Steps for effective role management include:

 Defining Roles: Identify the different roles needed within the application and define
their associated permissions. Common roles include "Admin," "Manager," "User,"
and "Guest."
 Assigning Roles: Assign roles to users based on their job functions or responsibilities.
This can be done manually by administrators or automatically through user
onboarding processes.
 Managing Role Hierarchies: Establish hierarchies if necessary, where higher-level
roles inherit permissions from lower-level roles. For instance, an "Admin" might
inherit permissions from a "Manager" role but also have additional capabilities.
28
 Chapter – 6

 Regular Audits: Periodically review roles and permissions to ensure they align with
current business needs and security policies.

Authorization and role management are critical for ensuring secure access control in
applications. By defining clear roles and permissions and implementing robust access
controls, you can protect sensitive resources and maintain a secure and efficient system. The
provided code example demonstrates a basic implementation of these concepts using JWTs,
making it easier to manage user permissions and roles in a Node.js application.

JWTs facilitate the authentication process by securely transmitting user identity and role
information, allowing for efficient validation of access rights and ensuring that only
authorized users can access specific resources or perform certain actions. This approach not
only enhances security but also supports scalable and manageable access control within the
application.

JWTs facilitate secure authentication and authorization by encoding user information and
roles in a token that is transmitted between the client and server. This token is then verified
on each request to ensure that the user has the necessary permissions to access specific
resources or execute particular actions.

Figure 5.2 Role Base Authentication

29
 Chapter – 6

30
 Chapter – 6

5.6 Protecting Routes

Protecting routes is a fundamental aspect of web application security, ensuring that only
authorized users can access specific resources or perform certain actions. By implementing
proper route protection, you can safeguard sensitive data and functionalities from
unauthorized access. This typically involves authentication (verifying the user's identity) and
authorization (determining what the authenticated user is allowed to do).

Here’s a comprehensive guide to protecting routes in a Node.js application using Express,

JWT (JSON Web Tokens), and middleware.

Key Concepts for Protecting Routes

1. Authentication Middleware: Ensures that a user is authenticated before granting

access to a route. This typically involves checking for a valid JWT in the request
headers.
2. Authorization Middleware: Checks if the authenticated user has the necessary
permissions or roles to access a specific route.
3. Route Protection: Applying authentication and authorization middleware to routes to
secure them from unauthorized access.

// Authentication Middleware
const authenticate = (req, res, next) =>
{ const token = req.headers['authorization']?.split('
')[1]; if (!token) return res.status(401).json({
message: 'Access denied' });
jwt.verify(token, SECRET_KEY, (err, decoded) => { if
(err) return res.status(403).json({ message: 'Invalid
token' });

Protecting routes using authentication and authorization ensures that only the right users can
access specific parts of your application. By implementing middleware for authentication and
role-based authorization.

31
 Chapter 6

Frontend Development with EJS

Embedded JavaScript (EJS) is a popular templating engine for Node.js that allows you to
generate HTML dynamically on the server side. EJS is particularly useful for creating views
in web applications where you need to render dynamic content based on user data or other
variables. It integrates seamlessly with Express.js, making it a powerful tool for server-side
rendering of HTML.

6.1 Key Features of EJS

1. Embedded JavaScript: EJS allows you to mix JavaScript code with HTML. This
means you can use JavaScript to control what gets rendered on the page. You can
execute JavaScript directly within your HTML, which is useful for generating
dynamic content.
2. Simple Syntax: EJS syntax is designed to be easy to understand and use, especially
for those familiar with HTML and JavaScript. It integrates JavaScript code into
HTML in a way that is both readable and maintainable.
3. Data Binding: EJS facilitates the binding of server-side data to the HTML template,
allowing you to inject and display dynamic content. This means you can pass data
from your server-side application into your templates, which then renders it as
HTML.
4. Partial Views: EJS supports the use of partials—reusable components or sections of
HTML that can be included in other templates. This promotes modularity and code
reuse, making your application more organized and maintainable

6.2 Breakdown of how EJS Works

HTML Templates

HTML templates are fundamental building blocks in web development, used to define the
structure and layout of web pages. They include placeholders where dynamic content will be
injected at runtime. Here’s a more detailed breakdown:
 Chapter – 6

 Purpose: HTML templates are designed to be reusable and maintainable. They

separate the static structure of the page from the dynamic content that will be inserted.
 Placeholder Syntax: Placeholders are used to mark where dynamic content should
appear. This can be as simple as a placeholder comment or a more complex
templating system. In vanilla HTML, placeholders might be simple {content} or
<!-- content -->.

 Usage: Templates are especially useful in scenarios where the same structure is
needed across multiple pages, but with different content. For example, a template for
a blog post might include placeholders for the title, author, and content.

6.3 EJS Syntax

Embedded JavaScript (EJS) is a templating engine that allows you to embed JavaScript logic
within HTML. This provides a way to generate dynamic HTML content. EJS is widely used
with Node.js applications for rendering views.

Here’s a more detailed look at EJS syntax and usage:

 Embedding JavaScript: EJS uses specific tags to include JavaScript within HTML.
These tags allow you to execute JavaScript code, include variables, and render
dynamic content.
 Including Templates: EJS allows you to include other EJS templates within a main
template, which helps in modularizing code.

<% include header.ejs %>

<main>
<h1><%= title %></h1>
<p><%= content %></p>
</main>
<% include footer.ejs %>

6.4 Advantages of Using EJS

 Dynamic Content: EJS makes it easy to generate dynamic content based on server-
side data.
33
 Chapter – 6

 Server-Side Rendering: It allows server-side rendering of pages, which can improve

performance and SEO.
 Simple Syntax: EJS syntax is simple and integrates seamlessly with regular HTML.

6.5 Common Use Cases

 Web Applications: Dynamic web applications where the content is generated based
on user input or server-side data.
 Email Templates: Creating dynamic email content based on user information.
 Dashboards: Rendering data dashboards with dynamically generated charts and
tables.

Setting the View Engine: app.set('view engine', 'ejs') tells Express to use EJS
for rendering views.

Rendering Views: res.render('index', data) renders the index.ejs template and

passes data to it. EJS templates can access this data using special syntax.

EJS Syntax:

<%= %>: Outputs the value of an expression as HTML.

<% %>: Executes JavaScript code without outputting
anything.
<%_ %>: Similar to <% %> but removes extra
whitespace in the output.

Partials and Reusability: EJS supports partials, allowing you to create reusable components.
You can include partials in your templates using <%- include('partials/header')
%>, for example.

EJS is a versatile and straightforward templating engine for Node.js applications. It allows
you to embed JavaScript within HTML to create dynamic and interactive web pages. This
approach not only streamlines the development process by reducing redundancy but also
ensures consistency across different pages of the application.

34
 Chapter 7

Connecting Frontend and Backend

Connecting the frontend and backend of a web application involves making HTTP requests to
the server from the client side. This is essential for tasks such as fetching data, submitting
forms, and interacting with APIs. Two common methods for handling these HTTP requests in
modern web applications are axios and the native fetch API. Here's an overview of both
approaches:

7.1. Axios

Axios is a promise-based HTTP client that works in both the browser and Node.js
environments. It simplifies making HTTP requests and handling responses, and provides
several advanced features:

 Promise-Based: Axios uses Promises for handling asynchronous operations, making

it easier to manage asynchronous code with async/await syntax or .then() and
.catch() methods.
 Automatic JSON Transformation: Axios automatically parses JSON data in the
response body, so you don't need to manually call .json() as with the native fetch
API.
 Interceptors: Axios allows you to intercept requests and responses to modify or log
them before they are handled. Axios automatically parses JSON data in the response
body, so you don't need to manually call .json() as with the native fetch API.
 Error Handling: It provides a consistent way to handle errors, including request and
response errors. The error object contains useful information such as response,
request, and message, helping in diagnosing issues.
 Convenient API: Axios provides a simpler and more intuitive API compared to the
native fetch API. Axios methods (axios.get(), axios.post(), axios.put(), etc.) have
straightforward syntax, making it easier to perform HTTP operations.

7.2. Fetch API

The Fetch API is a modern, native JavaScript API for making HTTP requests. It is built into
most modern browsers and offers a more flexible and low-level approach compared to axios:
 Chapter – 7

 Promise-Based: Like Axios, Fetch uses Promises to handle asynchronous operations.

This means you can use async/await or .then() and .catch() for handling the
results of HTTP requests.
 Manual JSON Handling: Fetch provides a more granular level of control over
requests and responses. For example, you can directly manipulate the Request and
Response objects, set custom headers, or handle various response types.
 More Control: Fetch allows you to work with streams directly, providing more
control over how data is consumed. This is useful for handling large responses or
processing data incrementally.
 No Built-in Interceptors: Unlike Axios, Fetch does not have built-in support for
request and response interceptors. If you need to modify requests or responses
globally, you'll need to implement your own mechanism, such as wrapping the Fetch
calls or using middleware patterns.

fetch('/api/data') .then(response =>

response.json()) .then(data =>
console.log(data)) .catch(error =>
console.error('Error:', error));

7.3 Key Differences

 Ease of Use: Axios provides built-in features that simplify complex scenarios, such as
interceptors for request and response manipulation, automatic JSON parsing, and
convenient methods for all HTTP operations (GET, POST, PUT, DELETE, etc.).
 Flexibility While Axios simplifies many tasks, it abstracts away some lower-level
details, which can limit fine-grained control in specific use cases.
 Error Handling: Axios provides a more robust error handling mechanism. It
automatically rejects the Promise for HTTP status codes outside the 2xx range,
allowing for consistent error handling.

7.4 Use Cases

 Axios is well-suited for applications that need advanced features like request/response
interceptors, or when working with both browser and server environments.

36
 Chapter – 7

 Fetch is ideal for simpler use cases or when you prefer using native browser APIs
without additional dependencies.

In summary, both axios and fetch are effective for connecting frontend and backend
systems, each with its strengths and trade-offs. The choice between them depends on the
specific requirements of your project, such as ease of use, feature set, and the level of control
needed over HTTP requests.

Figure 7.1 Integration

37
 Chapter 8

Performance Optimization
8.1 Backend Optimization
Caching is a crucial technique used in software engineering to improve the performance and
scalability of applications. By storing frequently accessed data temporarily, caching reduces
the time and resources needed to retrieve data from the original source. This section explores
various caching strategies, their theoretical foundations, and their applications in backend
systems.
1. In-Memory Caching

In-memory caching involves storing data directly in the server's RAM. This approach
leverages the high-speed access capabilities of memory to deliver quick responses to repeated
requests for the same data. In-memory caching is often used for data that is frequently
accessed or computationally expensive to generate.

Key Concepts

 Speed: Memory access is significantly faster than disk access, leading to reduced latency and
faster data retrieval.
 Volatility: Data stored in RAM is lost when the server restarts, making in-memory caching
suitable for ephemeral or non-critical data.
 Capacity: The amount of data that can be cached is limited by the server's available memory.

Use Cases

 Session Management: Storing user session data to quickly retrieve user information during
subsequent requests.
 API Response Caching: Caching responses from frequently called APIs to reduce load on
the backend services.

2. File-Based Caching

File-based caching stores cached data in files on disk rather than in memory. This method
provides a way to persist cached data between server restarts and is suitable for caching
larger datasets that may exceed memory capacity.

Key Concepts
 Chapter – 7

 Persistence: Cached data remains available across server restarts, which is beneficial
for long-lived or infrequently updated data.
 I/O Operations: Disk access is slower compared to memory access, so file-based
caching may introduce some latency, especially for read/write operations.

Use Cases

 Static Content: Caching large static assets like images, videos, or large data sets that
do not frequently change.
 Database Query Results: Storing results of complex queries to reduce database load
and improve response times.

3. Browser-Based Caching
Overview

Browser-based caching involves using HTTP headers to instruct web browsers on how to
cache static assets such as images, stylesheets, and scripts. This technique helps reduce
network requests and load times by leveraging the browser's local cache.

Key Concepts

 Cache-Control: Defines caching directives for browser caching, including max-age, no-store,
and public.
 Expires: Specifies an expiration date for cached content, after which the browser will request
a fresh copy.
 Pragma: An older header used to control caching, primarily for compatibility with HTTP/1.0.

Use Cases

 Static Assets: Caching static resources like CSS, JavaScript, and images to improve load
times and reduce bandwidth usage.
 Web Applications: Enhancing performance by caching frequently accessed assets and
reducing the number of server requests.

39
 Chapter – 7

Summary

Caching is an essential technique for improving backend performance by reducing latency,

decreasing load times, and optimizing resource utilization. The various caching strategies
discussed—in-memory caching, file-based caching, HTTP caching headers, database-
level caching, and browser-based caching—provide different approaches to efficiently
manage data and improve overall system performance. By carefully selecting and
implementing these strategies based on the specific needs and constraints of your application,
you can achieve significant performance gains and enhance user experience.

Figure 8.1 Backend Optimization

8.2 Frontend Optimization with EJS

When optimizing frontend performance for applications using EJS (Embedded JavaScript
templates), code splitting and lazy loading are crucial techniques to ensure efficient resource
management and improved user experience. These techniques help in managing the load
times of web pages by splitting JavaScript code into smaller chunks and loading only what is
necessary initially.

40
Code Splitting

Code splitting is the practice of breaking up your JavaScript code into smaller chunks, which
can be loaded on demand rather than all at once. This approach reduces the initial load time
of your application, as users download only the code they need for the current view.

Benefits of Code Splitting:

 Reduced Initial Load Time: By loading only essential code initially, users can start interacting
with the application more quickly.
 Improved Application Performance: Smaller, more focused chunks of code are faster to
download and parse.
 Efficient Resource Usage: Reduces the amount of code sent to the client, which can be
particularly beneficial for users with slower internet connections.

Implementing Code Splitting in EJS:

Since EJS primarily serves HTML and doesn't natively handle JavaScript module bundling or
splitting, you’ll need to integrate it with a build tool like Webpack. Webpack can split your
JavaScript into separate files and manage their loading.

Example Setup with Webpack:

1. Install Webpack and Webpack CLI:

npm install webpack webpack-cli --save-dev

2. Create a Webpack Configuration File (webpack.config.js):

const path = require('path');

module.exports = {
entry: {
main: './src/index.js',
vendor: './src/vendor.js'
},

3. Update EJS Templates to Include Bundled Scripts:

 Chapter – 7

Ensure your EJS templates include the JavaScript bundles produced by Webpack.

Example EJS Template (views/index.ejs):

<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>Welcome to My App</h1>
<div id="app"></div>
<script src="/main.bundle.js"></script>
<script src="/vendor.bundle.js"></script>
</body>
</html>

Lazy Loading

Lazy loading is a technique used to defer the loading of resources until they are actually
needed. This approach ensures that only essential content is loaded initially, while additional
resources are fetched as required, improving the page load time and overall user experience.

Benefits of Lazy Loading:

 Faster Page Loads: Only essential content is loaded first, improving the initial page
load time.
 Reduced Bandwidth Usage: Non-essential resources are loaded on demand,
conserving bandwidth.

Implementing Lazy Loading in EJS:

For lazy loading JavaScript components and other resources in a project using EJS, you can
use native lazy loading features for images and implement JavaScript solutions for dynamic
content.

42
 Chapter 9

Deployment and Environment Management

Deployment and environment management are critical aspects of maintaining and scaling
applications. Proper deployment strategies ensure that your application runs smoothly and
securely in production, while effective environment management keeps configuration settings
organized and sensitive data secure. This section covers backend and frontend deployment,
along with environment management practices.

9.1 Backend Deployment

Deployment Options

Deploying a backend application involves selecting a suitable platform and configuring it to

host your server. Popular deployment platforms include Heroku, AWS (Amazon Web
Services), and DigitalOcean. Each platform offers unique features and advantages, and the
choice depends on your application’s needs, scalability requirements, and budget.

1. Heroku

Heroku is a platform-as-a-service (PaaS) that simplifies the deployment and

management of applications. It is known for its ease of use and straightforward
deployment process.

Deployment Steps:

 Install the Heroku CLI.

 Create a Heroku application with heroku create.
 Deploy your code using git push heroku main.

 Configure environment variables using heroku config:set

Setting Up Environment Variables

Environment variables are crucial for managing configuration settings and securing sensitive
information like API keys and database credentials. They help you keep sensitive data out of
your source code and adjust configurations for different environments (development, testing,
production).

1. Using Environment Variables

 Create .env file in the root of your project.

 Add key-value pairs for your environment variables.
 Use a library like dotenv to load these variables into your application.

2. Example .env File:

DATABASE_URL=mongodb://localhost:27017/myapp
API_KEY=your-api-key

3. Loading Environment Variables:

require('dotenv').config();
const mongoose = require('mongoose');
mongoose.connect(process.env.DATABASE_URL);

4. Production Deployment:

 Set environment variables directly in your hosting platform’s

configuration settings.
 For Heroku: Use heroku config:set to set variables.
 For AWS: Use the Elastic Beanstalk environment properties.

5. Heroku Environment Variable Example:

Herok config:set
DATABASE_URL=mongodb://localhost:27017/myapp
heroku config:set API_KEY=your-api-key

9.2 Frontend Deployment

 Chapter – 9

Building and Deploying React Apps

Deploying a React application involves building the application into static files and then
deploying those files to a hosting service. Popular services for React apps include Netlify and
Vercel.

1. Building React Apps

Use the React build script to create a production-ready version of your app. This
script generates optimized static files for deployment.

Build Command:

npm run build

This command creates a build directory containing optimized static files.

2. Deploying to Netlify

Netlify is a popular platform for deploying static sites and frontend applications. It
integrates seamlessly with Git repositories.

Deployment Steps:

 Sign up or log in to Netlify.

 Connect your Git repository.
 Configure build settings (usually, npm run build for React apps).
 Deploy the build folder to Netlify

45
 Chapter 10

Security Best Practices

In today's digital landscape, ensuring the security of your applications is paramount. Security
best practices protect against a wide range of threats, including unauthorized access, data
breaches, and various types of attacks. This section covers essential security practices for both
backend and frontend development.

10.1 Backend Security

Securing Express Apps

Express.js is a popular framework for building Node.js applications, but it comes with its own set
of security considerations. Implementing security best practices is crucial to safeguard your
Express applications.

Use HTTPS

Always use HTTPS to encrypt data transmitted between the client and server. This prevents
eavesdropping and man-in-the-middle attacks.

 Enforce HTTPS: Set up a redirect from HTTP to HTTPS.

 Obtain an SSL Certificate: Use a certificate authority like Let’s Encrypt for free
certificates.

Example Middleware to Redirect HTTP to HTTPS:

const enforceHttps = (req, res, next) => {

if (req.secure) {
next();
} else {
res.redirect('https://' + req.headers.host + req.url);
}

46
 };

10.2 Frontend Security

Handling Sensitive Data

Handling sensitive data on the frontend requires caution to avoid exposing sensitive information
and ensuring secure data transmission.

1. Avoid Exposing Sensitive Data

Never store sensitive data such as API keys or personal information in client-side code.
Sensitive data should always be kept on the server side.

const apiKey = 'your-api-key';

fetch(`https://api.example.com/data?api_key=${apiKey}`);

Good Practice: Instead of including sensitive data in client-side code, use backend
endpoints to interact with external services.

app.get('/api/data', (req, res) => {

fetch(`https://api.example.com/data?api_key=$
{process.env.API_KEY}`)
.then(response => response.json())
.then(data => res.json(data));
});

2. Use HTTPS for Secure Data Transmission

HTTPS ensures that data transmitted between the client and server is encrypted. Always
use HTTPS to protect data from being intercepted or tampered with.

 Ensure your site only serves content over HTTPS by setting up HTTPS redirects
and using secure connections.

47
 Conclusion

This report has provided a comprehensive overview of modern web development through the use
of Node.js, Express.js, MongoDB, EJS, and React, demonstrating how these technologies can
be seamlessly integrated to build efficient, scalable, and interactive web applications.

The backend development, powered by Node.js and Express.js, played a vital role in managing
server-side logic, handling requests, and interacting with the database. Node.js's non-blocking,
event-driven architecture allowed the system to handle multiple concurrent connections
efficiently, which is particularly important in real-time applications.

On the frontend, React offered an advanced and interactive user interface with its component-
based architecture. React’s ability to manage complex states and create reusable UI components
ensured that the application maintained high performance and an exceptional user experience,
even as the complexity of the UI increased.

A significant achievement of this project was the integration of the front-end and back-end
systems. Axios and fetch API were used to establish communication between the React-based
frontend and the Node.js/Express.js back-end. This allowed for efficient data transfer and
interaction, where the back-end handled requests and served data from MongoDB, and the React
front-end dynamically rendered the content in real time.

The project also demonstrated the importance of best practices in security, error handling, and
performance optimization. By implementing JWT-based authentication, the system was
secured against unauthorized access, ensuring data protection.

In conclusion, the successful integration of the front-end and back-end was a key highlight of
the project, showcasing the potential of these technologies when combined.

48
 REFERENCES

[1] R. Buyya, C. Shin Yeo, J. Broberg, and I. Brandic, “Cloud computing and emerging it
platforms: Vision, hype, and reality for delivering computing as the 5th utility,” Future
Generation Computing System, vol. 25, pp. 599–616,2009.

[2] Mardan A. Express. js Guide: The Comprehensive Book on Express. js. Azat Mardan;
2014 May 28.

[3] Ihrig, C.J. and Bretz, A., 2014. Full Stack JavaScript Development With MEAN:
MongoDB, Express, AngularJS, and Node. JS. SitePoint Pty Ltd.

[4] Brown, Ethan. Web development with node and express: leveraging the JavaScript
stack. O'Reilly Media, 2019.

[5] Brink, Tove, Henrik B. Sørensen, and Mette Neville. "Small-and Medium-Sized
Enterprises Strategizing Digital Transformation: Backend & Frontend Integration for
Horizontal Value Creation." In Digitalization and Management Innovation, pp. 58-77. IOS
Press, 2023.

[6] Raja JZ, Chakkol M, Johnson M, Beltagui A. Organizing for servitization: examining
front-and back-end design configurations. International Journal of Operations &
Production Management. 2018 Jan 2;38(1):249-71.

[7] Node.js Documentation. Node.js Foundation, https://nodejs.org/en/docs/.