Introduction
Express.js is one of the most popular web frameworks for Node.js, providing a simple and flexible way to handle HTTP requests, routes, middleware, and more. Express makes it easy to set up a web server, define routes, and manage HTTP requests in an intuitive way. In this post, we will guide you through the process of installing and setting up an Express.js application from scratch.
By the end of this guide, you will have your first Express server running on your local machine, and you will be familiar with the basic setup for handling HTTP requests and routing.
What is Express.js?
Express.js is a fast, unopinionated, and minimalist web framework for Node.js. It simplifies the process of creating web servers and APIs by abstracting away some of the complexities of working with the underlying HTTP module in Node.js.
Key Features of Express:
- Routing: Easily define routes to handle various HTTP methods (GET, POST, PUT, DELETE).
- Middleware: Use middleware functions to handle requests, responses, and errors before they reach the route handler.
- Template Engines: Integrate with template engines to render dynamic HTML content.
- Serving Static Files: Serve static assets like images, CSS, and JavaScript files.
- Error Handling: Centralized error handling for your application.
Now that we understand what Express is, let’s move on to installing and setting it up.
Prerequisites
Before getting started with Express.js, make sure you have the following:
- Node.js: Express is built on top of Node.js, so you need to have it installed. If you haven’t installed Node.js, download it from the official website: https://nodejs.org/.
- npm (Node Package Manager): npm is included with Node.js, and it will be used to install Express and other dependencies.
To verify that Node.js and npm are installed, run the following commands in your terminal:
node -v
npm -v
If everything is installed correctly, these commands will return the versions of Node.js and npm.
Step 1: Setting Up a New Project
To start, we will create a new Node.js project and initialize it with npm.
- Create a new directory for your project and navigate into it:
mkdir my-express-app
cd my-express-app
- Initialize a new Node.js project by running the following command. This will generate a
package.jsonfile, which contains information about your project and its dependencies.
npm init -y
The -y flag automatically answers “yes” to all prompts, generating a package.json with default values.
Step 2: Installing Express.js
Now that you have a basic project set up, it’s time to install Express.
- Install Express using npm:
npm install express
This command installs Express and adds it to your node_modules folder. Additionally, the package.json file will be updated with Express listed as a dependency.
Step 3: Setting Up a Basic Express Server
With Express installed, we can now set up a basic web server.
- Create a new file called
app.js(orserver.js, or whatever name you prefer) in your project directory. - Write the server code:
// Import Express
const express = require('express');
// Create an instance of an Express app
const app = express();
// Define a basic route that responds to GET requests at the root URL
app.get('/', (req, res) => {
res.send('Hello, Express!');
});
// Start the server on port 3000
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
Explanation:
express()creates an instance of an Express application.app.get('/', ...)defines a route that listens for GET requests at the root URL (/) and sends a simple “Hello, Express!” response.app.listen(3000, ...)starts the server on port 3000, so you can access it by navigating tohttp://localhost:3000in your web browser.
- Run the server:
In the terminal, run the following command to start your Express server:
node app.js
You should see the following output:
Server is running on http://localhost:3000
- Test the server:
Open your web browser and go to http://localhost:3000. You should see the message “Hello, Express!” displayed on the page.
Step 4: Handling Additional Routes
Express makes it easy to handle different HTTP methods (GET, POST, PUT, DELETE) and different routes for different parts of your application.
1. Adding a New Route:
You can easily add new routes to your Express application to handle various paths.
// Handle GET requests to /about
app.get('/about', (req, res) => {
res.send('This is the about page');
});
2. Handling POST Requests:
In addition to handling GET requests, you can also handle POST requests. For example, if you wanted to accept form submissions, you could do something like this:
// Handle POST requests to /submit
app.post('/submit', (req, res) => {
res.send('Form submitted successfully');
});
3. Handling Dynamic Routes:
Express allows you to handle dynamic routes using route parameters. For example, you can capture values from the URL and use them in your response.
// Handle GET requests to /user/:id
app.get('/user/:id', (req, res) => {
const userId = req.params.id;
res.send(User ID: ${userId});
});
If you visit http://localhost:3000/user/123, the server will respond with “User ID: 123”.
Step 5: Using Middleware in Express
Middleware functions are a key part of Express. They allow you to modify the request and response objects, perform actions, or terminate the request-response cycle.
1. Built-in Middleware:
Express comes with several built-in middleware functions, such as express.static() for serving static files and express.json() for parsing JSON data in the request body.
// Middleware to serve static files from the 'public' directory
app.use(express.static('public'));
// Middleware to parse JSON data in request bodies
app.use(express.json());
2. Custom Middleware:
You can also create your own custom middleware functions to handle requests in specific ways. For example, a simple middleware that logs each request:
// Custom middleware to log request details
app.use((req, res, next) => {
console.log(${req.method} ${req.url});
next(); // Pass control to the next middleware
});
This middleware will log every request’s HTTP method and URL to the console.
Step 6: Handling Errors
Express provides a simple way to handle errors through middleware. The error-handling middleware takes four arguments: err, req, res, and next.
1. Basic Error Handling:
You can define a simple error-handling middleware function that will catch any errors thrown in the routes or other middleware.
// Error-handling middleware
app.use((err, req, res, next) => {
console.error(err.stack); // Log the error stack trace
res.status(500).send('Something went wrong!');
});
This will catch all errors, log the stack trace to the console, and return a 500 status code with a generic error message.
Step 7: Stopping the Server
To stop the server while it’s running, simply press Ctrl + C in the terminal. This will terminate the Node.js process and stop the Express server.
Leave a Reply