Original subtitles

Now in the last lesson, we set up and we started our server, and our server was listening on the port

3000 for any browsers who are trying to get in touch with it.

Unfortunately we got an error, where our browser said, “I got in touch with your server at this location

3000, but I couldn't get anything back.

I can't display you anything because your server isn't giving me anything to display.”

So that's what we're going to address in this lesson.

Now, what you have to imagine is that this localhost:3000 is basically the same as the route of any web

site.

So it's the home page.

It's the equivalent of going to google.com,

right?

But in this case our domain is simply called localhost:3000.

So this / just represents localhost:3000/, which is the route, or the

home page, of our web site.

And, again, if I transform it to www.google.com/, then this will go to the home page

of Google, and that is what we call the route.

So when we load up a web site, say google.com, then our browser will send a request to Google's servers

to get some data for this location, and Google servers, when it sees that request, it will send our browser

a response, and that response includes the HTML, the CSS and the Javascript that’s needed to render

this web site.

Now, our server is currently not sending anything back when our browser makes the get requests.

So let's change that. Just above the app.listen, we're going to say app.get.

And this is a method that's provided by Express that allows us to specify what should happen when a

browser gets in touch with our server and makes a get request.

Now the first parameter it takes is the location of the get request.

So when we type localhost:3000, the get request is being sent to the route of our web site, which

is represented by a forward slash.

So this is basically our home page.

Now when that get request happens, we can trigger a callback function, and this callback function can

have two parameters: request and response.

So this method, app.get, defines what should happen when someone makes a get request to the home

route.

So that's the first parameter.

And then there's a callback function that tells the server what to do when that request happens.

So let's printout this request object that we get when the callback gets triggered and see what it looks

like.

So I'm just going to console.log the request, and I'm going to hit save l, and I'm going to terminate my

server by hitting Control C, and then I'm going to restart it by saying node

server.js,

with the changes that we've implemented in here.

So now let's head over to our browser and we're going to hit enter on localhost:3000 again, and you'll

see that we've got the same errors, but this time when we look inside our console, you can see that there's

a whole bunch of information that's packaged into this request which is being logged.

And this is all of the information that's associated with the request that was made to our server.

So, for example, you can see that my browser accepts the following languages, and these are the languages that

I'm happy to read, for example simplified Chinese or English.

You can also see other things such as what was the URL that I accessed when I triggered this request,

and it's got so much more information all about that request that was made to the server.

Now the second object here is the response.

This is the response that outcome server can make when the request gets triggered at this home location.

So currently our server isn't responding with anything,

and that's why we're getting this error over here.

In fact, Chrome actually tells you that localhost didn't send any data,

it’s got an empty response. So let's change that.

Let's actually give it a response. So we can tap into the response object, and we can use the send method

to send a response.

And we’re simply going to send back “Hello”. And now if I go onto the command line, I quit the previous server

session, I've saved the new code, and I run my server again, this time when we head over to localhost:3000,

you can see that we see the word ‘Hello’ in our browser.

And that's because when we typed in localhost:3000, we specified a location of a server.

So when we hit enter, the browser will go to that location and make a request to get some data back.

And when that request gets made at that home location, then this callback gets triggered, and we send

the browser a response, which is just the plain text of ‘Hello’.

Now that gets sent back to our browser and it renders it on screen.

So you don't have to just send plain text.

You can actually send HTML.

So let's try sending an h1

in this case. Let’s say ‘Hello, world!’

And this is just h1 that's wrapped inside some quotation marks that we're going to send as our

response.

So now if I hit save, I quit my server again, and run my server with the new code.

And now we go to localhost:3000, we get the h1 being sent back with ‘Hello, world!’

Now, in most cases, when people are working with Express and Node.js, you'll see these two parameters

shortened.

So, as we talked about before, instead of saying event you can say evt, or e, because you can specify

whatever you want for these names.

But usually what you'll see is req for request and res for response.

And that just makes it short but understandable.

And this is basically best practice for working with Express, and this is what you'll see out there when

you find other people's code and they are creating their Express servers.

Now there is quite a lot of new information in this lesson but a lot of it depends on the understanding

of how callbacks work.

And so if this is at all confusing, then I recommend you to take a look back at our previous module where

we talked about Javascript callbacks and higher order functions.

So I'll post a link to that in the resources of this lesson just so that you can remind yourself of

how we're able to provide an input into this callback function and how this input can get sent back

to us when this callback is triggered.

And it's a really good idea to create this yourself, mess around with it and send different responses,

or log the requests, and just make sure that you're comfortable with this syntax and how it works.

Now in the next lesson, I'm going to show you how to create other routes other than just targeting the

home page, so we can start creating a multi page web site really easily by adding more lines of code

into our server.

So for all of that and more, I’ll see you on the next lesson.