DEV Community

Kelvin Sowah
Kelvin Sowah

Posted on

Adding Routes to an Express Server PT(1)

Welcome back readers to another one of my boring but hopefully informative blogs. This time, we'll discuss adding routes to your Express.js server so that it can accommodate various client requests. If you're interested in reading my earlier article, where I showed how to build a Node.js server using the lightweight Express.js Node.js framework, please click here.

What we learnt in the earlier blog will serve as the basis for today's blog. An illustration of what we produced for the blog described above is shown below.

express server

As you can see, we were able to develop a basic Express.js server with just four lines of code. I go into detail about what each line of code is doing and how we got here in my last blog. But enough with the past; let's go to work on expanding our server's routes.

Before continuing, I'm going to assume that you, the reader, have a basic understanding of HTTP request methods (or verbs). If not, click here and you'll be redirected to some excellent documentation that can provide you a foundational understanding of HTTP request methods.

Here is a picture of our `index.js file along with some more code.

get request

By adding one of the HTTP methods, in this example the GET method, to our app constant, an instance of the express class (line 3), between lines 7 and 9, we created a route. Additionally, our GET method expects two arguments: the route and a callback function, which holds the code to be run when the route is reached by our client.

Additionally, the callback function anticipates two arguments: the request and the response. The request is an object that often includes data that the client sends. The response is also an object that holds information and methods that helps the server return that information to the client.

In this instance, on line 8, two methods are being chained to the response object. The first method status essentially informs the client if the request made to this route was successful or unsuccessful; in this case, we were providing a status code of 200 signifying that it was successful (click here to learn more about status codes). The client might be able to present an alternative UI to the user depending on the status code received, which improves the user experience, even though the status function is not necessary.

The format of the data we are delivering back to our client is specified using the second method in our chain, which is json. In this instance, we are enclosing a message in a JSON object.

finally finished building the first Express server route. How best can we test it? Instead of creating a UI to test, we can use a tool like Postman. With Postman, you can test your server without having to make a client. If you are using VScode as your text editor, then you can use an extension in VScode called Thunder Client. Go to the extensions tab in VScode, search Thunder Client and install. We can easily test our routes with it and having the same development and test environment will save a lot of time. In this blog we will be using the Thunder Client

Below I have an image of the Thunder Client UI.

thunder client

Enter http://localhost:8000, which is the address where our server is currently active. The input field denoted by the yellow arrow must contain the url.

I have indicated where you can select the HTTP method you want to use with a purple arrow. GET is the default, therefore that will serve our purposes.

To send a request to our server, click the blue arrow-pointing send button.

The data we are getting from our server is indicated by the green arrow. If you recall, we indicated in line 8 of our index.js code that we needed a JSON-format response and an object to be returned with the message "Hello World!" We did indeed receive that information back.

After testing our server, we can say that both it and the first route we built are working properly. I'll demonstrate how to build routes that use the POST and DELETE HTTP methods in a later article.

I appreciate you reading, and I hope this article helped you understand how to add routes to your Express server.

Top comments (1)

Collapse
 
ethel3 profile image
Ethel Akrasi Akosua

Insightful piece πŸ‘