Notes on [Link] in Node.

js
Introduction to [Link]
• [Link] requires writing a lot of code for basic tasks like extracting the
body of an incoming request or handling routing.
• [Link] is a third-party framework that simplifies these tasks,
allowing developers to focus on business logic (the core functionality of
the application).
• It provides a rule set and utility functions to write cleaner and more
efficient code.

Key Concepts in [Link]

1. Middleware:
o A core concept in [Link].
o Middleware functions are used to handle tasks like parsing request
bodies, logging, or authentication.
o They sit between the incoming request and the final response,
allowing for modular and reusable code.

2. Handling Requests and Responses:

o [Link] simplifies the process of handling HTTP requests (e.g.,
GET, POST) and sending responses.
o Example:
const express = require('express');
const app = express();

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

[Link]('Hello, World!');
});
 [Link](3000, () => {
[Link]('Server is running on port
3000');
});

3. Routing:
o [Link] allows developers to define routes for
different URLs or paths without writing multiple if statements.
o Example:
[Link]('/about', (req, res) => {
[Link]('About Page');
});

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

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

4. Returning HTML Pages:

o Instead of embedding HTML directly in [Link] code, [Link]
allows serving pre-prepared HTML files.
o Example:
[Link]('/home', (req, res) => {
[Link](__dirname + '/[Link]');
});

Benefits of Using [Link]

• Reduces boilerplate code: Handles repetitive tasks like request parsing
and routing.
 • Improves code organization: Encourages modular and reusable code
through middleware and routing.
• Enhances productivity: Allows developers to focus on application-
specific logic rather than low-level details.

Key Vocabulary
• [Link]: A runtime environment for executing JavaScript on the server.
• [Link]: A web application framework for [Link].
• Middleware: Functions that process requests before they reach the final
route handler.
• Routing: Defining how an application responds to client requests for
specific endpoints (URLs).
• Business Logic: The core functionality of an application, such as
processing data or handling user interactions.

Example Code: Basic [Link] Setup

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

// Middleware to parse JSON bodies

[Link]([Link]());

// Route for the home page

[Link]('/', (req, res) => {
[Link]('Welcome to the Home Page!');
});

// Route for the about page

[Link]('/about', (req, res) => {
 [Link]('About Us');
});

// Starting the server

[Link](3000, () => {
[Link]('Server is running on port 3000');
});

Summary
• [Link] is a powerful framework built on top of [Link] that
simplifies web development by handling common tasks like routing,
request/response handling, and serving static files.
• It uses middleware to modularize code and provides tools to focus
on business logic.
• By using [Link], developers can write cleaner, more maintainable,
and efficient code.
Notes on [Link]
What is [Link]?
• [Link] is a framework for [Link] that simplifies server-side logic.
• It helps developers avoid writing complex code for tasks like parsing
incoming requests (e.g., extracting the body of a request).
• Without [Link], developers would need to manually handle events
like data and end, create buffers, and convert data to strings.

Why Use [Link]?

1. Simplifies Complex Tasks:
o Handles repetitive tasks like request parsing and routing.
o Allows developers to focus on business logic (the unique
functionality of the application).
o Example: Instead of manually parsing request bodies, [Link]
makes it easy to integrate third-party packages for this purpose.
2. Framework Benefits:
o Provides a set of helper functions, tools, and rules for structuring
applications.
o Offers a clearly defined way to write clean and maintainable code.
3. Flexibility and Extensibility:
o [Link] is highly flexible and doesn’t impose too many
functionalities out of the box.
o It is extensible, with thousands of third-party packages available
to enhance functionality without extensive configuration.

Alternatives to [Link]
• Vanilla [Link]: Can be used for simpler applications or for developers
seeking more control.
• Other Frameworks:
o [Link]: Inspired by Laravel (PHP framework).
 o Koa: A lightweight alternative to [Link].
o [Link]: A framework for building data-driven APIs.
• [Link] is the most popular and widely used framework for [Link].

Key Vocabulary
• [Link]: A web application framework for [Link].
• Framework: A set of tools, helper functions, and rules for building
applications.
• Business Logic: The core functionality that defines an application’s
unique features.
• Request Parsing: Extracting and processing data from incoming HTTP
requests.
• Third-Party Packages: External libraries or tools that can be integrated
into a project.

Example Code: Installing and Using [Link]

1. Installation:
Bash:
npm install express

2. Basic Setup:
Javascript:
const express = require('express');
const app = express();

// Route for the home page

[Link]('/', (req, res) => {
[Link]('Hello, World!');
 });

// Starting the server

[Link](3000, () => {
[Link]('Server is running on port
3000');
});

Summary
• [Link] simplifies server-side development by handling repetitive
tasks and providing a structured way to build applications.
• It allows developers to focus on business logic while outsourcing low-
level details like request parsing and routing.
• [Link] is flexible, extensible, and supported by a large ecosystem of
third-party packages.
• While alternatives exist, [Link] remains the most popular framework
for [Link].
Installing and Setting Up [Link]

Installation of [Link]
1. Command: Install as a production dependency (essential for
deployment):
Bash:
npm install --save express
o Why --save? [Link] is a core part of the application, not just a
development tool.
o Updates dependencies in [Link].

Setting Up [Link]
1. Importing:
Javascript:
const express = require('express');
const app = express(); // Initialize the Express app
o express exports a function that initializes the framework.
o The app constant manages [Link] logic (e.g., routing,
middleware).

2. Code Organization:
o Separate imports for clarity (optional but recommended):
javascript
// Core [Link] modules
const http = require('http');

// Third-party packages
const express = require('express');
 // Custom modules (if any)
// const myModule = require('./myModule');

Key Concepts
1. Request Handler:
o The app object is a valid request handler and can be passed
to [Link]():
Javascript:
const server = [Link](app);
[Link](3000);

o Alternatively, use [Link]’s built-in listen() method:

Javascript:
[Link](3000, () => {
[Link]('Server running!');
});

2. Initial Behavior:
o Without defined routes, the app responds with no content but sets
up [Link]’s request-handling pipeline.

Example Code
Javascript:
const express = require('express');
const app = express();

// Basic server setup (no routes defined yet)

 [Link](3000, () => {
[Link]('Server started on port 3000');
});

Summary
• [Link] is installed as a production dependency with npm install --
save express.
• Initialize the app with const app = express();, which creates a request
handler for managing server logic.
• The app object simplifies server creation (via [Link]()) and defines
[Link]’s structure for handling requests.
• No routes or logic are added initially, but [Link] sets up its
foundational request-handling workflow.

Key Vocabulary
• Production Dependency: A package required for the application to run
in production.
• Request Handler: Code that processes incoming HTTP requests
(e.g., app in [Link]).
• [Link] Pipeline: The structured flow of middleware and routes for
handling requests.
[Link] Middleware

Core Concept: Middleware

• Middleware in [Link] refers to functions that process incoming
requests in a sequence (a "pipeline").
• Requests are funneled through middleware functions until a response is
sent.
• Middleware allows splitting code into modular, reusable blocks instead
of a single monolithic handler.

Key Mechanics of Middleware

1. Adding Middleware:
o Use [Link]() to register middleware functions.
o Example:
javascript
[Link]((req, res, next) => {
[Link]('In the middleware!');
next(); // Pass control to the next
middleware
});

2. Arguments in Middleware:
o req: The request object (contains data about the incoming
request).
o res: The response object (used to send back data).
o next: A function that passes the request to the next middleware in
line.
 3. Critical Rules:
o Call next() to allow the request to proceed to the next middleware.
o Send a response (e.g., [Link]()) if you don’t
call next() (otherwise, the request hangs).

Example: Middleware Execution Flow

Javascript:
// Middleware 1
[Link]((req, res, next) => {
[Link]('Middleware 1');
next(); // Pass to Middleware 2
});

// Middleware 2
[Link]((req, res, next) => {
[Link]('Middleware 2');
[Link]('Response sent!'); // End the request here
});

• Result:
o Request passes through Middleware 1, then Middleware 2.
o [Link]() in Middleware 2 stops further processing.

Key Vocabulary
• Middleware: Functions that process requests in [Link].
• [Link](): Method to register middleware.
• next(): Function to pass control to the next middleware.
 • Request Pipeline: The sequential flow of middleware functions.

Common Pitfalls
• Not calling next():
o The request stalls indefinitely unless a response is sent.
o Example of a blocking middleware:
Javascript:
[Link]((req, res, next) => {
[Link]('This blocks the request!');
// No call to next() or [Link]() →
request hangs
});

Summary
• Middleware is central to [Link], enabling modular and organized
request handling.
• Use [Link]() to add middleware, next() to forward requests,
and [Link]() to terminate processing.
• Middleware executes top-to-bottom; order matters.
• Always ensure a response is sent or next() is called to avoid hanging
requests.
Sending Responses in [Link] Middleware

Key Concepts
1. Middleware Execution Flow:
o Requests travel through middleware functions top-to-bottom.
o Use next() to pass control to the next middleware.
o If no next() is called and no response is sent, the request stalls
indefinitely.

2. Sending Responses:
o Use [Link]() to send a response and terminate the request.
o [Link]() automatically sets the Content-Type header based on
the response body (e.g., text/html for HTML).
o Example:
javascript
[Link]((req, res) => {
[Link]('<h1>Hello from Express</h1>');
});

Key Features of [Link]()

1. Automatic Header Handling:
o Sets Content-Type based on the response body (e.g., text/html for
HTML, application/json for JSON).
o Example:
javascript
[Link]('<h1>Hello</h1>'); // Content-Type:
text/html
[Link]({ message: 'Hello' }); // Content-
Type: application/json
 2. Flexibility:
o Can send any type of data (e.g., HTML, JSON, plain text).
o Example:
Javascript:
[Link]('Plain text response');
[Link]({ key: 'value' });
[Link]('<h1>HTML response</h1>');

3. Manual Header Override:

o Use [Link]() to manually set headers if needed.
o Example:
Javascript:
[Link]('Content-Type', 'text/plain');
[Link]('Plain text response');

Middleware Behavior
1. Terminating Middleware:
o If a middleware sends a response (e.g., [Link]()), subsequent
middleware will not execute.
o Example:
Javascript:
[Link]((req, res) => {
[Link]('Response sent!'); // Terminates the
request
});

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

[Link]('This will not run');
 });

2. Non-Terminating Middleware:
o Use next() to pass control to the next middleware.
o Example:
Javascript:
[Link]((req, res, next) => {
[Link]('Middleware 1');
next(); // Pass to Middleware 2
});

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

[Link]('Response from Middleware 2');
});

Example Code
Javascript:
const express = require('express');
const app = express();

// Middleware 1
[Link]((req, res, next) => {
[Link]('Middleware 1');
next(); // Pass to Middleware 2
});

// Middleware 2
 [Link]((req, res) => {
[Link]('<h1>Hello from Express</h1>'); //
Terminates the request
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Vocabulary
• Middleware: Functions that process requests in [Link].
• [Link](): Method to send a response and terminate the request.
• next(): Function to pass control to the next middleware.
• Content-Type: HTTP header indicating the type of response data.

Summary
• Middleware functions process requests in a top-to-bottom sequence.
• Use [Link]() to send responses and terminate requests; it automatically
sets Content-Type.
• Call next() to pass control to the next middleware; otherwise, the request
stalls.
• [Link]() simplifies response handling compared to manual methods
like [Link]() and [Link]().
[Link] Internals and Code Optimization

Exploring [Link] Internals

1. Open Source Code:
o [Link] is open source; its code is available on GitHub.
o Key files:
▪ lib/[Link]: Contains the implementation of [Link]().
▪ lib/[Link]: Contains the implementation
of [Link]().

2. How [Link]() Works:

o Checks the type of data being sent (e.g., string, number, boolean,
JSON).
o Automatically sets Content-Type if not already defined:
▪ String: Sets Content-Type: text/html.
▪ Number/Boolean: Sets Content-Type: application/octet-
stream (binary data).
▪ JSON: Sets Content-Type: application/json.
o Example:
Javascript:
[Link]('<h1>Hello</h1>'); // Content-Type:
text/html
[Link]({ message: 'Hello' }); // Content-
Type: application/json

3. Why Dive into the Code?

o Helps understand default behaviors (e.g., automatic header
setting).
o Useful for debugging or customizing functionality.
Optimizing Server Setup
1. Simplified Server Initialization:
o Instead of manually creating an HTTP server:
Javascript:
const http = require('http');
const server = [Link](app);
[Link](3000);

o Use [Link]():
Javascript:
[Link](3000, () => {
[Link]('Server running on port
3000');
});

o Internally, [Link]() calls [Link]() and passes

the app object.

2. Benefits:
o Reduces boilerplate code.
o Improves readability and maintainability.

Example Code
Javascript:
const express = require('express');
const app = express();
 // Middleware example
[Link]((req, res, next) => {
[Link]('Middleware executed');
next();
});

// Route handler
[Link]((req, res) => {
[Link]('<h1>Hello from Express</h1>');
});

// Start server
[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Vocabulary
• [Link](): [Link] method to send responses with automatic Content-
Type handling.
• [Link](): Simplified method to start an [Link] server.
• Middleware: Functions that process requests in a sequence.
• Content-Type: HTTP header indicating the type of response data.

Summary
• [Link] Internals:
o [Link]() automatically sets Content-Type based on the response
data.
 o [Link]() simplifies server setup by internally
calling [Link]().

• Code Optimization:
o Use [Link]() to reduce boilerplate and improve readability.

• Middleware:
o Requests flow through middleware functions top-to-bottom.
o Use next() to pass control or [Link]() to terminate the request.

Next Steps:
• Learn how to handle different routes (e.g., /message, /home).
• Simplify reading incoming request data.
Routing and Middleware in [Link]

Handling Different Routes

1. Filtering Requests by Path:
o Use [Link](path, callback) to filter requests based on the URL
path.
o The path argument specifies the starting part of the URL
(e.g., /add-product).
o Example:
javascript
[Link]('/add-product', (req, res) => {
[Link]('<h1>Add Product Page</h1>');
});

2. Middleware Execution Order:

o Middleware executes top-to-bottom in the file.
o If a middleware sends a response (e.g., [Link]()), subsequent
middleware will not execute.
o Use next() to pass control to the next middleware.

3. Default Path (/):

o Middleware without a path filter (or with /) runs for all requests.
o Example:
Javascript:
[Link]((req, res, next) => {
[Link]('This always runs!');
next(); // Pass to the next middleware
});
Example Code: Routing with Middleware
Javascript:
const express = require('express');
const app = express();

// Middleware for all requests

[Link]((req, res, next) => {
[Link]('This always runs!');
next();
});

// Route for /add-product

[Link]('/add-product', (req, res) => {
[Link]('<h1>Add Product Page</h1>');
});

// Default route (/)

[Link]((req, res) => {
[Link]('<h1>Hello from Express</h1>');
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});
Key Concepts
1. Path Filtering:
o The path in [Link](path, callback) matches the starting part of
the URL.
o Example: /add-product matches /add-product, /add-product/123,
etc.

2. Middleware Order Matters:

o Place general middleware (e.g., logging) at the top to run for all
requests.
o Place specific routes (e.g., /add-product) below general
middleware.

3. Sending Responses:
o Use [Link]() to send a response and terminate the request.
o Avoid calling next() after sending a response to prevent errors.

Common Pitfalls
1. Overlapping Paths:
o Ensure specific routes are placed before general routes to avoid
unintended matches.
o Example:
Javascript:
[Link]('/add-product', (req, res) => {
[Link]('<h1>Add Product Page</h1>');
});

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

[Link]('<h1>Hello from Express</h1>');
 });

2. Multiple Responses:
o Sending more than one response per request results in an error.
o Example of incorrect usage:
Javascript:
[Link]((req, res) => {
[Link]('First response');
[Link]('Second response'); // Error!
});

Key Vocabulary
• Middleware: Functions that process requests in [Link].
• [Link](path, callback): Method to filter requests by URL path.
• next(): Function to pass control to the next middleware.
• Path Filtering: Matching requests based on the starting part of the URL.

Summary
• Use [Link](path, callback) to handle specific routes (e.g., /add-
product).
• Middleware executes top-to-bottom; order matters for routing and
functionality.
• Send one response per request using [Link]() and avoid
calling next() afterward.
• Place general middleware at the top and specific routes below to ensure
proper request handling.
Next Steps:
• Learn how to handle dynamic routes (e.g., /products/:id).
• Simplify reading incoming request data (e.g., query parameters, request
body).
Handling Incoming Requests in [Link]

Handling POST Requests and Parsing Request Bodies

1. Returning HTML Forms:
o Use [Link]() to return an HTML form in the response.
o Example:
javascript
[Link]('/add-product', (req, res) => {
[Link](`
<form action="/product" method="POST">
<input type="text" name="title"
placeholder="Product Title">
<button type="submit">Add
Product</button>
</form>
`);
});

2. Handling Form Submissions:

o Use [Link](path, callback) to handle POST requests to a specific
path (e.g., /product).
o Example:
Javascript:
[Link]('/product', (req, res) => {
[Link]([Link]); // Log the parsed
request body
[Link]('/'); // Redirect to the home
page
});
 3. Parsing Request Bodies:
o Use body-parser to parse incoming request bodies.
o Install body-parser:
Bash:
npm install --save body-parser

o Configure body-parser:
Javascript:
const bodyParser = require('body-parser');
[Link]([Link]({ extended:
false }));
o [Link] will contain the parsed form data as a JavaScript object
(e.g., { title: 'Book' }).

Example Code: Handling POST Requests

Javascript:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// Middleware to parse request bodies

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

// Route to display the form

[Link]('/add-product', (req, res) => {
[Link](`
<form action="/product" method="POST">
 <input type="text" name="title"
placeholder="Product Title">
<button type="submit">Add Product</button>
</form>
`);
});

// Route to handle form submissions

[Link]('/product', (req, res) => {
[Link]([Link]); // Log the parsed request
body
[Link]('/'); // Redirect to the home page
});

// Default route
[Link]('/', (req, res) => {
[Link]('<h1>Hello from Express</h1>');
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Concepts
1. Form Handling:
o Use <form> tags to create HTML forms.
o Set action to the URL where the form data should be sent.
o Set method to POST for form submissions.
 2. Request Body Parsing:
o body-parser middleware parses form data and
populates [Link].
o [Link] contains key-value pairs based on the form inputs (e.g., {
title: 'Book' }).
o

3. Redirecting Responses:
o Use [Link](path) to redirect users to another route.

Common Pitfalls
1. Missing Body Parser:
o Without body-parser, [Link] will be undefined.
o Ensure body-parser is configured before route handlers.

2. Incorrect Form Attributes:

o Ensure the action and method attributes in the form match the
route and HTTP method in Express.

3. Order of Middleware:
o Place body-parser middleware before route handlers to ensure
request bodies are parsed.

Key Vocabulary
• body-parser: Middleware to parse incoming request bodies.
• [Link]: Object containing parsed form data.
• [Link](path): Method to redirect users to another route.
• Form Handling: Managing user input via HTML forms and processing
submissions.
Summary
• Use [Link]() to return HTML forms and handle user input.
• Install and configure body-parser to parse form data into [Link].
• Use [Link]() to redirect users after processing form submissions.
• Ensure middleware order is correct (e.g., body-parser before route
handlers).

Next Steps:
• Learn how to handle JSON data and file uploads in [Link].
• Explore route-specific middleware for more advanced routing.
Filtering Requests by HTTP Method in [Link]

Filtering Requests by HTTP Method

1. Problem:
o [Link]() executes for all HTTP methods (e.g., GET, POST).
o Example: A middleware for /product would run for both GET and
POST requests.

2. Solution:
o Use [Link]() and [Link]() to filter requests by HTTP method.
o [Link](path, callback): Executes only for GET requests.
o [Link](path, callback): Executes only for POST requests.

3. Example:
Javascript:
// Handle GET requests to /product
[Link]('/product', (req, res) => {
[Link]('This is a GET request to /product');
});

// Handle POST requests to /product

[Link]('/product', (req, res) => {
[Link]([Link]); // Log parsed request
body
[Link]('/');
});
Key Concepts
1. HTTP Methods:
o GET: Used to retrieve data.
o POST: Used to submit data.
o Other methods: DELETE, PATCH, PUT (used for APIs, not
HTML forms).

2. Method-Specific Middleware:
o [Link](): Filters for GET requests.
o [Link](): Filters for POST requests.
o [Link](): Executes for all HTTP methods.

3. Request Body Parsing:

o Use body-parser to parse incoming request bodies for POST
requests.
o Example:
Javascript:
const bodyParser = require('body-parser');
[Link]([Link]({ extended:
false }));

Example Code: Handling GET and POST Requests

Javascript:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// Middleware to parse request bodies

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

// Route to display the form (GET request)

[Link]('/add-product', (req, res) => {
[Link](`
<form action="/product" method="POST">
<input type="text" name="title"
placeholder="Product Title">
<button type="submit">Add Product</button>
</form>
`);
});

// Route to handle form submissions (POST request)

[Link]('/product', (req, res) => {
[Link]([Link]); // Log the parsed request
body
[Link]('/');
});

// Default route (GET request)

[Link]('/', (req, res) => {
[Link]('<h1>Hello from Express</h1>');
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});
Key Vocabulary
• [Link](): Middleware for handling GET requests.
• [Link](): Middleware for handling POST requests.
• HTTP Methods: Actions like GET, POST, DELETE, PATCH, PUT.
• body-parser: Middleware to parse incoming request bodies.

Summary
• Use [Link]() and [Link]() to filter requests by HTTP method.
• [Link]() executes for all HTTP methods,
while [Link]() and [Link]() are method-specific.
• Combine body-parser with [Link]() to handle form submissions and
parse request bodies.
• Ensure proper routing by placing method-specific middleware before
general middleware.

Next Steps:
• Explore handling DELETE, PATCH, and PUT requests for APIs.
• Learn how to serve static files (e.g., CSS, images) in [Link].
Organizing Routes with Express Router

Why Organize Routes?

• As applications grow, keeping all routes in a single file (e.g., [Link])
becomes unmanageable.
• Splitting routes into multiple files
improves readability, maintainability, and scalability.
• Common practice: Store route-related code in a routes folder.

Using Express Router

1. What is Express Router?
o A mini Express app that can be plugged into the main app.
o Allows defining routes in separate files and exporting them.

2. Steps to Use Express Router:

o Create a router:
Javascript:
const express = require('express');
const router = [Link]();
o Define routes: Use [Link](), [Link](), etc., instead
of [Link](), [Link]().
o Export the router:
Javascript:
[Link] = router;

o Import and use the router in the main app:

javascript
const adminRoutes = require('./routes/admin');
[Link](adminRoutes);

Example Code: Organizing Routes

1. routes/[Link]:
javascript:
const express = require('express');
const router = [Link]();

// GET request to /add-product

[Link]('/add-product', (req, res) => {
[Link](`
<form action="/product" method="POST">
<input type="text" name="title"
placeholder="Product Title">
<button type="submit">Add Product</button>
</form>
`);
});

// POST request to /product

[Link]('/product', (req, res) => {
[Link]([Link]); // Log parsed request
body
[Link]('/');
});

[Link] = router;
2. routes/[Link]:
javascript:
const express = require('express');
const router = [Link]();

// GET request to /
[Link]('/', (req, res) => {
[Link]('<h1>Hello from Express</h1>');
});

[Link] = router;

3. [Link]:
javascript:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// Middleware to parse request bodies

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

// Import routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

// Use routes
 [Link](adminRoutes);
[Link](shopRoutes);

[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Concepts
1. Express Router:
o A pluggable mini app for defining routes in separate files.
o Use [Link](), [Link](), etc., to define method-specific
routes.

2. Route Organization:
o Store related routes in separate files (e.g., [Link], [Link]).
o Export routers and import them into the main app.

3. Order of Middleware:
o The order in which routes are registered ([Link]()) matters.
o Exact matching is enforced by [Link](), [Link](), etc.

Key Vocabulary
• Express Router: A feature to define and organize routes in separate files.
• [Link](): Method to handle GET requests in a router.
• [Link](): Method to handle POST requests in a router.
• Middleware Order: The sequence in which middleware and routes are
registered.
Summary
• Use Express Router to split routes into separate files for better
organization.
• Define routes using [Link](), [Link](), etc., and export the router.
• Import and use routers in the main app with [Link]().
• Pay attention to the order of middleware and route registration to ensure
proper request handling.

Next Steps:
• Explore route prefixes (e.g., /admin/add-product) for better route
organization.
• Learn how to handle 404 errors and other edge cases in [Link].
Handling 404 Errors in [Link]

Handling Unhandled Routes

1. Problem:
o Requests to unhandled routes (e.g., /random-path) result in an
error or no response.
o Need to return a 404 error page for such routes.

2. Solution:
o Add a catch-all middleware at the bottom of the middleware
stack to handle unhandled routes.
o Use [Link]() without a path filter to match all requests.

Key Concepts
1. Middleware Execution Order:
o Requests are funneled through middleware top-to-bottom.
o If no middleware handles the request, it reaches the catch-all
middleware.

2. 404 Error Handling:

o Use [Link](404) to set the HTTP status code to 404.
o Use [Link]() to return a custom error page.

Example Code: Adding a 404 Error Page

Javascript:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// Middleware to parse request bodies

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

// Import routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

// Use routes
[Link](adminRoutes);
[Link](shopRoutes);

// Catch-all middleware for 404 errors

[Link]((req, res) => {
[Link](404).send(`
<h1>Page Not Found</h1>
<p>The page you are looking for does not
exist.</p>
`);
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});
Key Vocabulary
• Catch-all Middleware: Middleware that handles all unhandled requests.
• [Link](code): Method to set the HTTP status code (e.g., 404 for "Not
Found").
• [Link](): Method to send a response to the client.
• Middleware Execution Order: The sequence in which middleware
processes requests.

Summary
• Add a catch-all middleware at the bottom of the middleware stack to
handle unhandled routes.
• Use [Link](404) to set the status code to 404 and [Link]() to return
a custom error page.
• Ensure the catch-all middleware is placed after all other routes to avoid
overriding valid routes.

Next Steps:
• Explore serving static files (e.g., CSS, images) for a more polished 404
page.
• Learn how to handle 500 errors (server errors) in [Link].
Route Prefixing with Express Router

Route Prefixing
1. Problem:
o Routes in a file often share a common starting
path (e.g., /admin/add-product, /admin/edit-product).
o Repeating the prefix (e.g., /admin) in every route is redundant.

2. Solution:
o Use route prefixing to define a common starting path in the main
app file (e.g., [Link]).
o Example:
Javascript:
[Link]('/admin', adminRoutes);
o This ensures all routes in adminRoutes are prefixed with /admin.

Key Concepts
1. Route Prefixing:
o Adds a common starting path to all routes in a router file.
o The prefix is stripped when matching routes in the router file.

2. How It Works:
o A request to /admin/add-product is matched to /add-product in
the adminRoutes file.
o The /admin prefix is ignored during route matching in the router
file.
 3. Benefits:
o Reduces redundancy by avoiding repetition of the common path
in every route.
o Improves code organization and readability.

Example Code: Route Prefixing

1. routes/[Link]:
javascript:
const express = require('express');
const router = [Link]();

// GET request to /add-product (full path:

/admin/add-product)
[Link]('/add-product', (req, res) => {
[Link](`
<form action="/admin/add-product"
method="POST">
<input type="text" name="title"
placeholder="Product Title">
<button type="submit">Add Product</button>
</form>
`);
});

// POST request to /add-product (full path:

/admin/add-product)
[Link]('/add-product', (req, res) => {
[Link]([Link]); // Log parsed request
body
 [Link]('/');
});

[Link] = router;

2. [Link]:
javascript:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// Middleware to parse request bodies

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

// Import routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

// Use routes with prefixes

[Link]('/admin', adminRoutes); // Prefix: /admin
[Link](shopRoutes); // No prefix

// Catch-all middleware for 404 errors

[Link]((req, res) => {
[Link](404).send(`
<h1>Page Not Found</h1>
 <p>The page you are looking for does not
exist.</p>
`);
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Vocabulary
• Route Prefixing: Adding a common starting path to all routes in a router
file.
• [Link](path, router): Method to apply a prefix to all routes in a router.
• Stripped Prefix: The prefix is ignored during route matching in the
router file.

Summary
• Use route prefixing to avoid repeating a common starting path in every
route.
• Define the prefix in the main app file (e.g., [Link]('/admin',
adminRoutes)).
• The prefix is stripped when matching routes in the router file
(e.g., /admin/add-product becomes /add-product).
• Improves code organization and reduces redundancy.

Next Steps:
• Explore nested routers for more complex route structures.
• Learn how to handle dynamic routes (e.g., /products/:id) in [Link].
Serving HTML Files in [Link]

Serving HTML Files

1. Problem:
o Returning dummy HTML content in responses is not scalable or
maintainable.
o Need to serve real HTML files for a professional application.

2. Solution:
o Store HTML files in a views folder (or any folder of your choice).
o Use [Link]() to serve these files in response to requests.

Key Concepts
1. Folder Structure:
o Create a views folder to store HTML files (e.g., [Link], add-
[Link]).
o This aligns with the MVC (Model-View-Controller) pattern,
where views represent the user interface.

2. HTML Files:
o [Link]: Contains a form for adding products.
o [Link]: Displays a list of products (to be populated
dynamically later).

3. Serving Files:
o Use [Link]() to send HTML files as responses.
o Example:
Javascript:
 [Link]([Link](__dirname, 'views',
'[Link]'));

Example Code: Serving HTML Files

1. Folder Structure:
project/
├── views/
│ ├── [Link]
│ └── [Link]
├── routes/
│ ├── [Link]
│ └── [Link]
└── [Link]

2. views/[Link]:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Add Product</title>
</head>
<body>
<header>
<nav>
<ul>
 <li><a href="/">Shop</a></li>
<li><a href="/add-product">Add
Product</a></li>
</ul>
</nav>
</header>
<main>
<form action="/add-product" method="POST">
<input type="text" name="title"
placeholder="Product Title">
<button type="submit">Add Product</button>
</form>
</main>
</body>
</html>
Run HTML

3. views/[Link]:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Shop</title>
</head>
<body>
 <header>
<nav>
<ul>
<li><a href="/">Shop</a></li>
<li><a href="/add-product">Add
Product</a></li>
</ul>
</nav>
</header>
<main>
<h1>My Products</h1>
<!-- Product list will be added dynamically
later -->
</main>
</body>
</html>
Run HTML

4. routes/[Link]:
javascript:
const express = require('express');
const path = require('path');
const router = [Link]();

// GET request to /add-product

[Link]('/add-product', (req, res) => {
[Link]([Link](__dirname,
'../views/[Link]'));
 });

// POST request to /add-product

[Link]('/add-product', (req, res) => {
[Link]([Link]); // Log parsed request
body
[Link]('/');
});

[Link] = router;
5. routes/[Link]:
javascript
const express = require('express');
const path = require('path');
const router = [Link]();

// GET request to /
[Link]('/', (req, res) => {
[Link]([Link](__dirname,
'../views/[Link]'));
});

[Link] = router;

6. [Link]:
javascript:
const express = require('express');
const bodyParser = require('body-parser');
 const app = express();

// Middleware to parse request bodies

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

// Import routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

// Use routes
[Link]('/admin', adminRoutes);
[Link](shopRoutes);

// Catch-all middleware for 404 errors

[Link]((req, res) => {
[Link](404).sendFile([Link](__dirname,
'views', '[Link]'));
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Vocabulary
• views Folder: Stores HTML files representing the user interface.
• [Link](): Method to send an HTML file as a response.
 • MVC Pattern: A design pattern separating an application
into Model, View, and Controller.

Summary
• Store HTML files in a views folder for better organization.
• Use [Link]() to serve HTML files in response to requests.
• Align your folder structure with the MVC pattern for scalability.
• Serve [Link] and [Link] for their respective routes.

Next Steps:
• Add styling to the HTML files using CSS.
• Learn how to use templating engines (e.g., EJS, Pug) for dynamic
content.
Serving HTML Files in [Link]

Serving HTML Files

1. Problem:
o Need to serve real HTML files instead of dummy HTML content
for a professional application.
2. Solution:
o Use [Link]() to serve HTML files stored in the views folder.
o Construct the file path using [Link]() to ensure compatibility
across operating systems.

Key Concepts
1. Folder Structure:
o Store HTML files in a views folder (e.g., [Link], add-
[Link]).
o Example:
project/
├── views/
│ ├── [Link]
│ └── [Link]
├── routes/
│ ├── [Link]
│ └── [Link]
└── [Link]

2. Serving Files:
o Use [Link]() to send HTML files as responses.
o Example:
 javascript
[Link]([Link](__dirname,
'../views/[Link]'));

3. Path Construction:
o Use [Link]() to build file paths that work on
both Linux and Windows.
o __dirname: A global variable in [Link] that provides the absolute
path to the current file's directory.
o Use ../ to navigate up one directory level.

Example Code: Serving HTML Files

1. routes/[Link]:
javascript:
const express = require('express');
const path = require('path');
const router = [Link]();

// GET request to /
[Link]('/', (req, res) => {
[Link]([Link](__dirname,
'../views/[Link]'));
});

[Link] = router;

2. routes/[Link]:
javascript:
 const express = require('express');
const path = require('path');
const router = [Link]();

// GET request to /add-product

[Link]('/add-product', (req, res) => {
[Link]([Link](__dirname,
'../views/[Link]'));
});

// POST request to /add-product

[Link]('/add-product', (req, res) => {
[Link]([Link]); // Log parsed request
body
[Link]('/');
});

[Link] = router;

3. [Link]:
javascript:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// Middleware to parse request bodies

[Link]([Link]({ extended: false
}));
 // Import routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

// Use routes
[Link]('/admin', adminRoutes);
[Link](shopRoutes);

// Catch-all middleware for 404 errors

[Link]((req, res) => {
[Link](404).sendFile([Link](__dirname,
'views', '[Link]'));
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Vocabulary
• views Folder: Stores HTML files representing the user interface.
• [Link](): Method to send an HTML file as a response.
• [Link](): Method to construct file paths compatible across operating
systems.
• __dirname: Global variable providing the absolute path to the current
file's directory.
Summary
• Store HTML files in a views folder for better organization.
• Use [Link]() to serve HTML files in response to requests.
• Construct file paths using [Link]() and __dirname for cross-platform
compatibility.
• Serve [Link] and [Link] for their respective routes.

Next Steps:
• Add a 404 error page (e.g., [Link]) and serve it for unhandled routes.
• Add styling to the HTML files using CSS.
• Learn how to use templating engines (e.g., EJS, Pug) for dynamic
content.
Serving a 404 Error Page in [Link]

Handling 404 Errors

1. Problem:
o Requests to unhandled routes (e.g., /random-path) need to return
a 404 error page.

2. Solution:
o Create a [Link] file in the views folder.
o Use [Link]() to serve this file for unhandled routes.
o Set the HTTP status code to 404 using [Link](404).

Key Concepts
1. 404 Error Page:
o A custom HTML page displayed when a requested resource is not
found.
o Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Page Not Found</title>
</head>
<body>
 <h1>Page Not Found</h1>
</body>
</html>
Run HTML

2. Serving the 404 Page:

o Use [Link]() to serve the [Link] file.
o Construct the file path using [Link]() and __dirname.

3. Setting the Status Code:

o Use [Link](404) to set the HTTP status code to 404.

Example Code: Serving a 404 Error Page

1. Folder Structure:
project/
├── views/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── routes/
│ ├── [Link]
│ └── [Link]
└── [Link]

2. views/[Link]:
html
<!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Page Not Found</title>
</head>
<body>
<h1>Page Not Found</h1>
</body>
</html>
Run HTML

3. [Link]:
javascript
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();

// Middleware to parse request bodies

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

// Import routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');
 // Use routes
[Link]('/admin', adminRoutes);
[Link](shopRoutes);

// Catch-all middleware for 404 errors

[Link]((req, res) => {
[Link](404).sendFile([Link](__dirname,
'views', '[Link]'));
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});

Key Vocabulary
• 404 Error Page: A custom HTML page displayed when a requested
resource is not found.
• [Link](): Method to send an HTML file as a response.
• [Link](code): Method to set the HTTP status code (e.g., 404 for "Not
Found").
• [Link](): Method to construct file paths compatible across operating
systems.

Summary
• Create a [Link] file in the views folder to handle unhandled routes.
• Use [Link]() to serve the [Link] file for unhandled routes.
• Set the HTTP status code to 404 using [Link](404).
• Construct the file path using [Link]() and __dirname for cross-
platform compatibility.
Next Steps:
• Add styling to the [Link] page using CSS.
• Explore serving static files (e.g., CSS, images) in [Link].
• Learn how to use templating engines (e.g., EJS, Pug) for dynamic
content.
Path Management in [Link]

Managing Paths to the Root Directory

1. Problem:
o Constructing paths to the root directory (e.g., views folder) in
multiple files can be repetitive and error-prone.

2. Solution:
o Create a helper function to dynamically determine the root
directory path.
o Use [Link]() and [Link] to get the
root directory path.

Key Concepts
1. Root Directory Path:
o The path to the root folder of the project (where [Link] is located).
o Use [Link] to get the path to the file that
started the application (e.g., [Link]).
o Use [Link]() to get the directory name of a file path.

2. Helper Function:
o Create a util/[Link] file to export the root directory path.
o Example:
javascript
const path = require('path');
[Link] =
[Link]([Link]);
 3. Using the Helper Function:
o Import the root directory path in route files
(e.g., [Link], [Link]).
o Use it to construct paths to files in the views folder.

Example Code: Managing Paths

1. Folder Structure:
project/
├── util/
│ └── [Link]
├── views/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── routes/
│ ├── [Link]
│ └── [Link]
└── [Link]

2. util/[Link]:
javascript:
const path = require('path');
[Link] =
[Link]([Link]);

3. routes/[Link]:
javascript:
const express = require('express');
 const path = require('path');
const rootDir = require('../util/path');
const router = [Link]();

// GET request to /
[Link]('/', (req, res) => {
[Link]([Link](rootDir, 'views',
'[Link]'));
});

[Link] = router;

4. routes/[Link]:
javascript:
const express = require('express');
const path = require('path');
const rootDir = require('../util/path');
const router = [Link]();

// GET request to /add-product

[Link]('/add-product', (req, res) => {
[Link]([Link](rootDir, 'views', 'add-
[Link]'));
});

// POST request to /add-product

[Link]('/add-product', (req, res) => {
 [Link]([Link]); // Log parsed request
body
[Link]('/');
});

[Link] = router;

Key Vocabulary
• Root Directory: The main folder of the project (e.g., where [Link] is
located).
• [Link]: Global variable providing the path to the
file that started the application.
• [Link](): Method to get the directory name of a file path.
• Helper Function: A reusable function to simplify repetitive tasks (e.g.,
path construction).

Summary
• Use [Link] and [Link]() to dynamically
determine the root directory path.
• Create a helper function in util/[Link] to export the root directory path.
• Import and use the root directory path in route files to construct paths to
the views folder.
• This approach ensures cleaner and more maintainable code.

Next Steps:
• Add styling to the HTML files using CSS.
• Explore serving static files (e.g., CSS, images) in [Link].
• Learn how to use templating engines (e.g., EJS, Pug) for dynamic
content.
Adding CSS Styling to [Link] Applications

Adding CSS Styling

1. Problem:
o Inline styles (using <style> tags) in HTML files are not
scalable or maintainable.
o Need to serve external CSS files for better organization and
reusability.
2. Solution:
o Move CSS styles to external files (e.g., [Link]).
o Serve static files (e.g., CSS, images) using [Link]().

Key Concepts
1. External CSS Files:
o Store CSS styles in a public/css folder (e.g., [Link]).
o Example:
css
/* [Link] */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.main-header {
width: 100%;
height: 3.5rem;
background-color: #ffd700;
padding: 0 1.5rem;
 }
.main-header__nav {
height: 100%;
display: flex;
align-items: center;
}
.main-header__item-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.main-header__item {
margin: 0 1rem;
}
.main-header__item a {
text-decoration: none;
color: black;
}
.main-header__item a:hover,
.main-header__item a:active {
color: #800080;
}

2. Serving Static Files:

o Use [Link]() to serve static files (e.g., CSS, images).
o Example:
 Javascript:
[Link]([Link]([Link](__dirname,
'public')));

3. Linking CSS Files:

o Link the external CSS file in the HTML <head> section.
o Example:
html
<link rel="stylesheet" href="/css/[Link]">
Run HTML

Example Code: Serving Static Files

1. Folder Structure:
project/
├── public/
│ └── css/
│ └── [Link]
├── views/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── routes/
│ ├── [Link]
│ └── [Link]
└── [Link]
2. public/css/[Link]:
css
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}

.main-header {
width: 100%;
height: 3.5rem;
background-color: #ffd700;
padding: 0 1.5rem;
}

.main-header__nav {
height: 100%;
display: flex;
align-items: center;
}

.main-header__item-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
 .main-header__item {
margin: 0 1rem;
}

.main-header__item a {
text-decoration: none;
color: black;
}

.main-header__item a:hover,
.main-header__item a:active {
color: #800080;
}

3. [Link]:
javascript:
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();

// Middleware to parse request bodies

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

// Serve static files (e.g., CSS, images)

 [Link]([Link]([Link](__dirname,
'public')));

// Import routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

// Use routes
[Link]('/admin', adminRoutes);
[Link](shopRoutes);

// Catch-all middleware for 404 errors

[Link]((req, res) => {
[Link](404).sendFile([Link](__dirname,
'views', '[Link]'));
});

[Link](3000, () => {
[Link]('Server running on port 3000');
});

4. views/[Link]:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-
width, initial-scale=1.0">
<link rel="stylesheet" href="/css/[Link]">
<title>Shop</title>
</head>
<body>
<header class="main-header">
<nav class="main-header__nav">
<ul class="main-header__item-list">
<li class="main-header__item"><a href="/"
class="active">Shop</a></li>
<li class="main-header__item"><a
href="/admin/add-product">Add Product</a></li>
</ul>
</nav>
</header>
<main>
<h1>My Products</h1>
</main>
</body>
</html>
Run HTML

Key Vocabulary
• Static Files: Files like CSS, images, and JavaScript that don’t change
dynamically.
• [Link](): Middleware to serve static files in [Link].
• External CSS: CSS styles stored in separate files for better organization
and reusability.
Summary
• Move CSS styles to external files (e.g., [Link]) for better
maintainability.
• Use [Link]() to serve static files (e.g., CSS, images) from
the public folder.
• Link external CSS files in the HTML <head> section using <link>.
• This approach ensures cleaner code and better scalability.

Next Steps:
• Add JavaScript functionality to the application.
• Explore using templating engines (e.g., EJS, Pug) for dynamic content.
• Learn how to handle file uploads and user authentication in [Link].
Serving Static Files in [Link]

Why Serve Static Files?

• Inline CSS/JS in HTML files is not scalable or maintainable.
• Static files (CSS, images, JS) need to be served externally for better
organization.

Key Concepts
1. Static Files:
o Files like CSS, JavaScript, and images that don’t change
dynamically.
o Store in a public folder (conventionally named).

2. [Link]() Middleware:
o Built-in [Link] middleware to serve static files.
o Syntax:
Javascript:
[Link]([Link]([Link](__dirname,
'public')));
o public folder becomes accessible to clients
(e.g., /css/[Link] maps to public/css/[Link]).

3. Path Handling:
o Use [Link]() to construct OS-agnostic paths.
o Example:
Javascript:
const path = require('path');
[Link]([Link]([Link](__dirname,
'public')));
Example Code
1. Folder Structure:
project/
├── public/
│ └── css/
│ ├── [Link]
│ └── [Link]
├── views/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
└── [Link]

2. [Link] (Middleware Setup):

javascript:
const express = require('express');
const path = require('path');
const app = express();

// Serve static files from the 'public' folder

[Link]([Link]([Link](__dirname,
'public')));

// Other middleware and routes...

[Link](3000);
 3. HTML File Linking:
o In [Link]:
html
<head>
<link rel="stylesheet"
href="/css/[Link]">
</head>
Run HTML

o In [Link]:
html
<head>
<link rel="stylesheet"
href="/css/[Link]">
<link rel="stylesheet"
href="/css/[Link]">
</head>
Run HTML

Key Vocabulary
• [Link](): Middleware to serve static files (CSS, JS, images).
• Static Files: Non-dynamic files served directly to clients.
• public Folder: Directory for static files accessible to users.

Summary
• Use [Link]() to serve static files from the public folder.
• Link external CSS/JS files in HTML using relative paths
(e.g., /css/[Link]).
• Improves code maintainability and scalability by separating static
assets.
[Link] Fundamentals

Core Concepts of [Link]

1. [Link] Overview:
o [Link] is a [Link] framework that builds on [Link] core
modules (e.g., path).
o Provides utility functions and a structured approach to building
web applications.

2. Middleware:
o Middleware functions process incoming requests and responses.
o Key components:
▪ req: The request object (incoming data).
▪ res: The response object (outgoing data).
▪ next: A function to pass control to the next middleware.
o Rules:
▪ Call next() to forward the request to the next middleware.
▪ Do not call next() if sending a response (e.g.,
using [Link]()).

3. Request Filtering:
o Use [Link](path, callback) to filter requests by path.
o Use [Link](), [Link](), etc., to filter requests by HTTP
method.
o Exact matching: [Link]() matches paths exactly,
while [Link]() matches the beginning of the path.

4. Express Router:
o Use [Link]() to split routes into multiple files.
 o Export the router and use it in the main app with [Link]().
o Example:
Javascript:
const router = [Link]();
[Link]('/path', (req, res) => { ... });
[Link] = router;

5. Serving Static Files:

o Use [Link]() to serve static files (e.g., CSS, JS, images).
o Example:
Javascript:
[Link]([Link]([Link](__dirname,
'public')));
o Files in the public folder are accessible via URLs
(e.g., /css/[Link]).

Key Vocabulary
• Middleware: Functions that process requests and responses in [Link].
• req: The request object containing incoming data.
• res: The response object used to send data back to the client.
• next: Function to pass control to the next middleware.
• [Link](): A mini Express app for organizing routes into separate
files.
• [Link](): Middleware to serve static files (e.g., CSS, JS, images).

Summary
• [Link] is a [Link] framework that simplifies web development
with middleware and routing.
 • Middleware processes requests and responses, with next() forwarding
control to the next middleware.
• Use [Link](), [Link](), and [Link]() to filter requests
by path and HTTP method.
• Organize routes with [Link]() for better code structure.
• Serve static files (e.g., CSS, JS) using [Link]().

Next Steps:
• Learn to render dynamic content using templating engines (e.g., EJS,
Pug).
• Explore database integration (e.g., MongoDB, MySQL) for storing and
retrieving data.
• Implement user authentication and session management.
• Handle file uploads and data validation.