Getting started with ExpressJS

Please get in touch with your teacher or tutor in case you have a question related to this lesson

In this chapter, we will create routes for different HTTP methods, this is a core functionality Express offers. We all know that the core HTTP methods includes a GET, POST, PUT and DELETE. Where GET method is used to read data from server, POST method is used to push or create data at server based on user input, PUT method is used to update data at server, and last DELETE is used to delete data at server.

PUT and DELETE are used, if you are building some sort of client for a REST API. But in other cases GET and POST are just good enough. Frameworks like ExtJS, jQuery all support such requests from JavaScript client. PUT can also be used to create a resource if resource does not exist on server. In combination, these verb methods are also known as CRUD, that is, Create, Read, Update and Delete.

Let's check how we can handle such requests with Express library. We have already seen GET request handler in previous video, let's create our get method again. All I am doing here is to add a GET request handler for the website home page, and rendering my template, index.jade, and passing it a variable post param. In my index.jade view, I will do a couple of things.

First, I will output value of postparam variable, which takes its value from a global variable with same name, global postparam variable will be initialized on form POST.
Second, I will add a HTML form, and add method as POST, I will not specify action URL because I want to receive the post request on current URL. I will add a text input field with name postparam, and a submit button.

In my app.js file, I will add another line to listen to requests on post 3001. After this, I am going to start my App with nodemon. Now when I goto my localhost URL with port 3001, I see my form shown. When I do some code inspection, I see that everything is as I was expecting.

Now let's go back and add a POST handler for form submission. I will use the POST method available through Express app, This handler routes HTTP POST requests to the specified path with the specified callback function. Our callback function takes request and response as parameter. Here we initializes postparam variable with value of our text field. Request body contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware. We will cover middleware in another screen cast. But for the time being let's see how to use body-parsing middleware to populate req.body.

We will include body-parser module to our app using require method, then we will install body-parsing module using NPM, please note that because we are using nodemon, the change we made before in the code will produce an error. After installing body-parser module, we can restart our app with nodemon.

In out script, I will add a redirect call to home page path, which in fact will call our GET handler. Before we go any further, we also have to tell Express to use body-parser module, we can use USE method to do that.

Now when I go back to my browser and refresh it, and add string "hello" to the input field, and press ENTER!, this will print hello within h2 tags at the top of the page.
Similarly you can use PUT and DELETE methods, as said before, PUT and DELETE are not commonly used, but you can use them if you are creating some kind of REST API for your clients. We will not cover these methods in detail here.

Next things I am able to show you is an app.all method. All method matches all HTTP verbs, that is, GET, POST, PUT and DELETE.

It’s really useful for mapping "global" logic for specific path prefixes or arbitrary matches. It is really handy to put some Authentication and logging info for different request paths. In this method, I am just sending "catch all", to the response stream using send method. When I refresh my browser, you will see that "catch all" gets printed, however subsequent routes has not been hit. For that to happen, we have to use the third parameter within all method's callback function. The third parameter is the next function we want to call, or if there isn't then next method will pass on the control to next handler method in the request stack. In our case its the GET handler for homepage.

When I refresh my browser now, I see that it nicely outputs my form, and also print a log message on my console. Whenever a new GET request or POST request is received, this log message is repeated, telling us that all is being executed for all verb methods.

Verb method does have their own multiple callback functions, that behave just like middleware, except these callbacks can invoke next method to bypass the remaining route callbacks. This mechanism can be used for logging or many other use cases. In my verb middleware, I am just printing, "In get function", this message will be printed on my console every time a GET request is handled for a path. On browser refresh! I see that this message gets printed on my console.

I can also take this function out and use it with multiple verb handlers, In our example, let's create a CB function and add it as second parameter to our GET and POST handler functions.

On different verb requests, different message will be printed as you can see.

In next part of this course, we will learn about some important application settings.