‫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.