Introduction to Express.js
1. Installation and Setup
Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It simplifies building server-side applications and APIs, handling HTTP requests, and managing middleware.
Steps to Install and Set Up Express.js:
-
Install Node.js:
- Express.js requires Node.js. Download and install Node.js from the official website if it's not already installed.
Create a New Project Directory:
mkdir my-express-app
cd my-express-app
- Initialize a New Node.js Project:
npm init -y
This command creates a package.json
file with default settings.
- Install Express.js:
npm install express
This command installs Express.js and adds it as a dependency in your package.json
file.
-
Install
nodemon
:-
nodemon
is a tool that automatically restarts your application when file changes are detected.
-
npm install --save-dev nodemon
-
Add
nodemon
topackage.json
Scripts: Openpackage.json
and modify thescripts
section to include:
"scripts": {
"start": "nodemon app.js"
}
-
Set Up Import Syntax for JavaScript:
- Node.js does not support ES6 module syntax (
import/export
) directly in files by default. You need to enable this feature by adding"type": "module"
to yourpackage.json
. - Modify
package.json
to include:
"type": "module"
- Node.js does not support ES6 module syntax (
Create the Entry Point File:
Create a file namedapp.js
(orindex.js
) in your project directory. This file will contain your Express application code.
2. Creating a Basic Express Application
To create a basic Express application, follow these steps:
-
Initialize Express in
app.js
:
import express from 'express';
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
-
import express from 'express';
imports the Express module using the ES6import
syntax. -
express()
initializes an Express application. -
app.get()
defines a route handler for GET requests to the root URL (/
). -
app.listen()
starts the server and listens on the specified port.
-
Run the Application:
- Use
npm start
to run the application withnodemon
:
npm start
- Use
- Open your web browser and navigate to
http://localhost:3000
. You should see "Hello, World!" displayed.
With these steps, you have set up a basic Express.js application using the ES6 import
syntax and configured nodemon
to automatically restart the server during development. This setup helps streamline development and efficiently handle code changes.
Routing in Express.js
Routing in Express.js is the process of defining how an application responds to client requests for specific endpoints. Routes can be defined for different HTTP methods (GET, POST, PUT, DELETE, etc.) and can be organized to handle complex URL structures.
Basic GET Route
A GET route is used to retrieve data from the server. It is often used to serve static content or data based on a query.
Example:
// Basic GET route
app.get('/home', (req, res) => {
res.send('Welcome to the Home Page!');
});
Basic POST Route
A POST route is used to send data to the server. It is commonly used for submitting forms or creating new resources.
Example:
// Basic POST route
app.post('/submit', (req, res) => {
res.send('Form submitted!');
});
Basic PUT Route
A PUT route is used to update existing data on the server. It is typically used to modify resources or update records.
Example:
// Basic PUT route
app.put('/update', (req, res) => {
res.send('Data updated!');
});
Basic DELETE Route
A DELETE route is used to remove data from the server. It is used to delete resources or records.
Example:
// Basic DELETE route
app.delete('/delete', (req, res) => {
res.send('Data deleted!');
});
app.use
in Express.js
The app.use
method in Express.js is used to register middleware functions that handle requests. Middleware functions are executed in the order they are defined, and app.use
can be used to apply middleware globally or to specific paths.
1. Applying Middleware Globally
When app.use
is used without a path, the middleware function is applied to all incoming requests. This is useful for setting up global functionality such as logging, parsing request bodies, or handling sessions.
Example:
// Middleware function applied globally
app.use((req, res, next) => {
console.log(`Request URL: ${req.url}`);
next(); // Pass control to the next handler
});
app.get('/', (req, res) => {
res.send('Home Page');
});
- Global Middleware: The middleware function logs the request URL for every request received by the server.
2. Applying Middleware to Specific Paths
You can use app.use
to apply middleware only to requests that match a specific path. This allows you to target middleware to certain routes.
Example:
// Middleware function applied to /admin paths
app.use('/admin', (req, res, next) => {
console.log('Admin route accessed');
next(); // Pass control to the next handler
});
app.get('/admin/dashboard', (req, res) => {
res.send('Admin Dashboard');
});
app.get('/user/profile', (req, res) => {
res.send('User Profile');
});
-
Path-Specific Middleware: The middleware logs a message only for requests to paths starting with
/admin
.
3. Using app.use
with Multiple Middleware Functions
You can chain multiple middleware functions together with app.use
, allowing for sequential processing of requests.
Example:
// First middleware function
const firstMiddleware = (req, res, next) => {
console.log('First Middleware');
next(); // Proceed to the next middleware
};
// Second middleware function
const secondMiddleware = (req, res, next) => {
console.log('Second Middleware');
next(); // Proceed to the next handler
};
// Apply multiple middleware functions
app.use(firstMiddleware, secondMiddleware);
app.get('/', (req, res) => {
res.send('Home Page');
});
-
Chaining Middleware:
firstMiddleware
andsecondMiddleware
are executed sequentially for all requests.
The app.use
method in Express.js provides flexibility for applying middleware functions globally or to specific routes, and for processing requests in a modular fashion.
Callback Functions in Express.js
In Express.js, callback functions are crucial for handling HTTP requests. They are used in middleware and route handlers to process requests and manage responses.
1. Parameters in Callback Functions
Callback functions in Express.js receive three parameters:
-
req
(Request): The request object containing details about the incoming request. -
res
(Response): The response object used to send a response to the client. -
next
(Next): A function to pass control to the next middleware or route handler.
Example:
function callback(req, res, next) {
// Your code here
next(); // Pass control to the next middleware or route handler
}
2. Middleware Callbacks
Middleware functions process requests before they reach route handlers. They utilize the req
, res
, and next
parameters.
Example:
const logMiddleware = (req, res, next) => {
console.log(`Request URL: ${req.url}`);
next(); // Pass control to the next handler
};
app.use(logMiddleware); // Apply middleware globally
app.get('/', (req, res) => {
res.send('Home Page');
});
3. Route Handler Callbacks
Route handlers define responses for specific routes, using callback parameters to manage requests and responses.
Example:
app.get('/example', (req, res) => {
res.send('Hello World!');
});
4. Chaining Middleware Functions
Multiple middleware functions can be chained together to handle requests sequentially.
Example:
const authenticate = (req, res, next) => {
console.log('Authentication middleware');
next(); // Proceed to the next middleware
};
const authorize = (req, res, next) => {
console.log('Authorization middleware');
next(); // Proceed to the route handler
};
app.get('/profile', authenticate, authorize, (req, res) => {
res.send('User Profile');
});
Route Parameters in Express.js
Route parameters are dynamic segments of a URL used to capture values from the URL path. They allow you to define routes that can handle variable input, making your routes more flexible.
1. Basic Route Parameters
Route parameters are defined in the route path by using a colon :
followed by the parameter name. You can access these parameters in your route handler through the req.params
object.
Example:
// Route with a route parameter
app.get('/user/:id', (req, res) => {
const userId = req.params.id;
res.send(`User ID: ${userId}`);
});
-
Route Parameter: The
:id
in the route path is a parameter that captures the value from the URL, accessible viareq.params.id
.
2. Multiple Route Parameters
You can define multiple route parameters in a single route path, allowing for more complex URL structures.
Example:
// Route with multiple route parameters
app.get('/post/:year/:month/:day', (req, res) => {
const { year, month, day } = req.params;
res.send(`Post date: ${year}-${month}-${day}`);
});
-
Multiple Parameters: The
:year
,:month
, and:day
parameters capture parts of the date from the URL, accessible viareq.params.year
,req.params.month
, andreq.params.day
.
3. Optional Route Parameters
Route parameters can also be optional. Use a question mark ?
to indicate optional segments in the route path.
Example:
// Route with an optional route parameter
app.get('/product/:id?', (req, res) => {
const productId = req.params.id || 'not specified';
res.send(`Product ID: ${productId}`);
});
-
Optional Parameter: The
:id?
parameter is optional, meaning the route can be accessed with or without this parameter.
Route parameters provide a way to build dynamic and flexible routes in Express.js, allowing you to handle various input values and create more sophisticated URL patterns.
req
Object
In Express.js, the req
object represents the incoming HTTP request from the client. It includes details about the request such as URL, headers, and body. Properly understanding the req
object is crucial for handling requests effectively.
req.body
The req.body
property contains data sent in the request body, typically used in POST and PUT requests. To access req.body
, you need to use middleware for parsing the request data.
Handling JSON Data:
app.use(express.json()); // Middleware to parse JSON bodies
app.post('/submit', (req, res) => {
const { name, age } = req.body;
res.send(`Received data - Name: ${name}, Age: ${age}`);
});
-
Explanation:
-
express.json()
: Middleware to parse JSON data in request bodies. -
req.body
: Contains parsed JSON data.
-
Handling URL-encoded Data:
app.use(express.urlencoded({ extended: true })); // Middleware to parse URL-encoded bodies
app.post('/submit', (req, res) => {
const { name, age } = req.body;
res.send(`Received data - Name: ${name}, Age: ${age}`);
});
-
Explanation:
-
express.urlencoded({ extended: true })
: Middleware to parse URL-encoded data from forms. -
req.body
: Contains parsed URL-encoded data.
-
req.cookies
The req.cookies
property contains cookies sent by the client. To use req.cookies
, you need the cookie-parser
middleware to parse cookies in requests.
Example:
import cookieParser from 'cookie-parser';
app.use(cookieParser()); // Middleware to parse cookies
app.get('/check-cookies', (req, res) => {
const user = req.cookies.user; // Access a cookie named 'user'
res.send(`Cookie value - User: ${user}`);
});
-
Explanation:
-
cookieParser()
: Middleware to parse cookies from request headers. -
req.cookies
: Contains cookies sent by the client.
-
req.method
The req.method
property contains the HTTP method of the incoming request. This can be useful for handling different types of requests, such as GET, POST, PUT, DELETE, etc.
Example:
app.use((req, res, next) => {
console.log(`Request Method: ${req.method}`); // Logs the HTTP method of the request
next(); // Pass control to the next handler
});
app.get('/example', (req, res) => {
res.send(`This is a GET request`);
});
app.post('/example', (req, res) => {
res.send(`This is a POST request`);
});
-
Explanation:
-
req.method
: Contains the HTTP method used for the request (e.g., GET, POST).
-
req.params
The req.params
property contains route parameters specified in the URL path. Route parameters are used to capture values from the URL and are typically defined in routes with a colon syntax (e.g., /users/:id
).
Example:
app.get('/users/:id', (req, res) => {
const userId = req.params.id; // Access the route parameter 'id'
res.send(`User ID: ${userId}`);
});
-
Explanation:
-
req.params
: Contains key-value pairs of route parameters, where the key is the parameter name defined in the route, and the value is the actual value from the URL.
-
req.query
The req.query
property contains query string parameters from the URL. These are typically used to pass data in the URL for GET requests.
Example:
app.get('/search', (req, res) => {
const query = req.query.q; // Access the query parameter 'q'
res.send(`Search query: ${query}`);
});
-
Explanation:
-
req.query
: Contains key-value pairs of query string parameters. For example, for a URL like/search?q=example
,req.query.q
would be'example'
.
-
req.get()
The req.get()
method is used to retrieve HTTP headers from the incoming request. It allows you to access specific headers by name. This is useful for extracting metadata about the request or for handling custom headers.
Example:
app.get('/headers', (req, res) => {
const userAgent = req.get('User-Agent'); // Access the 'User-Agent' header
const host = req.get('Host'); // Access the 'Host' header
const acceptLanguage = req.get('Accept-Language'); // Access the 'Accept-Language' header
const contentType = req.get('Content-Type'); // Access the 'Content-Type' header
res.send(`
User-Agent: ${userAgent}<br>
Host: ${host}<br>
Accept-Language: ${acceptLanguage}<br>
Content-Type: ${contentType}
`);
});
-
Explanation:
-
req.get('User-Agent')
: Retrieves theUser-Agent
header, which provides information about the client's browser or application. -
req.get('Host')
: Retrieves theHost
header, which indicates the domain name of the server and port number. -
req.get('Accept-Language')
: Retrieves theAccept-Language
header, which indicates the preferred language(s) for the response. -
req.get('Content-Type')
: Retrieves theContent-Type
header, which specifies the media type of the request body.
-
res
Object
In Express.js, the res
object represents the HTTP response that is sent back to the client. It is used to set response headers, status codes, and to send data or files back to the client. Understanding the res
object is essential for controlling the response sent from the server.
res.append()
The res.append()
method is used to add additional headers to the response. It is useful when you need to modify or add headers dynamically before sending the response.
Example:
app.get('/set-headers', (req, res) => {
res.append('Custom-Header', 'HeaderValue'); // Add a custom header
res.append('Another-Header', 'AnotherValue'); // Add another header
res.send('Headers have been set!');
});
-
Explanation:
-
res.append(name, value)
: Adds a header with the specifiedname
andvalue
to the response. If the header already exists, the new value is appended to the existing values.
-
res.cookie()
The res.cookie()
method is used to set cookies on the client's browser. It allows you to send cookies with specific options such as expiration, path, and secure flags.
Example:
app.get('/set-cookie', (req, res) => {
// Set a cookie named 'username' with a value 'JohnDoe'
res.cookie('username', 'JohnDoe', {
maxAge: 24 * 60 * 60 * 1000, // Cookie expires after 1 day
httpOnly: true, // Cookie is not accessible via JavaScript
secure: false, // Cookie is sent over HTTP (not HTTPS)
path: '/' // Cookie is valid for the entire domain
});
res.send('Cookie has been set');
});
-
Explanation:
-
res.cookie(name, value, [options])
: Sets a cookie with the specified name and value. Theoptions
parameter can include: -
maxAge
: Expiration time of the cookie in milliseconds. -
httpOnly
: Iftrue
, the cookie is not accessible via JavaScript (client-side). -
secure
: Iftrue
, the cookie is sent only over HTTPS connections. -
path
: The path for which the cookie is valid.
-
res.end()
The res.end()
method is used to end the response process and send the response to the client. It is often used to send the final output or to close the response stream when no additional data needs to be sent.
Example:
app.get('/finish', (req, res) => {
res.end('Response has been sent and the connection is closed.');
});
-
Explanation:
-
res.end([data], [encoding])
: Ends the response process. Ifdata
is provided, it is sent as the response body. Theencoding
parameter specifies the character encoding for thedata
. If nodata
is provided, an empty response is sent.
-
res.json()
The res.json()
method is used to send a JSON response to the client. It automatically sets the Content-Type
header to application/json
and converts the provided data into a JSON string.
Example:
app.get('/data', (req, res) => {
const data = {
name: 'John Doe',
age: 30,
city: 'New York'
};
res.json(data);
});
-
Explanation:
-
res.json([body])
: Sends a JSON response. Thebody
parameter is an object or array that will be converted to a JSON string and sent as the response body. TheContent-Type
header is set toapplication/json
automatically.
-
res.location()
The res.location()
method sets the Location
header of the response. It is commonly used to specify the URL to which a client should be redirected. However, this method does not send a response to the client by itself; it only sets the header.
Example:
app.get('/set-location', (req, res) => {
res.location('/new-url');
res.send('Location header has been set');
});
-
Explanation:
-
res.location(url)
: Sets theLocation
header to the specified URL. This is often used in conjunction withres.redirect
to indicate where the client should be redirected.
-
res.redirect()
The res.redirect()
method sends a redirect response to the client. It sets the Location
header and sends a status code (default is 302) to redirect the client to a different URL.
Example:
app.get('/redirect', (req, res) => {
res.redirect('/new-url');
});
-
Explanation:
-
res.redirect([status,] url)
: Redirects the client to the specified URL. The optionalstatus
parameter allows you to set a custom HTTP status code (e.g., 301 for permanent redirect, 302 for temporary redirect). If no status is provided, 302 is used by default.
-
res.send()
The res.send()
method is used to send a response to the client. It can send a variety of response types, including strings, buffers, objects, or arrays. The method automatically sets the Content-Type
header based on the type of the response.
Example:
app.get('/text', (req, res) => {
res.send('This is a plain text response.');
});
app.get('/json', (req, res) => {
const data = { message: 'This is a JSON response.' };
res.send(data);
});
app.get('/buffer', (req, res) => {
const buffer = Buffer.from('This is a buffer response.');
res.send(buffer);
});
-
Explanation:
-
res.send([body])
: Sends the response to the client. Thebody
parameter can be a string, buffer, object, or array. If an object or array is passed, it will be automatically converted to JSON. TheContent-Type
header is set based on the type of thebody
parameter.
-
res.sendFile()
The res.sendFile()
method is used to send a file as the response to the client. It sets the appropriate Content-Type
header based on the file type and streams the file to the client.
Example:
import path from 'path';
app.get('/file', (req, res) => {
const filePath = path.join(__dirname, 'public', 'example.txt');
res.sendFile(filePath);
});
-
Explanation:
-
res.sendFile(path[, options], [callback])
: Sends a file as the response. Thepath
parameter is the absolute path to the file you want to send. The optionaloptions
parameter can be used to set additional options such as theContent-Type
header or to handle errors. The optionalcallback
parameter is a function that is called when the file has been sent.
-
res.sendStatus()
The res.sendStatus()
method sets the HTTP status code and sends the corresponding status message as the response body. It is a shorthand for setting the status code and sending a response in one step.
Example:
app.get('/status', (req, res) => {
res.sendStatus(404); // Sends a 404 Not Found status with the message 'Not Found'
});
-
Explanation:
-
res.sendStatus(statusCode)
: Sets the HTTP status code and sends a response with the status message corresponding to the code. For example,404
will send 'Not Found' as the response body.
-
res.set()
The res.set()
method sets HTTP headers for the response. It can be used to specify various headers, including custom headers.
Example:
app.get('/headers', (req, res) => {
res.set('X-Custom-Header', 'Value');
res.set({
'Content-Type': 'application/json',
'X-Another-Header': 'AnotherValue'
});
res.send('Headers set');
});
-
Explanation:
-
res.set(name, value)
: Sets a single HTTP header.name
is the header name, andvalue
is the header value. -
res.set(headers)
: Sets multiple headers at once by passing an object where keys are header names and values are header values.
-
res.status()
The res.status()
method sets the HTTP status code for the response. This method is used to define the status code before sending the response.
Example:
app.get('/error', (req, res) => {
res.status(500).send('Internal Server Error'); // Sets status code to 500 and sends the message
});
-
Explanation:
-
res.status(statusCode)
: Sets the HTTP status code for the response. The status code can then be followed by other methods (likeres.send
,res.json
, etc.) to send the response body.
-