express logo

How to handle Requests and Responses in Express: Part 2

If you need to know how to make an Express server first, you can view that article here.

You have a running server, but when you type localhost:3000 in your browser, you get Cannot GET /. How do we write code so that our server responds when a browser makes a request to the server? We have to send the browser some information. Here’s how we handle requests and responses.

Recap

We are going to assume your server is created, and working, from the above mentioned article and your project folder contains a server.js file, package.json, and Express is installed which gives you a node_modules folder. Your server.js file should look like this below and this is what we will build from.

//jshint eversion:6

const express = require("express");

const app = express();

app.listen(3000, function(){
    console.log("Server started on port 3000");
});

Helpful Tip

We will be using node server.js a lot more often than in part 1 to refresh the server. If doing that becomes too tedious for you, follow this guide here to install Nodemon which will automatically refresh the server for you after each save. If you do this, then everywhere it says control+c or node server.js in this article, just ignore it because Nodemon is doing that work for you. All you will have to do is refresh the browser when necessary.

GET Request

As of right now, our server isn’t sending any information back when the browser makes a GET request, so let’s change that. Under const app but above app.listen, add app.get().

This is an Express method that lets us specify what should happen when a browser makes a GET request with our server. The first parameter it gets is the location of the GET request, which is the root. Root is represented with /.

app.get("/")

When that GET request happens, we can trigger a callback function that has two parameters, request and response. Majority of the time, you will see them shortened to req and res.

So instead of this:

app.get("/", function(request, response){

});

Make it this:

app.get("/", function(req, res){

});

If you’re curious to see what request does, you can console.log it inside app.get and run node server.js in your terminal while cd’d in your project folder

app.get("/", function(req, res){
    console.log(req);
});

With this you see all the information request is getting from the server. You can control+c to get out of that.

Now response is what you will see on the frontend of your localhost:3000. So let’s try that now. Remove that console.log(req) and add this instead.

app.get("/", function(req, res){
    res.send("Hello World!");
});

Now let’s save and in your terminal type in node server.js again then check your localhost:3000 browser. Do you see “Hello World!”? Great!

Now let’s try something else. Did you know HTML works in here as well?

app.get("/", function(req, res){
    res.send("<h1>Hello World!</h1>");
});

In your terminal, control+c to quit, then node server.js to restart, then refresh your localhost. Boom, h1 “Hello World!”. There you have it. You just added requests and responses so your server can talk to the browser.

If you want to learn how to navigate to other routes or link up your index.html file, click here to read about that.

Hopefully this has helped someone to become 1 step closer to becoming a better developer.

Leave a Reply