Introduction to Express JS | Express & Node.js Tutorials for Beginners

[Music] hello and welcome hi i'm dave today we begin learning about the express js framework and how it makes creating a web server with nodejs easier this tutorial is also a continuation of my node.js tutorial series if you already know node.js and just want to learn about express this is a great place to start or if you want to start at the beginning of the node.js tutorial series i'll put a link to the playlist in the description below here we're at the web page for express and you can see the definition of express it is a fast unopinionated minimalist web framework for nodejs and this is found at expressjs.com now you need to have node installed already and be able to use npm and then you can add express to your project and as it shows here it shows npm install express and then dash dash save you no longer need that you can actually just type npm i express today we're going to reference some documentation not from the getting started link but from the guide and go to the routing page and this way you'll know how to find the documentation for what we're going over today let's go to visual studio code in the last node.js tutorial we build a web server using only node.js i'm going to start with the completed code repository from that tutorial and that's what you see right here in visual studio code but if you don't have this repository you should be able to easily follow along without it or you can download or clone it from the starter source code link that i'm providing in the description below okay i'm looking at the package.json file for the repository now if you just downloaded or cloned the repository you're still going to need to install the dependencies not that we're going to use all of these today but if you just want to get the repository up to where we are you could go to the terminal from the terminal menu and choose new terminal or you can use control and the backtick that's what i use in windows mine defaulted to powershell and that's not what i want let me switch that over real quick to get bash that's what i expected it to be and once i have a get bash terminal you would type npm install and this will go ahead and update all of the dependencies or install them if you don't have them so i'll go ahead and do that as well and you can see it will just check my dependencies here it shouldn't take long and when it's finished i'll know i've got everything installed that would be in this repository so currently i have nodemon as a dev dependency uuid and date dash fns which stands for functions all installed as either a dev dependency or a regular dependency now what we want to add is express so we'll type npm i express we don't need the dash dash save that's understood at this point so we want to install express as a dependency and it just takes a few seconds and express should be added and you can see it here in my dependencies listed between date dash fns and uuid now just to update a couple of things for this tutorial i'll switch the name to zero six tut instead of zero five and instead of node.js web server tutorial i'll just put express tutorial in the description but those are minor changes and nothing that you actually have to do i just wanted to go ahead and update that let's move over to the server js file where we'll make the rest of our changes today now much of what is here and i can close the terminal as well much of what is here we don't need anymore so if you want to make a copy of this file or if you want to rename the server.js to old server.js or something like that to save this code in your repository go right ahead because we're going to get rid of most of it we need to keep the path requirement the path import at the top and then i'm going to remove everything else down to line 12 where we keep the port definition and then i'm really going to remove everything for now except where we listen here at the very bottom on the specific port now we can go ahead and make some changes right at the very top on line one let's go ahead and import express so we'll define express and we'll set it equal to require express after that let's define app now we could use another name here like we've used server but typically you'll see examples using the word app so that's what we'll go ahead and define as well and you set it equal to express and you call express and so now we can use the app where we've been using server so we'll have app dot listen at the specific port that we have provided now we'll use path later it's the only thing we haven't used up to now and now let's come down a couple of lines and we can define our first route so we use app and then we specify the http method that we want to route so we'll use the get method here so any get request that comes in that looks for just the root this would be our index page then we can specify what to do with that and this takes an anonymous function here or a function it doesn't have to be anonymous but this is what you would typically see and what i will do and so now what we do with the route it happens right here inside this anonymous function so let's start out very simply as you might expect and let's just say response dot send and then we can say let me use a single quote just because i like to better hello world and that's what would be sent in response and so now we can go ahead and start the server and we will expect to get this at the index page now to start our development server if you remember as we specified in our package json we can use our dev script that uses nodemon so nodemon knows to restart anytime we make changes when we save our file it will identify those changes and it will restart the server js so let's go ahead and open our terminal again and with the terminal open at the bottom i'll type npm run dev and it should take just a second but the server will start up and we expect to see that server running on port message inside the terminal window let me drag this up and see what we get there we go server running on port 3500 so now we'll go to chrome and open up chrome let's open a new tab and let's go to localhost and we've got port 3500 and we get a very small hello world that is simply delivered in text okay let's minimize chrome and let's drag the terminal down so it doesn't take up quite as much space but we'll keep the dev server running but let's go ahead and serve our index file that we have in the views folder now we do have an index.html here instead of just sending hello world we can send a file and you do that with res which is the response dot send file now inside of send file there's a couple of different ways we can specify the file to send in express one is to put in the path say dot slash views slash index.html and then we can provide options and one option is to specify the root directory and this is where we can use that der name value that is native to node and this will tell node and express exactly where the root directory name is and then inside the root directory we would look inside of views and there we would find the index file so this should provide the file let's go ahead and save and it says it's restarting due to changes once the server restarts we'll bring chrome back up and now that we've got it let's reload and now we've got our index page and i'm going to resize chrome so we can just see it and the console when we want to at least when i pull chrome back up if i can get it to drop down not that we really need the whole thing we don't have much content here but we've got that so now i'll go ahead and minimize and pull it back up again when we need it so that is one way to do it now let me copy this down so we can just leave that in commented and the other way to serve a file is what we're already used to doing in node and that's why i usually do it this way is we can use path.join and then we specify the directory name and then we join in the views folder and then we go ahead and join in the index.html and this will work in the same way so let's go ahead and save this now let's bring chrome back and we can reload and we should just get the same result and we do we still have the index page so that is more how i would do it because i'm used to using path.join but you could do this either way okay in the file tree we can see we also have new dash page.html so let's just highlight all of this and i press shift alt and the down arrow and i can just copy all of it down and then we'll remove the commented outline and then we'll change our app.git route here so instead of just looking for the root we're looking for new dash page dot html and upon that request of course we want to switch this to new dash page dot html as well and save now let's go ahead and look at chrome and see what we get if we type in our new dash page dot html so we have slash new dash page.html and we get the new page so that works just fine so we can tell that we're not just intercepting the route right here because this is only looking for the slash so even though this has a slash this does make it past and this is okay we get new dash page dot html instead of stopping right here because this does read this down like a waterfall so it would check this route first but now we know it does make it to this route however if you have the same question in your mind that i would you'd be thinking about what if somebody requests this slash index.html well this is where express really helps us out because express also accepts some regular expressions in the routing so instead of just saying slash here we can specify and we can say this must begin with the slash and this must end with the slash and then we can say or and then we can also say slash index dot html so if that request comes in it will route also to the index.html let's go ahead and save that and once again look at chrome and now let's switch back to our slash without the index and now if we go ahead and put slash index.html we still get the index and if you remember when we built the node server we also made it so you could just type in index without the dot html let's see what happens if we do that we get cannot get index so that means it could not find that page and this is what express returns by default if it's a 404 and cannot find that and it's also worth mentioning where we did a considerable amount of code to handle things like the status code and the content type in our nodejs only web server here express automatically sets the correct status code and content type so for that 404 it already set the 404 likewise for this html and we're sending an html file it already sets the correct content type and of course it sends a 200 if it finds it as a successful response now we can add just a little bit more regex and that way we can make the dot html optional on this request and if we put the dot html inside of parentheses and put the question after it that's exactly what it does so let's go ahead and do that to our new page as well and so we'll put the dot html and a question mark after it making the dot html optional in the request so we'll save both of those let's come back to chrome take another look and now index without the dot html let's go ahead and reload oh and the server is still restarting as we see down here restarting due to changes let's see if it's going to restart it's taken just a little bit may need to restart the server altogether do control c to get out of that and then i'll do npm run dev again and we'll get that server running again okay with the dev server once again running i'm not sure why it hung up there let's go ahead and refresh the page and now we get our index page with node.html inside of the url something else we handled in our node web server that we created was a redirect so let's do that with this express server now and i will copy down the new page request but now if we're requesting an old dash page with or without the dot html at the end we want to redirect that to the new page express makes this very simple so let's go ahead and remove a lot of what you see right here and we'll put in res.redirect and now we are sending that to the new page but we do need to put a slash here so we have our new page and we'll go ahead and get rid of that parenthesis we don't need now there is one thing missing and what's missing here is the response code now one will be sent by express but it's going to send a 302 by default and a 302 will not necessarily get the search engine to change saying it is a permanent redirect what we really want is a 301 so we can do that by specifying the status code at the beginning of the redirect and then putting a comma afterwards and that will go ahead and send the correct status code that we need because we would want the search engines to go ahead and say hey this has been permanently moved to new page there is no more old page and we can go ahead and check that in chrome as well i'll pull that back up and inside of here we can just type old-page we don't even need the html and it redirects to the new page now as i mentioned express handles these routes like a waterfall so at the very end of the route you can essentially put your default your catch all if you want to and here once again we'll use just for a get request we'll put in the slash and then an asterisk afterwards which is the all and that's kind of like if you're used to writing sql a select all so what we have here with regex is a slash followed by anything will default to this route let's go ahead and put in our function as well so we have our request and response and the arrow function and now inside of here what we can do is essentially send our file so i'm going to copy this line and bring it down here and we do have a custom 404 page and that's what this is for because express will send a 404 status code and tell you it cannot find what it's looking for even if you don't supply anything but we want to supply a custom 404 and so i'll go ahead and switch new page to 404 here but what it won't do because it will find the file to send is it will not send the 404 status code it would be a 200 because it could find the file and it would be serving exactly what we told it to so it wouldn't know to send a 404 at this point so what we can do is chain in the status code here with a status 404 and just another dot so that all changed together so now we have a response with a status code of 404 and we're sending our custom 404 file let's save this and go back and just request something that doesn't exist so up here instead of new page i'll just put page and we get our custom 404 what we haven't talked about yet are route handlers so i'll just put that here in a comma we have route handlers and that's exactly what these are following our app get route where we tell it what we are routing these anonymous function expressions that we have here following the route are route handlers and we can chain those or use more than one of those so let me give you an example of that so we'll have another app get and let's say the request comes in for hello.html and let's go ahead and make that optional as well since we're doing it with the others so we have the dot html is optional and after the quote we put a comma and now we have our function expression here the anonymous function and it's request response but then we also add in a next and this is an arrow function inside this function i'm going to console.log and just say attempted to load hello.html and then after our console log or our call to the console log we call next and what that does is it moves on to the next handler or the next expression and you won't see this often but you can put a comma and then just put the next function right afterwards so here we'll have a request and response we could have a next if we were going to chain another one after this but if this is the last one in the chain it won't have a next it would just be the request and response and here we can response.send and we'll just go back to our hello world message that we had at the very beginning and if we save this we'll go ahead and be able to see the console at the same time let's pull up chrome and over here we'll go ahead and request the hello and now we get hello world in our small text in the browser and we also got our console log message attempted to load hello.html so you can see we're calling one function and then when next is called it goes on and calls the next function in the chain now let me show you another way that you might see functions chained together and this way is really the way you would probably see it more often i'm just pasting in some very very basic functions here so i've got function one that has request response and next and logs to the console one and calls next function two same construction logs of the console two function three doesn't have a next it logs the console three it also sends the response finished and then it is complete so how would we use that in a route all three of those so instead of the commas we saw chaining the anonymous functions we can say app.get and let's say this is for the route let's just call it chain and we'll go ahead and make the html optional as well and after that you can provide these handlers in an array so we'll just have one two and three in this array so all the route handlers are provided right here in this simple line and we're calling all of the functions that are above so let's go ahead and save and go to the route chain in the browser i'll switch from hello up here at the top type in chain and you can see in the console we got one two three and in the browser we got finished in the small text because it just sent the text finished and these route handlers work in a way that is very similar to what we would call middleware and middleware is what we'll be covering in the next tutorial but you'll get used to seeing this call to next so it can call the middleware likewise we'll make a change for our 404 as well because right now we're just delivering a custom 404 for get requests and that come in right here with this path but we can go ahead and improve that using middleware as well and we'll also talk about how to serve those static deliverables like our style sheet the css any javascript that we want to go to the browser and anything else like images that we have currently broken on the page when we go to new page or some data so we'll talk about how to provide all of those as we cover middleware in the next tutorial give this video a like if it helped you get started with the express framework for nodejs and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 65,044

Keywords: Introduction to Express JS, express js tutorial, express node js, express node.js, express node, express js framework tutorial, express node tutorial, intro to express, intro to express js, express tutorial for beginners, express js tutorial for beginners, beginners express tutorial, beginners express js tutorial, beginners node tutorial, beginners node js tutorial, beginners node express, express node beginners, beginners tutorial for express, expressjs tutorial, js, express

Id: jivyItmsu18

Length: 22min 3sec (1323 seconds)

Published: Tue Sep 14 2021