WittCode💻

Node and Express - Introduction to Express

By

Learn everything about Express in this Node and Express tutorial series. This video goes over what Express is and how to set up an Express application.

Table of Contents 📖

What is Express?

Express is a popular Node web framework with millions of downloads each week. A web framework is software designed to make developing web applications easier. The popularity of Express comes from its easy routing, support for view engines, flexibility, plugability, and much more.

Installing Node and npm

To begin using Express, we must have Node and npm installed. We can confirm that Node and npm are installed by opening up our terminal and running the following.

node --version
npm --version

Image

If Node and npm are not installed, then Node can be installed at https://nodejs.org/en/download/. Installing Node will also install npm.

What is npm?

Npm stands for Node Package Manager and it is a package manager for Node. This means it has a collection of packages of open-source code for the JavaScript community. The package manager npm allows us to access these packages and install them on our machine. The package we want to install is Express.

Creating our Express App Directory

Before we install anything though, lets create a folder called my-express-app that will be used to hold our project for this series.

mkdir my-express-app
cd my-express-app

undefined

The first command, mkdir, creates a directory/folder named my-express-app. The second command, cd, stands for change directory and it moves us into this my-express-app folder we created.

Initializing our NPM Project

So now that we have our project structure set up, we need to create a package.json file using npm. A package.json file lists the dependencies our project depends on, records important metadata about our project, houses scripts, and much more. It can be created by running the npm init command. We also supply it with -y which means use the defaults. We need to make sure we run this inside the my-express-app folder that we created.

npm init -y

Installing Express

Now, when we install Express with npm, it will be recorded in our package.json file under dependencies. So lets install Express really quick.

npm install express

As a quick side note, we might see "npm install express --save" in certain tutorials. It should be known that as of npm 5.0.0, installed modules are added as a dependency by default (which is what --save does), so tagging on --save isn't necessary if the version of node we are using is 5.0.0 or greater.

Installing Nodemon

There is one more package we should install from npm to make this tutorial series easier, and that is nodemon.

npm install nodemon

Nodemon is a tool that restarts our server automatically whenever we make a change to one of our files. If we didn't use nodemon, then after each change we would have to kill the node process in the terminal and then run the application again with node <application_name>.

Image

Requiring Express

Now we can start coding! To start, lets create a file called index.js in our project directory (my-express-app). Then, at the top of this file lets require express.

const express = require('express');

This imports Express into our file, index.js, and now we can access it through the variable express.

Creating an Express Application

Something that might seem confusing is that "require('express')" actually returns a function. We then execute this function which creates a new Express application.

const app = express();

So calling express() creates an Express application and we then capture this Express application inside a variable called app.

Adding a Route to Our Express Application

Next, we need to add a route to our Express application. We will be learning a lot about routes as we continue this series.

app.get('/', (request, response) => {

});

What this code does is respond to a user request to the route "/". As our application is hosted on localhost (and port 1234 which we will see soon), this route specifically waits for a request at localhost:1234/.

When a request is sent to that url, the callback function (the second argument in app.get) is executed. What this callback function takes is two parameters: the request and the response (though these can be named anything we want e.g. cheese, pizza). The request is the HTTP request that our Express application received from the client and the response is the response that our Express application will send back to the client after it receives the HTTP request.

One more thing to note is that app.get means that it will respond to a HTTP GET request. A HTTP GET request is used to get data. Here, this is the data at webpage localhost:1234/. There are a few other HTTP methods that we will learn about in this series.

Sending a Response to the Client

When the client sends a request to localhost:1234/ we want to send back a response. To do this, we use the method response.send. What this does is send whatever is passed to the client requesting resources from localhost:1234/ which in this case is the string "Hello world!".

app.get('/', (request, response) => {
    response.send('Hello world!');
});

Binding our Express Application to a Port

The last thing we need to do now is have our Express application listen on a specified port number.

app.listen(1234);

This binds our express application to the port number 1234. In other words, our Express application is sitting at localhost:1234. Really quick, a port number is used to identify a process. Our localhost machine will most likely be running quite a few processes at once, so providing the port number 1234 allows our machine to identify that data sent to port 1234 is to be used by our Express application.

Running our Express Application

To test the application we just need to type localhost:1234/ into our browser after running our application with nodemon.

nodemon index.js

Image

Summary

But there we have it! We have made a very simple Express application that listens and responds to user requests at localhost:1234/. In the next article we will be going more in depth into routes. If you enjoyed this article please consider donating at the top of the page so I can continue making content like this!

Node and Express - Introduction to Express