Express is a popular open-source web application framework for Node.js, used to build server-side web applications. It provides a simple and flexible API for building web applications, allowing developers to create high-performance and scalable web applications with ease.<\/p>\n
Express was first released in 2010 and has since become one of the most widely used frameworks for Node.js. It has a large and active community of developers, and a vast ecosystem of modules and tools that can be used to extend its capabilities.<\/p>\n
1. Middleware:<\/strong> Express provides middleware, which are functions that can be executed during the request-response cycle of an HTTP request. Middleware functions can be used to modify the request or response objects, perform authentication or validation, or handle errors.<\/p>\n 2. Routing:<\/strong> Express provides a simple and flexible routing system that allows developers to define routes for different HTTP methods and URLs. Route handlers can be used to handle requests and send responses.<\/p>\n 3. Template Engines:<\/strong> Express supports multiple template engines such as Pug, EJS, and Handlebars, which allow developers to easily generate HTML pages with dynamic content.<\/p>\n 4. Error Handling:<\/strong> Express provides a robust error-handling mechanism that allows developers to handle errors in a central location and provide appropriate responses to clients.<\/p>\n To get started with Express, we need to install it as a dependency in our Node.js project. We can do this using the following command:<\/p>\n Once we have installed Express, we can create a new Express application by creating a new JavaScript file and importing the Express module.<\/p>\n In the above code, we import the Express module and create a new Express application instance. We can then define routes for the application using the HTTP methods (GET, POST, PUT, DELETE) and the \u2018app\u2019 instance.<\/p>\n In the above code, we define a route for the root URL (\/) using the \u2018get\u2019 method of the \u2018app\u2019 instance. When a client sends a GET request to the root URL, the route handler function will be executed, and the response will be sent with the message “Hello World!”.<\/p>\n We can start the Express application by listening for incoming HTTP requests on a specific port using the \u2018listen\u2019 method of the \u2018app\u2019 instance.<\/p>\n In the above code, we start the Express application on port 3000 and log a message to the console when the server is started.<\/p>\n Request:<\/strong> A request is a message sent by a client to a server, requesting a specific action to be performed. In the context of web applications, an HTTP request is commonly used. An HTTP request consists of several components:<\/p>\n 1. HTTP Method:<\/strong> It specifies the type of action to be performed on the server. The most commonly used methods are:<\/p>\n 2. URL (Uniform Resource Locator):<\/strong> It identifies the location of the resource on the server that the client wants to interact with. For example, https:\/\/example.com\/api\/users.<\/p>\n 3. Headers:<\/strong> Headers contain additional information about the request, such as the client’s user agent, content type, or authorization credentials.<\/p>\n 4. Body (optional):<\/strong> In some cases, a request may include a body that contains data to be sent to the server. This is commonly used in POST or PUT requests to send data for creating or updating a resource.<\/p>\n Once a server receives a request, it processes it and generates a response.<\/p>\n Response:<\/strong> A response is a message sent by a server to a client in response to a request. Like requests, HTTP responses consist of several components:<\/p>\n 1. Status Code:<\/strong> It indicates the outcome of the request. Common HTTP status codes include:<\/p>\n 2. Headers:<\/strong> Similar to request headers, response headers provide additional information about the response, such as the content type or caching instructions.<\/p>\n 3. Body:<\/strong> The response body contains the data returned by the server. This can be HTML, JSON, XML, or any other format based on the request and the server’s functionality.<\/p>\n The client receives the response and processes it accordingly. For example, in a web browser, the response may be used to render a web page or update the client’s user interface.<\/p>\n Basic routing is a key feature of web frameworks like Express, where you can define routes to handle different HTTP methods and URLs. Let’s explore how routing works in Express and provide some example code.<\/p>\n In Express, you can define routes using the \u2018app\u2019 object, which represents your Express application. Here’s an example of defining a basic route:<\/p>\n In the above code, we import the Express module and create an Express application instance using \u2018express()\u2019. Then, we define a route for the root URL (\u2018\/\u2019) using the \u2018get\u2019 method of the \u2018app\u2019 object. When a client sends a GET request to the root URL, the route handler function is executed, and the response is sent with the message “Hello World!”.<\/p>\n You can define routes for other HTTP methods like \u2018POST\u2019, \u2018PUT\u2019, or \u2018DELETE\u2019 in a similar way:<\/p>\n In the above code, we define routes for creating, updating, and deleting users. The :id in the URL represents a route parameter, allowing you to access dynamic values from the URL using \u2018req.params\u2019. In this example, we define a route with two middleware functions. The first middleware function performs some operations on the request (e.g., logging), and then calls the next function to pass the control to the next middleware or route handler. Finally, the second middleware function handles the request and sends a response.<\/p>\n Serving static files is a common requirement in web applications, where you need to serve files such as HTML, CSS, JavaScript, images, or other static assets to clients. Express provides a built-in middleware called \u2018express.static\u2019 that makes it easy to serve static files. Let’s explore how to serve static files in Express.<\/p>\n First, you need to create a directory in your project where you will store your static files. For example, you can create a folder named “public” in your project’s root directory.<\/p>\n Inside the “public” folder, you can place your static files. For instance, you may have an HTML file called “index.html”, a CSS file called “styles.css”, and an image file called “logo.png”.<\/p>\n To serve these static files, you can use the \u2018express.static\u2019 middleware in your Express application. Here’s an example:<\/p>\n In the above code, we use the \u2018app.use\u2019 function to register the \u2018express.static\u2019 middleware. We pass the path to the directory containing the static files as an argument. In this case, we specify ‘public’ as the directory name. This means that any files in the “public” directory can be accessed by clients.<\/p>\n Now, if you have an HTML file called “index.html” in the “public” directory, it can be accessed by visiting \u2018http:\/\/localhost:3000\/index.html\u2019 in your browser.<\/p>\n Similarly, if you have a CSS file called “styles.css” in the “public” directory, it can be referenced in your HTML file using a relative path like \u2018<link rel=”stylesheet” href=”\/styles.css”>\u2019.<\/p>\n The \u2018express.static\u2019 middleware takes care of mapping URLs to the corresponding files in the specified directory. It automatically serves the appropriate file to the client based on the requested URL.<\/p>\n GET Method:<\/strong> The GET method is one of the most commonly used HTTP methods. It is used to retrieve data from a server by sending a request. When a client sends a GET request, it specifies the resource it wants to retrieve from the server. This method is considered “safe” as it should not have any side effects on the server.<\/p>\n In the above code, we define a route using the \u2018app.get\u2019 method to handle a GET request to the ‘\/users’ URL. When the client sends a GET request to this route, the route handler function is executed, and the server responds by sending an array of user data in JSON format.<\/p>\n POST Method:<\/strong> The POST method is used to submit data to the server to create or update a resource. When a client sends a POST request, it includes data in the request body that will be processed by the server. This method can have side effects on the server, such as creating a new record in a database.<\/p>\n In the above code, we use the \u2018app.post\u2019 method to define a route for handling a POST request to the ‘\/users’ URL. We also use the \u2018express.json\u2019 middleware to parse the JSON data in the request body. When the client sends a POST request to this route, the route handler function is executed. It accesses the data from the request body and performs the necessary operations, such as creating a new user in a database. Finally, the server responds with a success message.<\/p>\n By using the GET and POST methods in Express, you can handle different types of client requests and perform appropriate actions on the server, such as retrieving data or creating new resources.<\/p>\n Cookies are a widely used mechanism for managing state and maintaining user session information in web applications. In Express, you can easily handle cookies using the \u2018cookie-parser\u2019 middleware and the \u2018res.cookie\u2019 method. Let’s explain cookies management and provide an example code snippet. Once you have installed \u2018cookie-parser\u2019, you can use it in your Express application as middleware. Here’s an example:<\/p>\n In the above code, we first import the cookie-parser middleware and use it with \u2018app.use\u2019 to enable cookie parsing for incoming requests.<\/p>\n Next, we define a route for setting a cookie using the \u2018res.cookie\u2019 method. Inside the route handler, we call \u2018res.cookie\u2019 with the name and value of the cookie we want to set. In this example, we set a cookie named ‘username’ with the value ‘John’.<\/p>\n To retrieve the value of the cookie, we define another route for retrieving the cookie. In the route handler, we access the value of the ‘username’ cookie using \u2018req.cookies\u2019.username and send it as a response. This is a basic example of how to manage cookies in Express. You can set additional options for cookies, such as expiration time, domain, and secure flag, by passing an options object as the third argument to res.cookie.<\/p>\n Express is a powerful and flexible web application framework for Node.js that provides a wide range of features and capabilities for building high-performance web applications. With its simple API, middleware, routing, template engines, and error-handling mechanisms, developers can quickly and easily create scalable and maintainable web applications with Express.<\/p>\n","protected":false},"excerpt":{"rendered":" Express is a popular open-source web application framework for Node.js, used to build server-side web applications. It provides a simple and flexible API for building web applications, allowing developers to create high-performance and scalable...<\/p>\n","protected":false},"author":1,"featured_media":87805,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4984],"tags":[5055],"class_list":["post-87803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js-tutorials","tag-node-js-express-framework"],"yoast_head":"\nInstalling Express<\/h3>\n
npm install express<\/pre>\n
const express = require('express');\nconst app = express();<\/pre>\napp.get('\/', (req, res) => {\n res.send('Hello World!');\n});\n<\/pre>\napp.listen(3000, () => {\n console.log('Server started on port 3000');\n});\n<\/pre>\nRequest & Response<\/h3>\n
\n
\n
Basic Routing<\/h3>\n
const express = require('express');\nconst app = express();\n \n\/\/ Define a route for the root URL\napp.get('\/', (req, res) => {\n res.send('Hello World!');\n});\n \n\/\/ Start the server\napp.listen(3000, () => {\n console.log('Server started on port 3000');\n});\n<\/pre>\n\/\/ Define a route for handling a POST request\napp.post('\/users', (req, res) => {\n \/\/ Handle the request and send a response\n res.send('User created successfully!');\n});\n \n\/\/ Define a route for handling a PUT request\napp.put('\/users\/:id', (req, res) => {\n const userId = req.params.id;\n \/\/ Handle the request and send a response\n res.send(`User ${userId} updated successfully!`);\n});\n \n\/\/ Define a route for handling a DELETE request\napp.delete('\/users\/:id', (req, res) => {\n const userId = req.params.id;\n \/\/ Handle the request and send a response\n res.send(`User ${userId} deleted successfully!`);\n});\n<\/pre>\n
\nYou can also define routes with multiple callback functions or middleware for more complex scenarios:<\/p>\napp.get('\/users\/:id', (req, res, next) => {\n \/\/ Middleware function 1\n \/\/ Perform some operations on the request\n console.log('Middleware 1');\n \n \/\/ Call the next middleware or route handler\n next();\n}, (req, res) => {\n \/\/ Middleware function 2\n \/\/ Handle the request and send a response\n const userId = req.params.id;\n res.send(`User ${userId} retrieved successfully!`);\n});\n<\/pre>\nServing Static Files<\/h3>\n
const express = require('express');\nconst app = express();\n \n\/\/ Serve static files from the \"public\" directory\napp.use(express.static('public'));\n \n\/\/ Start the server\napp.listen(3000, () => {\n console.log('Server started on port 3000');\n});\n<\/pre>\nGET And POST Methods<\/h3>\n
Example code for handling a GET request in Express:\nconst express = require('express');\nconst app = express();\n \n\/\/ Define a route for handling a GET request\napp.get('\/users', (req, res) => {\n \/\/ Retrieve user data from a database or another source\n const users = [\n { id: 1, name: 'John' },\n { id: 2, name: 'Jane' },\n ];\n \n \/\/ Send the users as a response\n res.json(users);\n});\n \n\/\/ Start the server\napp.listen(3000, () => {\n console.log('Server started on port 3000');\n});\n<\/pre>\nExample code for handling a POST request in Express:\nconst express = require('express');\nconst app = express();\n \n\/\/ Parse JSON data in the request body\napp.use(express.json());\n \n\/\/ Define a route for handling a POST request\napp.post('\/users', (req, res) => {\n const { name, email } = req.body;\n \n \/\/ Process the data and create a new user\n \/\/ Save the user to a database or perform other operations\n \n \/\/ Send a success message as a response\n res.send('User created successfully!');\n});\n \n\/\/ Start the server\napp.listen(3000, () => {\n console.log('Server started on port 3000');\n});\n<\/pre>\nCookies Management<\/h3>\n
\nFirst, you need to install the \u2018cookie-parser\u2019 package by running the following command:<\/p>\nnpm install cookie-parser<\/pre>\n
const express = require('express');\nconst cookieParser = require('cookie-parser');\nconst app = express();\n \n\/\/ Use the cookieParser middleware\napp.use(cookieParser());\n \n\/\/ Define a route for setting a cookie\napp.get('\/set-cookie', (req, res) => {\n \/\/ Set a cookie with a name and value\n res.cookie('username', 'John');\n \n \/\/ Send a response\n res.send('Cookie set successfully!');\n});\n \n\/\/ Define a route for retrieving the cookie\napp.get('\/get-cookie', (req, res) => {\n \/\/ Retrieve the value of the cookie\n const username = req.cookies.username;\n \n \/\/ Send the value as a response\n res.send(`Username: ${username}`);\n});\n \n\/\/ Start the server\napp.listen(3000, () => {\n console.log('Server started on port 3000');\n});\n<\/pre>\n
\nWhen a client visits the ‘\/set-cookie’ route, the server sets the ‘username’ cookie with the value ‘John’. The client’s browser stores this cookie. Then, when the client visits the ‘\/get-cookie’ route, the server retrieves the value of the ‘username’ cookie and sends it back as a response.<\/p>\nConclusion<\/h3>\n