API Design in Node.js, v3 Setup Code & Express

Transcript from the "Setup Code & Express" Lesson

[00:00:00]
>> Scott Moss: So if you head over to the repo, you cloned it. Go ahead and open it up. And you're gonna see a whole bunch of stuff in here. So I did a lot of hard work in here for you all so you don't have to. Cuz I really want us to focus on the API and not focus on setting up and stuff like that.

[00:00:16] That's kinda garbage. So I did all that for you so you don't have to worry about it. But mostly what we're going to be doing in this course is as we go through these different concepts, you're going to be doing an exercise that kind of relates to what I just talked about.

[00:00:27] And progressively you're going to be building out a full API. But half of the API is there, half of it's not. There's some tests that you have to get to pass. So it's going to be your goal to complete this API, get the test to pass and ultimately have an API that's actually working at the end of the course.

[00:00:41] And we're gonna be going through the progression of the topics that I talk about in the slides. So right now, what you should have is, if you check out to the lesson 1 branch. So if you just do a git checkout. For me, I have a shortcut like this.

[00:00:57] Lesson 1 I'm already checked out to it. That's where we wanna start with this one. So definitely do that. If you read the README, I talk about how those branches work, but basically, for every lesson that I teach, there's gonna be a branch and a solution branch for it.

[00:01:14] So you always want to check out to the one that doesn't have solution on it. So in this case, check out to lesson one, which is gonna be the starting point for this lesson. And then when we go over the solution, you can follow along to my solution or keep your solution.

[00:01:28] Or if you didn't get it done or you just wanna use mine, you can check out to the solution branch. It's your call. But that's where the solution's gonna be. So for this lesson, just check out to lesson 1 and we'll get started. I'll just give you a tour of kinda what's going on here.

[00:01:40] So we have all these files here. Like I said, we have set up. Some prettier things to automate, or formatting of our code, if you have the plugin set up on your editor. And then there's a source folder, and there's a lot of stuff going on in here.

[00:01:54] But what you're going to be doing for this exercise is, if you go click on the server.js, file, you're gonna see some stuff you've probably never seen before. There's some express stuff in here, and some other weird stuff. You're gonna be working in here, but let's just continue going.

[00:02:12] This project is set up using Babble, so you'll see some ES6 stuff, like imports and the froms and the exports. That's because we're using Babble to transpile this, so when you run the command then I'm going to show you the package.json to start the server. It's going to transpile it to a disc, and then we're gonna execute it from there.

[00:02:31] So all these files in the source folder aren't being executed, they're being transpiled, and it's gonna execute it in another dist folder. And I did that because I just wanted to use the ES6 though. I can't write code without it anymore, so I tried it and I was like I'm just not gonna do it, I just can't, I can't go back.

[00:02:47] So I'm sorry, you guys gotta deal with the Babel stuff. Okay, cool, so what I'm gonna do is I was gonna just free hand some code here to get us warmed up in and a little knowledgeable about express. Because this first exercise you're just gonna build a hello world, welcome to express application.

[00:03:04] And that kind of just does the very minimal. But first I'm gonna show you some of the things in express that you can do. And then later on the course we're gonna go into detail about every single thing that I'm showing you here. So this is just a primer just to get you to get something going.

[00:03:19] Just to see what's happening and then give you some context and some questions to ask me later as we get more detailed. So if you want to follow along, feel free, but I'm gonna let you loose to continue this as well. So if we look at the README, we'll see that in lesson one, you've got a couple things you gotta do here.

[00:03:39] First thing is, install dependencies with yarn. I prefer to do it with yarn because I lock the versions with the yarn lock. So that guarantees you'll always have the right versions, because we've had problems in the past with the course where the dependencies would get updated, and then the repo would get broken.

[00:03:55] So if you use yarn, you'll have the locked versions. NPM does locking as well, but I didn't set up the locking file with NPM cuz I don't like NPM. [LAUGH] So yeah I prefer to use yarn, but you can also use npm. So install the dependencies. The second thing you're gonna do is you're gonna create a route that sends back some json.

[00:04:13] You have no idea how to do that. So I'm gonna show you how to do that. And then the third thing from there is you're gonna create a route that accepts json and just logs it. And then just sends back a response. And then the last thing is you're going to start the server.

[00:04:27] That's what you're going to do for this exercise for Hello World. So now I'm going to show you how to do some of those things. And again, this is just an overview of how to get started with Express, and we're going to go into more detail about these things throughout the next lessons.

[00:04:40] I promise we're going to cover this stuff right here, like this app.use and stuff like that. Don't worry about that right now. We're gonna cover it, it's just here to get you to ask questions. But the first thing that we had to do was install the appendices, so if you haven't done that already, just go ahead and do that.

[00:04:55] You can just run Yarn or NPM Install. I already had mine installed so I'm just gonna continue. The next thing we're supposed to do is create a route that accepts json. So there's so many ways you can do that, but I just want you to get familiar with using some of the route matchers and verb combinations with express without going into too much detail.

[00:05:17] So in this case, I'm gonna use this app object here that's created from express. That's right here, app is express. And if you have VS code or anything like that you might see some auto complete here, but I wanna be able to get some json, so I'm just gonna use this app.get.

[00:05:34] And get is short for the verb get. In HTTP you can do a get request, or if you type in your browser and you go to Google.com and you hit Enter, that's a get request. So this is what we're allowing our server to register for, a get request.

[00:05:48] So I just wanna do a get request to this route, which is basically the index. So I'm gonna say when a get request comes in for this route I want you to do something. So I'm just gonna register a callback function here. This is the function that I want to run when a GET request comes in.

[00:06:07] This function is called a controller. We'll talk more about that later. And it always receives three arguments. A request. And a response, and then a next function, but we're not gonna use that next function. So we gotta request and response. In Express we always use a short head in req and res.

[00:06:24] So req for request, res for response. And then we're supposed to send back some data, some JSON. So I'm just gonna say, response, cuz I wanna send something back so I'll use the response. I was gonna say .send and I'm just gonna send back some data like hello, boom.

[00:06:49]
>> Scott Moss: And then the next one is we're supposed to receive some data and then just log it. So what I'm doing here, is I'm going to do the opposite of a get where I want to send some data to a server. There's a lot of ways to do that but most of the time when you want to create something as far as CRUD goes, you use a post request so I'm going to say app.post to the same URL because remember, the URL is going to be the same if the verbs are different because the matchers are on a route verb combination, and not just a route by itself.

[00:07:16] Right, if it was just routes by itself, then verbs wouldn't matter. So although this is the same route as the one above it, it's a combination of the route and the verb, and because the verb it different, it's post and not get, this will match a different route.

[00:07:27] So I wanna be able to do a post, so I'll say request response. And in this case, you can just be guaranteed that the data's going to be on the request.body. So I'm just going to log that. And we'll talk about that later. So I'm just going to log request.body.

[00:07:49] And I'm just gonna just send back a message that says OK. And that's it. So now we have our request that sends to json. We have our request that locks iming JSON. And the last thing we need to do was start the server. So we have this function down here called start.

[00:08:10] So inside of this function we can go ahead and start the server, which is pretty simple. We can just do app.listen and then pass in a port. So I'm just gonna put it on port 3000.
>> Scott Moss: And just log a message when that happens, server is on 3000.

[00:08:31] So if you don't know anything about ports and how that stuff works, basically this is going to connect to local host on your machine on the port that you pass in and that port needs to be open on your machine. If it's occupied by some other program or service that's running in the background, you'll get an error saying it couldn't connect.

[00:08:48] So just pass in a different port. 3,000's a very common one so if you get that error that's why. It will literally say, could not connect you get an error connect or something like that. Cool and the index ijs which is already there for you. There's like a start function.

[00:09:04] It's going to actually start our server. So only thing you have to do from there so you can check out the package that JSON is there's a lot of different files and folders and stuff in here. There's a task called start. So if you run yarn, I'm sorry.

[00:09:20] You actually wanna use dev. So you wanna use the dev one. So if you run yarn dev, or if you're using npm you could do npm run dev. What's that's gonna do, it's going to build the project. Then after it's built it's going to start the server from the index file, which is index.js, which should then call the start function in the server and then start your server.

[00:09:41] And then from there we should be able to interact with our API. So let's try that.
>> Scott Moss: So I'm gonna say yarn dev. It's building.
>> Scott Moss: And you can see right here, here's my log. sever is on 3000. So that's the log that I log after I started the server so that tells me that it executed correctly.

[00:10:04] I didn't get any errors. If something bad were to happen this wouldn't have happened, we would have gotten an error here.