{ Introduction to Express.js. }

Objectives:

By the end of this chapter, you should be able to:

  • Understand what express is and how to create a simple application
  • Listen for requests and send responses using express
  • Collect data from a URL using request.params

Express JS Introduction

So far we have seen how to run node programs, create our own modules, and install external modules using npm install. Let's now move onto using the express.js framework to build server-side applications with ease.

We previously saw the core HTTP module which allows us to make requests and issue responses, but we also mentioned that using the HTTP module requires a fair amount code and complexity. Thankfully express abstracts away much of this complexity. So let's get started with it! In the terminal, let's type the following:

# create a folder and cd into it
mkdir first_express_app && cd first_express_app
# create a file called app.js (doing this before npm init is important, we will see why later!)
touch app.js
# create a package json file 
npm init -y
# install the express module and save the module name and version to our package.json so that when we work with other developers they can easily install all of our dependencies
npm install --save express 

Inside of our app.js let's add the following:

// require the express module
var express = require("express");
// create an object from the express function which we contains methods for making requests and starting the server
var app = express();

// create a route for a GET request to '/' - when that route is reached, run a function
app.get('/', function(request, response){
    // inside of this callback we have two large objects, request and response
        // request - can contain data about the request (query string, url parameters, form data)
        // response - contains useful methods for determining how to respond (with html, text, json, etc.)
    // let's respond by sending the text Hello World!
    response.send('Hello World!');
})

// let's tell our server to listen on port 3000 and when the server starts, run a callback function that console.log's a message
app.listen(3000, function(){
    console.log("The server has started on port 3000. Head to localhost:3000 in the browser and see what's there!");
});

Now let's start the server using node app.js and head over to localhost:3000. To stop the server press control + c. Remember that when the server is running, you will not be able to type commands in that tab in the terminal. If you want to run other command line commands, open a different tab.

nodemon

Nodemon is very useful for restarting the server when it goes down so that you don't have to manually restart it yourself. To install nodemon type the following command anywhere in the terminal npm install -g nodemon if you are getting errors when installing this, you can use sudo npm install -g nodemon and type in your password and press enter to install it. (If you need to use sudo you've got a permissions issue with npm; follow these instructions to fix the problem.) To start the server now you can use nodemon app.js.

url parameters

So far we have just seen how to build static routes, but what makes server-side programming so powerful is that we can create dynamic responses based on the type of request. This is how applications can have one single route that provides many different kinds of responses depending on the data that is passed in the URL. Dynamic values to be passed in the URL are called "URL parameters" and are stored in the params object which exists in request object given to us in our callback functions.

To specify that a part of a URL will be a "parameter", we add the : character and then give our URL parameter a name. This name will be the key in the params object. Let's see what that looks like below. It is also important to note that all of our URL parameters are strings! Let's take a look at an app.js file that has a route with URL parameters (notice the :)

// same pattern as above, require express, invoke the express function
var express = require("express");
var app = express();

// same as above, listen for a GET request
app.get('/', function(request, response){
    response.send('Hello World!')
})

// when a request comes in to /instructors/ANYTHING 
app.get('/instructor/:first_name', function(request,response){
    // let's capture the "dynamic" part of the URL, which we are called "first_name". The name that we give to this dynamic part of the URL will become a key in the params object which exists on the request object.

    // let's send back some text with whatever data came in the URL!
    response.send(`The name of this instructor is ${request.params.first_name}`)
});

app.listen(3000, function(){
    console.log("The server has started on port 3000. Head to localhost:3000 in the browser and see what's there!")
})

To run this application we can either type node app.js, but if we need to make any changes to the file we would need to restart the server to see this change. Thankfully we have nodemon to help us manage starting and restarting the server when a change happens, so we can type nodemon app.js or just nodemon and our server will start!

Now if we head over to localhost:3000/instructor/elie and then localhost:3000/instructor/matt and then localhost:3000/instructor/tim, what do you notice? Even though we created one single route, we can now issue different responses depending on what the user has typed in the browser! This is the foundation for how to build dynamic applications (the url parameter could be a value we look up in a database to display different profiles for the same route). It is also important to note that ALL URL parameters are strings, so if we try to work with anything inside of request.params, it will always be a string.

Sample App

You can see an example of the code here.

When you're ready, move on to Templating with Pug

Continue