Building a Simple Express Server

Summary: in this tutorial, you’ll learn about the Express web framework and start building a simple Express server.

Introduction to the Express web framework

Express is a minimal and flexible web framework for Node.js. Express provides a set of features suitable for building web applications.

In addition, Express provides HTTP utilities that allow you to develop APIs quickly and easily. It’s also suitable for creating API for mobile applications.

When a node.js application receives an HTTP request, it passes the request to Express. For example:

https://localhost:3000/Code language: JavaScript (javascript)

When Express sees the / route, it executes a function to handle the request, like returning a piece of content to the client. The function that handles a route is called a route handler.

Install the Express framework

Before using Express, you need to install it using the following npm command:

npm install expressCode language: JavaScript (javascript)

If you use macOS or Linux, you can use the sudo npm command instead.

sudo npm install expressCode language: JavaScript (javascript)

Create a simple Express application

First, create a new project directory named express-server.

mkdir express-serverCode language: JavaScript (javascript)

Second, run the npm init --yes command:

npm init --yesCode language: JavaScript (javascript)

Third, create an index.js file with the following code:

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

app.get("/", (request, response) => {
    response.send("Hi there");
});

app.listen(3000, () => {
    console.log("Listen on the port 3000...");
});Code language: JavaScript (javascript)

How it works.

First, load the Express module:

const express = require('express');Code language: JavaScript (javascript)

The express is a function that returns an instance of an Express app.

Second, call the express() function to get an instance of the Express app:

const app = express();  Code language: JavaScript (javascript)

Third, define a route handler that handles the HTTP GET request to the site route /

app.get('/', (req, res) => {
    res.send('Hi there');
});Code language: JavaScript (javascript)

The get() method has two parameters:

• The first parameter is the route. In this case, it’s the site root /.
• The second parameter is a callback function with two parameters: request and response.

The request represents the HTTP request and the response parameter describes the HTTP response. These are the instances of the Request and Response classes. They have many helpful properties and methods for dealing with HTTP requests and responses.

In this example, we call the send() method of the HTTP response object to send back a simple text.

Finally, instruct node.js to listen to the HTTP request on port 3000:

app.listen(3000, () => {
    console.log("Listen on the port 3000...");
});Code language: JavaScript (javascript)

To execute the app, you can open the terminal and type the following command:

node index.jsCode language: JavaScript (javascript)

If you see the following output, it means that the application runs successfully:

Listen on the port 3000...Code language: JavaScript (javascript)

Otherwise, you need to double-check the code above if it has any typos.

To send an HTTP GET request to the Express application, you can open the web browser and type the following URL:

http://localhost:3000/Code language: JavaScript (javascript)

And you’ll see the following message on the web browser:

Hi thereCode language: JavaScript (javascript)

To add another route, for example, /about you add a new route handler to the index.js file like this:

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

app.get("/", (request, response) => {
    response.send("Hi there");
});

app.get("/about", (request, response) => {
    response.send("<h1>About</h1>");
});

app.listen(3000, () => {
    console.log("Listen on the port 3000...");
});Code language: JavaScript (javascript)

To run the new app, you need to stop the current app and start it again.

When you navigate to the following URL:

http://localhost:3000/aboutCode language: JavaScript (javascript)

you’ll see the following content:

AboutCode language: JavaScript (javascript)

When you view the source of the page, you’ll see the following HTML:

<h1>About</h1>Code language: JavaScript (javascript)

Community convention

If you look at the code elsewhere, you’ll find the parameters of the route handlers like this:

app.get("/about", (req, res) => {
    res.send("<h1>About</h1>");
});Code language: JavaScript (javascript)

In this syntax, the req stands for request and res stands for a response. It’s a community convention to save some typing. We’ll follow this convention from the next tutorial.

Summary

• Express is a flexible web application framework for building web applications.