LEARN EXPRESS JS IN 15 MINUTES!

Hey developers, today we're going to look at Express. We're going to learn it in about 10 to 15 minutes. And at the end, you should be able to create your own Express server, be able to create a REST server, have clients connect to it, have information being sent back. It's going to be awesome. Make sure you stay all the way to the end so you can learn all about it. And if you guys are watching, if you guys like Express, leave a comment below. I love to see comments. I love to see everybody talk about Express and what they've done in the past. So make sure you do that. Hey, and if you don't know, my name is Eric. I'm a full stack software developer. I'm also the author of a few books. I've written the EmberJS cookbook and the Vue.js in action published by Manning. If you guys are interested in web development, Node.js, Express, anything like that, make sure you click that subscribe button and then make sure you click that little bell button and you will be notified the next time I do a video. So before we get too far, let's have a quick word from our sponsor. I just want to take a moment and thank our sponsor .tech domains. Now, if you're anything like me, you probably love domain names and you love to buy ones that are short and relevant, but also, most importantly, available. And that's what's really cool about .tech domains. There's a ton of really cool domains available. And the .tech domain is broad enough that you can kind of understand that this is technology related as well. A lot of really cool sites are using .tech domains like hollywood.tech, viacom.tech, even personal sites like austinevans.tech. So if you guys are interested and you want to search for a really cool domain name, go to go.tech slash eric and then search for your domain name. If you end up buying it, you actually get up to 80% off on one year and five year domains. So go to go.tech slash eric and go ahead and pick up that domain name. Thanks. Okay. So here we're going to begin and I'm going to talk a little quick and fast. If you guys are lost at any time, make sure you pause that video or rewatch the section a few times. But if you don't know, express is a fast and opinion and minimalist web framework for node.js. And what I mean by that is that you can create servers out of it. Remember in the front end, you connect to a backend. This is an actual backend. We're not using some paid service somewhere. You can create your backend and it's really easy. And one really nice thing about it, it's in JavaScript. Yes, JavaScript. So you can write JavaScript on your front end and in the backend and you can create a fully featured functional server out of it. And before we begin, make sure you have node installed. I'm actually using 13.12 as of this recording. And what's nice about that, it actually supports ES6 imports. And what I mean by that is instead of using the require syntax, we're going to use ES6 imports where we can during this tutorial. And I really think that's the future of doing imports in node. So keep that in mind. And if you don't already, make sure you install node. All right. And I'm using Visual Studio Code and one more little tidbit. I'm using the REST client. So this is a really neat tool. It's an extension in VS Code that allows us to connect to a backend server and send posts requests really easily to it. And we'll see it inside VS Code. And this makes it a little bit easier for me because I don't have to open up Postman or another app or curl it on the command line to show you actual messages going to our server that we're creating. So if you're following along, make sure you install the REST client. It also almost has a million downloads. That's crazy. Okay. I'm in an empty folder right now. You can see here. And now we want to start. So one way to do it, and I'm going to use npm because I'm using node. This is the node package manager. If you're using yarn, I believe it's very similar if you're a yarn person. So I'm doing npm init. It's going to ask me the name, express, version number, description, entry point. We're going to assume it's index.js. That's where we're going to do. Test command, get repository author. I'm just going to hit enter all the way through. And what that's going to do, it's going to create a package.json. And so here's the default. One thing I like to do is add a start. So this tells it what to do. So this is going to say, when you start it, run the index.js file. So we don't have to keep on continuously typing this command over and over again. And that's good. Now, if you were going to be really smart about this, we can create something like, install something like nodemon that would automatically refresh anytime the files change. I'm not going to do that in here. Maybe later. Now the next thing, of course, we need to install express. So npm install express. So that will install it into our package.json. And it'll basically install a bunch of node modules. So here's our node modules. Very, very big. Okay. Now we can create our index file, index.js. And to start off, I'm just going to do a console log, hello world. Did we do this right? World. There it is. And since what's cool is since we added the start into our package.json, all we need to run is npm start. We don't have to write npm run start. So here it is. It ran hello world. Misspelled. That's fine. Awesome. So now we have index.js. Obviously, we want to do something more relevant than just hello world. So now we need to do imports. Remember how I said that we're using the latest version of node and it actually supports ES6 imports. So instead of using something like require, we use something like import. And you may be more familiar with import if you've been running apps in the front end. So that's why I like to use it. Now as of this time of this recording, it is experimental, but you can enable it. And it's enabled by default. So you just have to put in type here into your package.json and then put in module. And that'll tell it to use ES6 modules, which is cool. Now I can do things like this. Import express from express. Cool. So now I have express installed. And now I can do things like this. Const app equals express. And I can do things with that. Now this express has a bunch of functions that we can run on it. And what we really want to do is we want to in this tutorial, we're going to look at the four different HTTP verbs. So you may have heard of get, there's get, there's put, post, and delete. And in the REST world, usually your HTTP get is how you get information. HTTP put is how you usually change information. Post is how you post information or add information. And delete is how you delete information. Now we're not going to create a fully functional REST server. We're just going to kind of talk to these different endpoints. Now if to do that, it's really easy. All you need to do is app.get for get, app.post for post, app.delete for delete, and app.put. Those are the four functions. And that makes it really simple. That's how you do a get, a post, delete, and put. So let's start with get. So obviously we want to do a hello world because that's what we always do. Now to remind you, you got to remember get actually has three different functions here. First is the path. So we're going to say that the main path is slash. It's basically the main path of the web server we're going to create. And then it actually has middleware, which we're going to skip here because we can overload the function. We can have three parameters or it can have two. If you have two, the second one is always the callback. And this is going to have a request and a response. I always forget which goes first. Yep, request response. And then you can send things back. So a request is all the information that's coming in. And this request object has things like query. So that's like the query that comes through it. It also have params. That's like the parameters that comes through it. We're not going to worry about the request right now, but what we want to do is just send some information back. So we have here, this is response. Oops. Cancel that. We're going to do a send and then we're going to send a hello world. Cool. Now we just need to make sure that we listen and I didn't add this in here, but we can do a port here, 3000, and I'm going to let listen on port. And then we're going to just, we can, this is a callback here. So we can say, I don't know, console log listening on port. Cool. So now it should work. Let's run npm start. All right. So you see here, it says experimental warning. The ESM module loader is experimental. Well, it is. So hopefully it works, but now we can open up local host 3000. Cool. So you can see here, it says hello world. So we know we're talking to it. Now let's say we wanted to actually use our handy dandy. We can actually use our handy dandy rest extension. So to do that, we just type in get type, get, we'll put in the address. We know it's local host 3000, and then we need to save this and I'm going to save it as a HTTP dot rest. And when you save it like that, you all of a sudden get this send request here. So if I hit send request, it opens up another, uh, side here and we can see our status, the content type, content length, and connection. Hello world. So that's cool. Products dot JS. And now let's say we want to actually send this JSON back instead of the, um, hello world here. So I'm just going to comment that out. I'm going to do rest dot JSON this time, and I'm going to put in products. So let's see if that works. Saving it. I'll have to stop and restart our server here. And let's see if this works. Cool. So you could see here that now we have this JSON that's being returned. If we refresh this, yep, here's our JSON that's being returned. Now let's say we wanted to try to just return back one of these instead of all three. So, um, we can actually do something cool here. We have this request object. We haven't really looked at it yet, but request object has a few things on it. And one of it is a query and params. So we have the query. Um, we have the, the params and the query. So the params is the actual parameters that come through. So I could do something like this. I can put a colon here and ID, and that tells you it's a certain params that you have to send through. So let's, let's do product slash ID just to make it a little easier. Products that ID. And then, and from here, I'm going to go back to my send and just take a look at what that looks like. So, so we can do this. We have requests dot params. And if we do it like here and we do a rest send again, we can get, uh, let's see here. That didn't work. Save it. Oh, I see. We need to go to slash products slash one and we'll save it and we'll send it and cannot get products slash one. Oh, we got to stop from restart the server. And now we'll try this again. Cool. So now you can see this is actually the, uh, the params that were just get sent over. So since we know request dot params has an ID, we can do something like this. We can do rest dot JSON. We can do products dot find. And then in our find, we have a callback, which is a, a callback function here, arrow function. And we can return something that equals a request dot params dot ID equal equal equals. And this will be ID here ID. And this will be ID dot actually. So let's make it product product.id. So let's see if that works. Stop it. Restart the server. I'll rest. We'll send it. Oh, didn't find anything. So let's see what we did wrong. Okay. Actually found the issue. So this request dot params is actually string. So if I just put plus right here, this should change it to a number. Now, if I restart the server and oops, let me save it. I'll restart the server and then go back to rest and it send cool. Now it just returns that one that we wanted. So if I change this to two and, uh, stop and restart the server, actually, I don't think I need to restart there. Yep. Here's two. I'll put three there. Cool. So it's now returning just the product that we send over in the params, which is really cool. Now let's try to do something real quick. Let's do an app dot post. If we do an app dot post here, let's do it to, I don't know, add. And then once again, we'll have a request and response. And now we can do something with this data. And I want to see if I can send some data in a post and have it show up here. So I'm going to do an R S dot send, and I'm going to do this request. And it actually has something called body. So you think this would work. This body is what comes over in the post request. So let's create a post request. We're going to put three stars, three hash marks here, and we're going to do a post. We'll do an HTTP local host 3000. And this time we're going to go to add. And what's cool about this is now, since we're using, since we're using this plugin here, extension, I can actually do content type. I think it's content type equals application JSON. And now I can put in what I want here. So I can put, let's put a title test and a ID of, I don't know, five. So now if I do this ad here, so now I have this new request slash Adam restart the server. And if I send it here, you can see here, I don't, I don't see anything returned back. So that's kind of weird to think of. Well, request body. Didn't you send over in the body, this test you need to come over? Well, that's where a really nice about it expresses. There's something called middleware. So if we look at the official documentation and go to resources and utility middleware, there's all this really important middleware that can do body parsing, cookie parsing, cookie session cores. And essentially what happens there's actually this, this is, you can overload this function. Like I said, it has three parameters instead of two. The second one is the middleware and that gets run before this function gets run. So that's where you would put things like authentication cores, things like that. So we can actually add in the body parser, which will allow us to look at multi-part body information that's gets sent over in a post request. Now in the previous in long time ago, you actually use something called body parser, but with the newer versions you can use, it's actually built in. And to do that, you'd have to do app.use, and then you put in express.json. And then you do app.use express.url encoded. And then it recommends you do this extended true. And now it should work. So if I stop it, restart it, and I run the HTTP request again, actually now giving me an error that there's a token error. So that's probably because this is not real JSON. So now I fixed it. Let's try it again. Okay. So what, what happened here is I did a send on a post, but normally a post doesn't return anything. It just returns a status code. So I can do a console log request.body.id. And then I could send a status back if I wanted to send status. And I don't know, I could send a 200 back. So let's try that. And if I go back to HTTP rest, send it. Cool. I get an okay back and a console log, the five in the, on the bottom here. So that's, that's how you do a post. You do something similar for put. Let me ask, let me show you guys real quickly how to create a custom middleware. So I'm going to create a function called mid and in the mid, it's going to have three things. You have a request response and next, next. So now I can do things like I can console log the request.body if I wanted to, or console log request.params if I wanted to. And then I always do this next at the end, and that actually does the callback for it. So now, since I have this one here, let's say in this ID here, I wanted to just log everything out. I can add it as a middleware mid right here. Oops. Mid. If I can type right, there we go. So that should be a middleware. I'm going to restart, stop and restart our server. And if I send the request now, I get an error because I misspelled console log, which should be console.log. There we go. Stop it. Restart it. And now I'm going to send it again. Cool. So now I have my ID three there. So you can see here, this is what's being console logged out. If I change this to, I don't know, add in Eric equals five and then send it. You can see this ID is three. Oops. Excuse me. Request.query. That's what I want. So instead of request.body. Oops. Let me try this so I can do this. Query. That should show my query. I'm going to start it again and then send it. Cool. So now you see my query and my params coming through. All right. So that is my quick Express tutorial. Let me know what you guys think in the comments below. Enjoy.