Node.js and Express

What is express js ?

Express.js is a minimalist and flexible Node.js web application framework that provides a robust set of features for building web and mobile applications. It is designed to make it easier to write server-side web applications in JavaScript by providing a simple yet powerful API for handling HTTP requests and responses, routing, middleware, and more.

Step 1 — Setting Up the Project

First, open your terminal window and create a new project directory:

mkdir express-example

Then, navigate to the newly created directory:

cd express-example

At this point, you can initialize a new npm project:

npm init -y

Next, you will need to install the express package:

npm install express@4.17.1

At this point, you have a new project ready to use Express.

Step 2 — Creating an Express Server

Now that Express is installed, create a new server.js file and open it with your code editor. Then, add the following lines of code:

const express = require('express');

const app = express();

The first line here is grabbing the main Express module from the package you installed. This module is a function, which we then run on the second line to create our app variable. You can create multiple apps this way, each with its own requests and responses.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

These lines of code is where we tell our Express server how to handle a GET request to our server. Express includes similar functions for POST, PUT, etc. using app.post(...), app.put(...), etc.

These functions take two main parameters. The first is the URL for this function to act upon. In this case, we are targeting '/', which is the root of our website: in this case, localhost:3000.

The second parameter is a function with two arguments: req, and res. req represents the request that was sent to the server; We can use this object to read data about what the client is requesting to do. res represents the response that we will send back to the client.

Here, we are calling a function on res to send back a response: 'Successful response.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Finally, once we’ve set up our requests, we must start our server! We are passing 3000 into the listen function, which tells the app which port to listen on. The function passed in as the second parameter is optional and runs when the server starts up. This provides us some feedback in the console to know that our application is running.

Revisit your terminal window and run your application:

node server.js

Then, visit localhost:3000 in your web browser. Your browser window will display: 'Successful response'. Your terminal window will display: 'Example app is listening on port 3000.'.

And there we have it, a web server! However, we definitely want to send more than just a single line of text back to the client. Let’s briefly cover what middleware is and how to set this server up as a static file server!

Step 3 — Using Middleware With Express, we can write and use middleware functions, which have access to all HTTP requests coming to the server. These functions can:

Execute any code.
Make changes to the request and the response objects.
End the request-response cycle.
Call the next middleware function in the stack.

We can write our own middleware functions or use third-party middleware by importing them the same way we would with any other package.

Let’s start by writing our own middleware, then we’ll try using some existing middleware to serve static files.

To define a middleware function, we call app.use() and pass it a function. Here’s a basic middleware function to print the current time in the console during every request:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

The next() call tells the middleware to go to the next middleware function if there is one. This is important to include at the end of our function - otherwise, the request will get stuck on this middleware.

We can optionally pass a path to the middleware, which will only handle requests to that route. For example:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

By passing '/request-type' as the first argument to app.use(), this function will only run for requests sent to localhost:3000/request-type.

Revisit your terminal window and run your application:

node server.js

Then, visit localhost:3000/request-type in your web browser. Your terminal window will display the timestamp of the request and 'Request type: GET'.

Now, let’s try using existing middleware to serve static files. Express comes with a built-in middleware function: express.static. We will also use a third-party middleware function, serve-index, to display an index listing of our files.

First, inside the same folder where the express server is located, create a directory named public and put some files in there.

Then, install the package serve-index:

npm install serve-index@1.9.1

First, import the serve-index package at the top of the server file.

Then, include the express.static and serveIndex middlewares and tell them the path to access from and the name of the directory:

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Now, restart your server and navigate to localhost:3000/public. You will be presented with a listing of all your files!

Conclusion

Express.js, the minimalist web framework for Node.js, empowers developers with a powerful toolkit to streamline the creation of web applications and APIs. Its simplicity and intuitive API make it accessible to developers of all levels, facilitating rapid development without compromising on flexibility. With its middleware architecture, Express.js promotes modularization of application logic, enabling easy integration of additional functionality at various stages of the request-response cycle. This lightweight and efficient framework is renowned for its performance, ensuring fast response times and scalability even in high-demand environments. Supported by a vibrant community and a rich ecosystem of plugins and extensions, Express.js offers comprehensive documentation and ample support resources, making it the framework of choice for building modern, scalable, and feature-rich web solutions in the Node.js ecosystem.

app-generator / docs