Getting started with ExpressJS

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

Express JS is full of great features, creating routes to manage URLs is one such feature. Routing refers to decision making on how an application responds to a client request for a particular endpoint, an endpoint is a URI, and a specific verb method GET, POST, PUT etc. Each route we create can have one or many handler functions, which is executed when the route is matched. So Let's get the ball rolling and try to understand how we can utilize routes. I'm going to start by modifying my application, to create my first route, this route available is the root route. I can also label it as a home page route to the website. All I am doing in this first route is to output, "hello express"!.

I will also add a port listener to begin accepting connections on port 3001, In the callback function after successful port binding, I can output a message to my console confirming which port my application is listening to. I will now save my application and run it by making use of nodemon. When I launch my browser, I can see that "hello express" gets printed.

Let's get back to the code editor and create another route. This time I will just copy my existing home page route and change the route path from / to /blog/, followed by a colon and articleID param. Here :articleID is name of a parameter, which will hold a value passed on through the URI. I can now just output value of articleID to my browser using response send method. Thing to keep in mind is that express creates an object params under request object, which contains properties mapped to the named route “parameters”. Thus articleID can be accessed as a property under params object. Let's save this file and go back to chrome browser and refresh our page, nothing happens! but let's update the URI to blog followed by some ID, In my case I will add 123 at the end and press enter. See! 123 get printed nicely at the end. Thing to note here is that articleID is mapped to the route part.

To further clarify router parameters concept, I will add another route which will handle another parameter, title. To do that I will copy my previous blog route and add colon title to the route. This means that the second param will automatically be mapped to title if provided, else previous route will be used. I will add title to the output string that response sends back to the browser. Let's do a bit of formatting here so that everything I did is visible. In chrome browser, when I refresh my existing URL, title string will not be printed because our previous route was used, but let's add "hello subject coach" at the end of our URL and hit ENTER. Our new route will now be hit and title will print nicely.

One more thing I would like to add here is a catch all route, which is represented by a star. Let's copy our previous route and replace the route string with a star. Also we will send a message back to the browser, telling that address cannot be found. Now, When I launch my browser and add something at the end of the existing URL, this will make sure that none of the previous route gets hit and catch all route returns what we expected to see. Please note that catch all should be added at the end of all route handlers, because requests are handled from top to bottom, and if you add catch all route at the top, none of the routes below it will be hit.

Next thing I would like to show you in this video is, the use of param middleware. Param middleware takes 2 parameters, first one is just the name of the parameter, and the second one is the callback function. The parameters of the callback function are the request object, the response object, the next middleware, and the value of the parameter, in that order. All I am doing in this middleware is to get the parameter title, convert the string to uppercase, and add it back to the request object. I am now able to access title directly from the request object and do not need params property of request object to access it. Once done, I can add a call to the next middleware in the request stack. When browser is refreshed, I can see that the title is converted to uppercase. More practical use of param middleware is to make available some information across multiple routes that share same parameter, such as filling the content of blog article or add user data picked from database to the request object.

In the next video we will learn how to modularize your routes.