Learn Express JS In 35 Minutes

if you're building a back end using javascript then chances are you're going to be using express.js and in this video i'm going to teach you everything you need to know about express including a few features i haven't seen in any other tutorials let's get started now welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner and by the end of this video you're going to be an express js master now to get started with express.js you're going to need to have node installed so if you don't already have node installed make sure you check out the video i'll have linked in the cards and description but once you have that done just run npm init dash y that's going to set up a basic package json for you as you can see right here and this is where we're going to install all our different libraries we're going to use in our case the main library we care about is called express so let's type in npm i express and it's going to install the express library you can see for this tutorial we're using version 4 but version 5 is currently in alpha i've checked it out and everything in this tutorial is going to work for both version four and five so it really doesn't matter what version of express you're using now one other package i want to install just to make our development a lot easier is going to be a package called nodemon and we're going to save this as a dev dependency so type in npmi dash dash save dev nodemon and what this is going to allow us to do is really easily restart our server anytime we make changes because normally you have to close your server restart it manually this will just do it automatically so to set that up let's create a script called dev start inside this scripts section and this is just going to run the command nodemon and then we're going to call it with our file which is called server.js this is a file we're going to create right now server.js and this is where we're going to put all of our server code if we run the command npm run dev start what's going to happen is it's going to run all the code in our server js and that's just because this dev start right here we created then when we make changes and we save this you can see it's logging that out down here and it's automatically re-running our server file so now we just kind of have the basic setup the first thing i want to do is to create our actual express server which is really easy to do first we need to require that express library we downloaded so we're just going to come in here and we're going to require express then to set up our actual server we're going to essentially create an app variable which is just by calling this express function so by calling express as a function we create an application which allows us to set up our entire server then to make our server actually run we can say app.listen we pass it in a port number so we're saying hey our app right here our server is listening on port 3000 for a bunch of different requests so now if we save that we now have an app running on port 3000 and over here you can see we have localhost 3000 open so if i refresh this page you can see it's running our server and it says cannot get slash all that's saying is that our application doesn't have any routes set up so when we try to get this index route which is just slash it's saying it can't find this route now this is pretty much where the entire bread and butter of express js comes in is where you set up different routes so the easiest way to set up a route is just say app dot and then we're going to be able to call different methods for example to make a get request we can do a git route a post request is going to be post we have put we have delete and pretty much any http method that you can think of is going to be available but the main ones you're going to deal with are git post put delete or patch in our case we want to make a get request for the url at slash so the way this function works is the first parameter you pass to it is going to be the path in our case we're just doing it at our root path which is just a slash here and then the second parameter is a function and this function takes three different parameters the first is a request the second is a response and the final parameter is this next function in our case 99.9 percent of the time when you're creating a route like this you don't care about next so we're going to remove that and we really only care about our request and our response and you can call these whatever you want but req and res are pretty standard naming conventions then inside of this function we're just going to run code whenever we try to access this url so we can just say console.log here and then in order to send data back down to the user we need to send something along with our response so as you can see there's a bunch of different methods we can use with this response but the main methods you're going to use are sending information to the user so we can use send which is just going to send down whatever we pass into it it's pretty generic so we can send down for example the string high now if we refresh our page you can see it logged out here in our console which means it ran this code and we sent the response hi down to the user so we've actually created a route at our index here this slash route and whenever someone makes a git request to that route which happens when they navigate to that url it's going to send down the information high to that user now for the most part send is not something you're going to use very often it's great for testing purposes but since sent is so generic generally you want to use a more specific thing so one other thing we could do with our response is we could send down a status so we could say send status and we could pass in an http status code if you're not familiar with the status codes i have a full video i'll link in the cards and description for you to check them out but essentially we could send down the code 500 for example and that means there is an error on our server now if we save and refresh you can see it sent down that status code to 500 and it just says internal server error right here so if we inspect our page and we go over to the console you can see it says failed to load the server responded with a status of 500. so we actually are able to send down different status codes to the user generally though when you're trying to send a status you probably want to send a message with it so we can call just status here and we can pass it in the code for example 500 and then we can chain on another message such as send and we could just send hi down now if we refresh it still says hi as the text but if we inspect and go to our console you can see we're getting that 500 error which is what we want so we can chain together statuses with other things such as sending down a text string and that way we can do a status and a text string or more commonly you'll want to send down some json so we can call the dot json method we could pass it in some json that for example says message error and now when we save and refresh it sent down a json message and the important thing is is this is actually json code being sent down so if you're using this inside of some type of api and you want to send json to your client this is going to be the best way to do that and if you don't care about the status for example you want the status to be a default success we'll just do res.json like this now we save and refresh if we check our console you'll notice we no longer get any errors because the status is a successful 200 status now another thing you may want to do is actually send down a file to the user to download really easy way to do that is we just say res.download and we pass it the path to the file we want so for example if we want to download the exact file we're in our server.js file well we can just send this down to the user like this and when i refresh my page you're going to see here that it's going to pop up a information for me to download this i can click save and it's going to download that file directly to my hard drive now the final thing that we can do with our response that's important is going to be rendering out an html file and that's what you're going to be doing most of the time you're either going to be sending down some json or you're going to be rendering a file and to render a file you just use the render method and then you pass it the path to the file that you want to render so let's say we want to render an index file so we're going to pass down index now in order to set up our application to actually work first of all we need to tell our app where these files are and by default all of your view files are going to live inside of the folder called views so we create a file called views and we just inside it here create an index dot html file and we just populate this with some boilerplate that says hello save this save this and refresh you'll see that actually nothing works like we wanted to we're getting an error that just says no default engine was specified and no extension was provided the reason we're getting that error is because we don't actually have a view engine set up the nice thing about using your server to output your views is that you can actually run your server code to generate the code inside of your views for example i could pass down information into this file so to do that there's a bunch of different view engines you can use but we're going to be using ejs as our view engine just because it's the one that's the most similar to html but another popular one is called pug so to do that let's just close out of our server and we're going to npmi a library called ejs that is going to be for our view engine then we need to tell our application to use that view engine so we can say app.set and we want to set a variable so the first thing we pass in is the name of the setting which in our case is view engine and then we need to pass it in the view engine we're using which is ejs this is just code you have to put in word for word if you want to use a view engine if you use pug this would be pug for example instead but we're using ejs then you need to rename your file to have an ejs extension at the end so we're going to use ejs and in order to get syntax highlighting for ejs make sure you install the extension called ejs language support in vs code once you've done that you'll be able to have your highlighting inside of here so you can actually run your server side code in ejs and see all the highlighting but now with all that done if i restart our server make sure we save everything and refresh you can see we actually got that html page that says hello being sent down to the user by just passing in render here now i did mention that you can pass information from your server down into your views and to do that is this render takes a second parameter the second parameter is just an object and you can pass anything you want to it for example we could say text is equal to world and then inside of our view here we can actually access that information so to access information using ejs as your templating language you need to put a less than symbol here which is going to be just like an html but instead you put a percent sign inside of here and then the equal sign this right here is just saying hey we're starting to run some code on the server and i want you to run that code and then with the equal sign here it says output that code to the page so inside of here we could for example put two plus two close that off with that percent sign and then the greater than symbol here and that's saying hey run all the code between these symbols and the equal says output that code to the page so now if i save and refresh you see it outputs four because it's running this code on the server it gets the value of four and then outputs that to the page but we want to pass down this text right here so to access that variable we just use the word text just like that now if we refresh it says hello world and that text is coming from our server right here and we're accident inside of our client now many times though when you are doing this type of server client communication this variable text may or may not be defined for example maybe you didn't actually pass text inside of here and you pass you know something else you know we'll say text two three four two three now when we save and refresh we're going to get an error as you can see it's giving us error text is not defined and that's because we never actually passed text down inside of here so to get around that error we could just say locals.txt and that's because locals is always going to be defined and then we're trying to access the text property and this text property is just going to be anything we pass down here so locals is essentially this object is just all the information we pass down to render inside of here and it's always going to be defined but text will just be undefined so when we save this and refresh you'll notice it prints nothing and that's because text is not defined so we could default it to say something like default so now you can see if we don't pass in the text it's going to be default but if we change this to actually pass down our text you'll now see that it actually prints out the correct world which we passed down so this locals trick is a really good way to get around the fact that sometimes your variables will be defined inside of your server and sometimes they won't be so far we've talked about all the different ways you can render out content to the screen we've talked about rendering json which is really common for apis we talked about rendering html which is going to be common for a full stack web application we talked about downloading different files but you notice that we have all of our routes being defined in this server.js and you can imagine if we have hundreds of different routes in our application this file would become huge and really difficult to deal with and that's why express thought about this and they implemented the idea of a router and a router is essentially a way for you to create another instance of your application that is its own little mini application that has all of its own logic applied to it and you can kind of just insert it into this main application so what i want to do is i want to create two simple routes here we're just going to say app.git and we want to go to a slash users path and remember that takes in a request and it's going to take in a response and i'm going to create another app.git and this one's going to go to slash users slash new to generate like a new user form and this slash users is just going to list out all of our users and again this takes in that function which has a request and a response just like all of our other get methods here and like i said you could do post you could do delete and so on we're going to get to that later but for now we're just doing git routes so you'll notice one thing interesting these are all routes related to our user and for now let's just say res.send and this is going to be user list and this right here is going to res.send user new form so if we go up here to slash users you can see we get the user list if we go to slash user slash new we get the user new form that works fine but it would make more sense if we took all the code related to our users and put that inside of its own file that way it's kind of encapsulated in its own area it all is in its own section and we can just kind of import that into our main application that we have here so to do that generally the standard you're going to use is creating a folder called routes you can really call this folder whatever you want but the general standard is to call it routes because we're creating a index for all of our different routes we're going to create a file called users.js this is going to contain all the routes for our user file so let's just go into our server take all those user routes we're going to copy them out and put them into our users js and now in order to set up essentially a mini application our own little router what we need to do is import express so we'll say const express is equal to requiring express and then we can create a router and this router is like an application that we've done here where we have our app but it's like a mini app that's entirely on its own and it just lives inside of this main application this essentially means the stuff that we set up on this router is kind of going to be independent from the main router and you'll see about that when we talk about middleware a little bit later in this video but to create a router we just take express dot router we just call this as a function and the important thing to note is this is a capital r for the router that gives us a router and the router works exactly the same as our app the router has functions such as git dot post and so on so we can just replace app with router and that's going to work exactly the same but the nice thing about a router is we can nest it inside of a parent route so as you notice all of our routes start with slash users what we can do is we can say everything about this router starts with slash users so we're just going to cut off the user's part of all of our different things so right now all we have is slash and slash new and we just know our router is always going to go slash users at the beginning so in order to use this router let's just make sure we export this router from this file and then we can import that into our server up here let's just do it at the very bottom of our page so we'll say const user router is equal to and we want to require that file that we just created which is from our routes folder slash users now in order to link up these routes here that we just created into our main app we need to call app.use and this is a function that has a lot of different use cases but the way we're going to be using it is for linking a route to a particular path so the first thing we pass to this is going to be the actual path that we start our thing with so you remember all these started with slash user what we want to do is just start all of these with slash users so we'll say slash users is where we mount this router and we pass it our router which is our user router now if i save this and save this over here you'll notice if i refresh my page it works just fine just like it did before but all of our routes for our user are defined inside of here and we don't have to put slash user in front of all of these and that's because in our server we're saying hey anything that starts with slash users add all these different routes to the end of it so we're going to have a slash users that ends with a slash and we're going to have a slash users that ends with slash new that way we can kind of have that nesting without repeating that naming all over the place this is a great practice to get into it's just making sure all of your different routes are defined in these router files then you just use them throughout your application so for example if you had a post section you could just say post this is going to be your post router and you know you could copy this host router here and you could get this from like a post file for example if this file existed and you could do this for all of the different routes in your application and it's going to be super clean all of your code in your server.js and each route file is going to be all the code for your individual routes now the next thing i want to talk about is a few different ways you can kind of clean up how your routes are going to look this both works if you call it on the app variable or if you call it on your router we're just going to show it in the router instance because it's going to make the most sense to do all of these in router files so if you have a particular user route like this you may have routes like getting all the users you want to get a form for a new user you probably want to be able to create a user so generally you're going to use a post request for that so if we post two slash users which in our case is just slash here that's going to be essentially for creating a new user again taking a request and a response and for now i'm not going to worry about filling in this code we'll just say res.send create user for now another thing that you're probably going to want to do is be able to access an individual user so we'll say router.git and we want to access a user based on the id of that user well we don't know what all the ideas of our users are right away you know we can't say like slash one slash two slash three instead we want to make it so that this piece of code is dynamically determined by the url so if we go to user slash one for example slash user slash one we want this to work we want slash two slash three slash four slash 124 all of these routes we want to be valid so in order to create a dynamic parameter essentially a parameter in your url that can be anything you start it with a colon and then you put the name of the parameter in our case we'll call it id so this is saying get any route that starts off with slash users because this is inside of our user's router and then has any code at all afterwards which we're going to declare as our id if we do that then let's get our request and our response and we want to say you know we'll just say res.send user get and this is going to be for getting the individual user and in order to access this parameter we get it from request.params and we can just say dot id because that's what we called this parameter right here if we called this something like user id this would be user id down here it really depends on what you name this inside of your parameter so if you start something with a colon that's just saying this is a dynamic parameter so we could just send down that information we could say get user with id and we could pass it in that request dot params dot id so now what we can do is we can go to slash users slash two this is saying hey get the user with the id 2. if i go to slash user 51 get the user with the idea 51 it's pulling that number directly from the url a really important thing to note though is when you're using dynamic parameters like this if you have another parameter such as this get new and you put it below this dynamic id right here what's going to happen is everything goes from top to bottom inside of express so it's going to read this route first and says hey does this match an empty slash route obviously user 51 does not it's not a post request so we skip this we're saying hey does it match git where anything comes after it well we say slash user 51 51 is this id so it's going to call this code here but if we change this here to slash new instead i just save over here and i refresh the page you're going to notice trying to get a user with the id of new and that's because again it's going from top to bottom it says does slash new match this no it doesn't match this but it does match this because new is just an id it says it doesn't care what that code is it's just saying new works as an id so we're going to get the user with the id of new that's why if you have a route like slash new that's static make sure you always put it above your dynamic routes because that way when we're going top to bottom slash new is going to match this route right here so now if i refresh we're getting our new form instead of getting put all the way inside of here with our get user with id now let me just copy this route here a couple times because almost always when you're going to be creating routes you're probably going to create a put route that allows you to update a user based on an id so we're going to say update user with this id and we're also going to create a delete route which is going to allow us to delete a user with a particular id so you'll notice that these three routes are almost exactly the same you have the exact same path to all of them and they're all doing a request and response the only difference is one's a git one's a put and one is a delete one really nice thing with express is they know that this pattern is really common so instead they created another method called the route and this router dot route what it is you pass it the path which in our case is this slash id and then you can chain together all your git put delete and so on request so we could say dot get and this is going to take in all the code for our git so we'll just copy this code and paste it inside of our dot git then we can chain on a dot post to the end of this or in our case it's going to be a dot put and we'll copy all of our code from our put request paste it into there and then we have the exact same thing for dot delete so we'll say dot delete we'll paste in all of our code for deleting a user and now you can see we have a route which is defined as like slash id over here and we have a get request a put request and a delete request that's going to respond to this individual route right here this code right here is exactly the same as the code down here the real main difference is that we only had to define our route in one location and then all these other requests are going to be matching that route so if we have a get request for that route it does this code put request does this code and delete request does this code it just kind of cleans up your code a little bit which is really nice now the next thing i want to talk about is going to be related to these params and that is a function on our router which is called dot param this dot param function is really cool and something that almost nobody ever talks about essentially dot param this function is going to run any time it finds a param that matches the name you pass in so we're saying hey whenever you find a parameter with the name of id i want you to run this function and this function is going to take request and response just like anything else but it's also going to take a next property and then it's also going to take the value of the thing in our case the id itself and what this function is going to do is say hey whenever you go to a route that has an id parameter which all of these routes inside of here have that id parameter i want you to run this code with our request or response our next and our id so for now let's just console.log out the id to see what happens we can just come over here we can say users slash2 click enter and you'll notice over on our side you can see that our page is infinitely loading and right here we're printing out two so we know we're logging out this too and the reason that our page is infinitely loading is because this router.param when it finds that param it runs the code inside of it but it doesn't actually run any other code unless we call this function next the way that this next function works is it's saying hey if i called this function run the next thing in line this is because param right here is essentially a type of middleware and middleware inside of express is stuff that runs between the request being sent to your server and the actual response being returned to the user so as you can see here we have all these get and put and delete requests these are all the responses being sent to the user and middleware stuff that runs before this section so our param right here is running first and all we're doing is logging out the id in order to run the next thing in line which in our case is this get right here we need to call this function next now if i save that and i just refresh our page you can see it's printing out get user with id because we're going on to the next piece of middleware and that's perfect that's exactly what we want to do now instead of just logging out the idea what i want to do is i want to get the user with that id so let's just come in here we're going to get an array of users i'll just copy this over actually so i don't have to type this out and we just have two users one has the name of kyle and one has the name of sally and what i want to do is i just want to take our request i'm going to set a random variable we can call this whatever we want i'm just going to say our user for our request i'm going to set equal to users and i want to get the user for that id so our id is the index of that user so right here i can just say id of one which should be the index user one sally here we're gonna set request.user to that then instead of our git i'm just gonna say console.log request.user and if i refresh you can see it prints out sally to the screen so what this params has allowed us to do is essentially say hey anytime we have an id get it from our user right here we have a users variable get the particular user for that id then continue on with the rest of our code and we're just going to save that in request.user then anywhere else we have a request object which is pretty much everywhere we can access that user directly so we can get the user and we're just printing them out but we could do whatever else we wanted with that user this saves us from having to write out a ton of code instead of each one of these parameters to get the user it allows us to do it in one single place which is why this param is really cool so this param is one version of middleware but i want to talk a bit more about middleworks it's one of the most fundamental concepts inside of express and i actually have an entire video that covers a link in the cards and description for you if you want to go even more in depth but essentially middleware like i said is code that runs between the starting of the request and the ending of the request so a really common type of middleware that you might want to create is a middleware for logging out something so let's just create a function called logger and this is going to be a middleware function so it takes in a request a response and a next every single piece in middleware takes request response and next and they work exactly the same as like our dot git it takes a request and a response and it also technically takes a dot next but we never actually use this next function when we're doing like a git or a post which is why you only ever really see next when you're creating middleware now inside this logger all i want to do is just say console.log and we're just going to say request dot original url we're going to print out the url that this request comes from and then we're going to call next so now this logger right here currently is not being used but we can use this middleware by just saying app.use we pass it in the function we want to use which in our case is logger now if we save and refresh you can see it prints out slash users slash one if we go to just you know the main page here it just prints out slash and all these other console logs let me just get rid of them so they're not in the way get rid of that one too so now if i refresh you can see it just prints out the url no matter what i type in for example slash users it's just printing out that url and it's doing it on every single request and that's because again middleware runs from top to bottom so what happens is start at the top of our page the first middleware we insert is our logger then we create this git request here and then we set up our router for our users so everything comes after this logger middleware which means everything uses it now if i were to move this below this get request here you'll notice if i refresh the page here it still does slash users that's because our logger comes before our user's router but if i just access our index you'll see we don't get anything printed out and that's because this get request is defined before our middleware for our logger again everything is top to bottom so if you have a middleware that you want to use everywhere on all of your routes always define it at the very top of your page or if you don't want it to be used everywhere you can use it on individual endpoints so let's get rid of that right now we have no login anywhere but something that's really nice is that we could say that this logger is only going to work on this app.get right here and nowhere else so to do that we can actually just pass multiple functions to app.git so we can pass our logger in here and that's going to run first so it's going to run our logger and then it's going to run this function next as long as we call the next function so if we go to our slash page it prints out our login of slash but if we go to anywhere else such as users you notice it doesn't print anything in the console and that's because this logger is only on this app.git and you know i could put as many pieces of middleware in here as i wanted to for example i could have three separate loggers and all three of them are going to run in order so if i go to that homepage it should log out slash three separate times because it runs this logger at the beginning then this one and then this one so if you have middleware you only want to apply to individual routes or individual endpoints you can do it like this also if i wanted i can move this logger into the router for our users so i'm just going to come into users.js create that router or logger function down here and then at the top i can just say router.use and i want to use the logger and that means that every single route defined on this router so all of our user routes are going to log themselves out so if i go to slash users it logs it out slash user slash one it logs out but if i go to the home page you'll notice it doesn't log anything out and that's because this logger is only defined inside of the user router and nowhere else there's actually quite a few built-in middleware into express and one of the most common ones you're going to be using is for you serving out static files things like static html css or javascript that you want to serve to the user so instead of our server let's say right here our app.get right now we're rendering out this index egs let's just say that this always is going to say hello world and this is it's just static it doesn't change ever we don't really need to create a full on blown route just to render out something that never changes so instead let's remove this completely and what we want to do now is when we refresh this page we want to serve a static index html file well let's create a folder called public you can call this folder anything you want but public is like standard naming convention we're going to rename this to index html and we're just going to drag that into the public folder that we just created so now if we go into our server we can say that we want to app.use we want to use a middleware and this middleware is express dot static this express dot static function takes the name of the folder where all of our static files are in our case we call this folder public so we can just say express.static pass it in the name public and this is going to serve all the files from our public folder exactly as we want so now if we refresh this you can see it says hello world that's because this is our index file we create a folder called for example test inside of here we're going to put a file called tt.html and inside of here let's just put a bunch of random text what we can do is we can actually navigate to that page by saying slash test slash tt.html hit enter and it's just going to allow us to access that file directly from the public folder so that's a super handy way to be able to render out just static html or if you have css or javascript they're all going to go in that public folder so you're going to need that in pretty much every application now the next instance where you're going to have some built-in middleware is actually going to be for parsing all the information sent to your server from like forms or json requests so let me show you a little bit of an example inside of our users here let's go down to our git for our new and here i want to render out a form so we're just going to say render out new and this is going to be users slash new and we're just going to render out this page so in our views let's create that users slash new.ejs file so it's in the users folder called new.ejs i'm actually just going to copy in the code for this essentially all that we're doing is we're creating a form and on the form our action is going to be making a post request to slash users and inside here you can see we have a post that goes to slash users which right now just sends out create user and we also have an import here that has a type of text the name is first name and then we have a button that submits that and finally we have a value here that's set to locals.firstname so we can put in a placeholder value that starts out so inside of here if i wanted to i could just say first name is equal to test and that's going to be the value to start with so if i go to slash user slash new you can see we get first name and that test is being put there but if i leave this off for example it'll just leave this completely blank when i refresh the page so now let's just say i type in the first name kyle and i click submit you can see it's saying create user because it's doing this post here but instead i want to access that variable that i just posted up to the server from the form well we have our request we can access the body of that request and we could say dot first name and that's because inside of new.egs we gave this input a name of first name so whatever name your input has is going to match directly to whatever you get on the body so let me just console.log this out for now and otherwise we're just going to say res.send i so now if i refresh go back to user slash new and i just type this in click submit you'll notice we actually get an error it says cannot read property first name of undefined we're not able to access the body at all and that's because by default express does not allow you to access the body we need to use middleware to do that for us so in our server we can just say app.use and we want to use the express dot url encoded middleware this allows us to access information coming from forms so inside of here we also need to pass a object that has extended set to true this is just a spoiler plate code that we need to put in otherwise we're going to get a warning so now if we save and we refresh this page click continue you're going to notice that down here it's printing out asdf asdf which is the name we gave to our user now the final thing i want to do in this user's js is kind of write a little bit of code to emulate what would happen in a real world situation so we're just going to say const is valid is equal to true this is just a variable we'll change around to see if different scenarios work for what happens when we have a valid response and an invalid one so then we can just say if is valid so if this is a valid request we want to create our user so we can just say users which is our variable down here with all of our users we're going to push in a brand new user and that brand new user is going to have a first name which is coming from request.body.first name just like that and then what i want to do is redirect the user to the get page for that user they just created so we could say response.redirect and redirect just changes the url completely we're going to go to a brand new url so it's going to go to whatever url we want in our case we want to go to slash users slash and we want to get the id of the user which just comes from our users array we want to get the length and subtract one because that's going to be the brand new user we just created and then essentially down in the else statement what we can do is we can just console.log error and we can re-render out that form so we'll say res.render we want to go to users slash new and we want to pass down the first name first name that they tried to create this with request.body.firstname and i'll show you why we do that in just a second so on a valid request let's go to slash new up here and we'll type in the name kyle click submit and you can see it says get user with id2 because we created a brand new user with that id2 and also if i just come in here i say console.log request.user and i go back to that slash new and i just create another user we'll call them john click submit you can see down here it's printing out the user with the first name john so we created the user we're able to get the user and we're redirecting back to the page for that user now if we change is valid to false and we run our code let's just see exactly what will happen so we'll go to slash user slash new type in a bunch of code click submit and you'll notice down here it prints out air and it redirects us back to this page and it puts in the actual text that we had previously and that's working because of right here we're passing the first name down and instead of here we're defaulting the value to the first name if we didn't do this step and we just hit submit you'll notice it blanks out the first name this is just bad user interface generally if user submits information you want to populate that information back to the user which is why you pass it down like this then we click submit even if it fails it still has the information populated so they can change it and make it correct now one other thing that you're probably going to commonly deal with is when you're posting json information to your server so to be able to process json information we just say app.use express.json and call that function this does the exact same thing as the url encoded but it works for whenever we make a json request so if you're making a fetch from the client to the server or you're calling an api this is going to allow you to parse json information from the body now the very final thing that i want to talk about is what happens when you have to deal with query parameters so for example let's say up here we put a query parameter that says name equals and we'll just say kyle hit enter and what we want to do is we want to be able to access the actual name property from user so we have name equals kyle and we want to get that name from the query string it's actually really easy to do we're on the slash route for our users we can just say request dot query and then dot whatever we passed in here so we called it name this is going to be whatever we pass up here as our name so if we just do a quick console.log of that click save and if we refresh this you can see it's printing out kyle down here which is coming from our query parameters right here if we change the name to something like john you'll see now it is printing out john so we're able to get that information directly from the query string by using request.query and that's all there is to express if you want to take your skills to the next level i highly recommend checking out my full stack node.js course it's completely free and linked over here also i have a full middleware express guide which is going to be linked over here as well and with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 80,773

Keywords: webdevsimplified, expressjs crash course, express js, expressjs, express js crash course, express node js, express nodejs, express node.js, express js tutorial, express js tutorial 2021, express js 5, express tutorial, express tutorial node js, express crash course, express crash course node js

Id: SccSCuHhOw0

Length: 36min 3sec (2163 seconds)

Published: Tue Aug 31 2021