Original subtitles

Welcome back.

Let's now finally set up Express,

create a simple server, and do some basic routing

just to get an initial feeling

of how we actually work in Express.

And so in this video, we're actually gonna start working

on the natours project, so the big main project

that is part of this course.

So just like before, please go ahead

and get the starter project from the course files.

I already have it here.

I have it opened up in my VS code.

Let's take just a very quick look at what we have here.

We have the prettier configuration file

just like we set up like before.

I also have a config file for ESLint,

and ESLint we haven't set up at this point,

but we're going to do that

also later in this section.

For now, I just want to start coding

and not worry about linting our code.

Linting is just to fix some errors.

But again, we're going to do that later.

Here we just have some files for later,

like css, images, okay, and now also for example,

some data that we need to build our application.

Again, we're going to start using this data here

throughout this section.

Anyway, we now have a brand new project.

The first thing that we usually do with a new project

is to create the package.json file,

just like I mentioned before.

We did that in the nodefarm project,

and now we're going to do that here as well.

I open up the integrated terminal.

You can do that by hitting this shortcut here

or just come here to View and then Terminal.

Let me put it up a little bit so you can see it.

Remember the command is npm init.

We gave a name to the project.

It's called natours.

Oh okay, it cannot have any capital letters.

Let's do that again.

The version is one, description, let's just say

learning node, express, and mongoDB, mongoDB.

Entry point, index.js, well actually,

we're going to use app.js now.

Let's call it app.js.

We have no test command, no git, no keywords,

author is me, and that's it, so okay.

Here we have package.json.

Just like before, nothing new here.

Now it's time to install Express.

Npm I express.

I'm going to use Express for here,

which is at the point of recording,

the latest version, but for some time,

the Express team has been working on version 5.

That is a major version which could introduce

breaking changes if you installed that one.

Now, there's actually not a lot of stuff

changing in version 5, but to make sure,

please install Express at version 4 just like I'm doing.

In order to do that, just hit at 4.

That will then install the latest version inside of 4

with the latest minor and patch versions, so 4.16.4.

That's the version that I'm using now

in this course, and yours will probably be

a later version, but as long as you have the 4 here

in the beginning, you should be fine.

You see that it actually created

our node modules folder over here.

Now, we're ready to start.

I'm creating a new file and it's called app.js.

It's kind of a convention to have

all the Express configuration in app.js.

That's what I'm using here now.

We have now the warning

that it can't load ESLint.

Again, we're going to configure that later

throughout this section.

So, let's now use Express.

I'm going to require of course, the Express package.

Nothing new at this point.

Give it a safe.

You see that preview already did its magic here

by adding this semi-colon and also adding

this new line down here.

We have Express imported, and now what we do

is to create a variable called app.

Again, that's kind of a standard.

So app and assigned result of calling express.

That's actually it.

This here is a function which upon calling

will add a bunch of methods to our app variable here.

The first one that we're going to use

is actually app.listen to

basically start up a server.

That is a bit similar to what we did before

with the http package in the previous sections, right.

So again, keep in mind that Express

is 100% no js under the hood,

and some of the things work

in a very similar way here in Express.

All right, again, it simply makes our lives

a bit easier by taking some of

the complexity away from us.

Just like before, into app.listen,

we paste in the port.

Let's actually create a variable for that here before.

Port and let's say 3000 for now.

We're going to change that a bit later.

We paste in the port and a callback function.

Again, this is the callback function

that will be called as soon as

the server starts listening.

Let's simply do a console.log here,

app running on port.

All right, so that is our server

now actually already listening.

Now what we need to do next is to define route.

And once more, we actually already

kind of defined routes before

in the nodefarm project, remember that,

but it works very differently with Express.

Remember that routing means basically

to determine how an application responds

to a certain client request, so to a certain URL.

And actually, it's not just a URL

but also the http method

which is used for that request.

Remember that from the http lecture that we had before.

How do we do that?

Well, it's very simple in Express.

All we do is app, then the http method

that we want to respond to,

and let's start with the simplest one

which is get, and then the URL.

We're just specifying the kind of root URL here.

Again, the route is basically the URL,

which in this case, is just this root URL

and also the http method, which is get in this case.

Now, what do we actually want to happen

when someone hits that URL with a get request?

Well, whatever we want to do,

we need to specify it in a callback function,

which we specify as the second argument.

We have a callback function

just like this, and this callback function

can accept a couple of arguments.

The most basic one, and the ones that we usually

always need are get request, entity response.

In that regard, it is again very similar

to what we did before in the nodefarm project.

Back then, when we started our server,

we also had access to the request

and to response object.

Now, they are a little bit different here in Express.

They have a lot more data and methods on them,

but the idea is exactly the same.

So you see that Express apps

and so also node apps for that matter,

are all about requests and responses,

simply because that is how the web actually works

just as you learned in the previous sections.

What do we want to do now?

Well, all we want to do is to send

some data back very quickly.

We can use the response object

and from there, we can use the send method

and specify something that we want to send back.

Hello from the server side.

Just some string again that we want to send back.

We can also specify the status code

and that's very easy.

All we have to do is to before we actually send

the string to the client,

we just add status before that.

The status method, and in here,

we specify our code.

And again, we're going to use 200 for okay.

That's actually all we have to do.

Let's very quickly test this out

and then add some more stuff to it.

Let's use nodemon app.js.

Let's see what happens

and our app is running on port 3000.

Great.

And how do we now test this API?

Well, that's why we installed Postman.

Let's open up Postman.

Actually it's still here from the last lecture.

Let's go ahead and delete this

and write the URL, or actually, the IP

for local host and then our port.

That is exactly the same as we did

in the nodefarm project.

We're hitting just the root.

We can write the slash or it works

just the same without anything.

Let's send this and indeed, here we go.

Hello from the server side.

That's amazing, it already works.

Just to make sure, we would of course

get the exact same result in a browser.

If I copy this here, you will see the same result.

But again, we're going to use Postman

because it makes all this API testing a lot easier for us.

You will see, once we really start using

more and more features of this great application.

Now, going back here, let's add some more stuff

because send simply sends this string here

back to the client, but it's also very easy

to send json to the client.

Instead of using send, let's actually use json.

The json method, and then in here,

we can paste in an object.

Let's do it like this.

Let's say this is the message.

And then just some other field here, natours.

Okay, and now you see, that preview here

auto-formatted this for us

and they also want this in another line.

Ah okay, we're missing a comma here of course.

But the preview extension still put it

up here for some reason.

But of course, that doesn't really matter.

It's just a matter of formatting.

Let's take a look at what happens now.

Now we have our nicely formatted json here.

Gives us all these different colors here

for the keys and for the values.

Here we have the status codes.

Here we have the time it took to do this request.

We also have the size of the response.

We could, for example, change the code here very easily.

404 is not found, remember.

Do it again, and then here you see, 404, not found.

That's the kind of stuff that

Postman is really great for.

Let's actually increase the size of all this.

Let's now continue, just add something else here.

Just something very easy.

Remember, all of this is just to test it out,

to get our feet wet, and start getting

a little bit of experience.

Remember that this here is the http method for the request.

This response that we're sending here,

so this one here, is only sent

when this get method is sent to our server on this URL.

Let me actually show it to you.

If we do, for example, a post.

That's very easy again with Postman.

If we do a post, then we will not get anything.

Instead, what Express automatically sends back is

this html here which says cannot post

and then with a 404, not found.

That's because we don't have any route defined

for this URL and for this http method.

Let's now very quickly do that.

So post, we want the same URL,

the request and the response object.

Let's simply say res.send,

you can post to this endpoint.

Just so you see that this is how

we send different responses for

different http methods in the request.

Let's run that again, and indeed,

you can post to this endpoint with a 200 status code.

This is actually the default one

when we do not specify any in our codes.

Here we have 404 which is not correct.

But again, 200 is actually the default.

Another quick thing that I want to show you

is that by using this json method here for example,

this will automatically set our content type

to application json, so remember that

we did that manually in the nodefarm app

when we created our very simple API.

Back then, we also sent back some json,

but we then had to manually define that

the content was json so that the browser knew

what it was expecting.

But Express takes that work away from us.

Let's actually check that.

Going back to get.

Here we have our result headers.

Here you see that the content type

is indeed set to application json.

Express then also automatically sends

a bunch of other headers, for example,

this powered by Express or the date or the connection.

But again, we're going to take more care

of headers a bit later in the course.

This was just a very small and simple example here,

but you can already start to appreciate

how much easier it is to do this kind of responses.

To create this route in order to respond to client request,

in a much easier way than in just plain node.js.

With that being said, in the next video,

we're going to learn all about building APIs

using the rest architecture, so that after that,

we can finally start building our API.