Express.js Crash Course Notes

what&#39;s going on guys welcome to my expressjs crash course so this is a revamped updated version of the one that I did about 5 years ago I also just revamped my node.js crash course you can find a link to that in the description node.js is a JavaScript runtime environment and if you&#39;re brand new to node I would definitely suggest that you watch that one first it&#39;s going to give you a better understanding of what nodejs is and how it works but if you&#39;re ready to dive into Express let&#39;s get started [Music] all right so we&#39;re going to be covering a lot of stuff in this video we&#39;re going to spend just a few minutes in some slides to talk about what Express is and what it&#39;s used for then we&#39;ll jump into uh uh Express project and we&#39;ll look at things like creating routes the request response objects middleware error handling and more so let&#39;s first establish what Express is so Express is a minimal and flexible noj s web framework that provides a robust set of features for web and mobile applications and it&#39;s used for both server side applications as well as apis and microservices I would say that it&#39;s most used for building backend apis that are consumed by front-end Frameworks and you&#39;ve probably heard of the M Stack which is mongod DB Express react node.js there&#39;s also the mean stack the mevan stack where you can swap out uh react for angular or view or really any front-end technology that you want even just vanilla JavaScript so it&#39;s a very popular framework in fact I would say it&#39;s the framework for node.js there are others I&#39;d say there&#39;s even Frameworks that are more powerful but Express has really established itself as the go-to framework for node.js and it&#39;s used by huge companies like IBM Uber Nike and a bunch of others it&#39;s also a really popular option for smaller projects and start UPS so Express simplifies the process of handling HTTP requests if you watch my node.js crash course we started to build an API from scratch just using the HTTP module and you saw how difficult and and how lowlevel it was well Express gives us a ton of tools to work with to make building apis and just working with HTTP much easier and express is a very fast and unopinionated framework which I just want to spend a couple minutes on so when it comes to web Frameworks you have two types you have opinionated and unopinionated and opinionated framework is one that has a lot of rules and conventions that you need to follow so there&#39;s there&#39;s basically recommended ways of doing things and it&#39;s very structured it&#39;s it&#39;s going to guide you in in a certain direction they also come with or they usually come with a lot of bells and whistles out of the box things like authentication CIS uh database ORS and some examples of opinionated Frameworks are Ruby on Rails jeno laravel uh if we&#39;re talking about node.js in particular nestjs and Adonis are opinionated Frameworks for node and I would say in general opinionated Frameworks are more popular I think node and express is is really the only exception I can think of where the most popular framework is a minimalistic unopinionated one so opinionated Frameworks are extremely flexible and there&#39;s not really a right way to do things you can structure your application however you want and use whatever libraries you want you can use whatever database you want it&#39;s very minimalistic and it&#39;s up to you to to decide how you want to structure your application there&#39;s not as many rules to follow but you also don&#39;t get as many uh as many features or bells and whistles out of the box but you do get the necessities and of course you can install other packages for the functionality that you need so there&#39;s definitely uh pros and cons to both I would say it&#39;s really features versus Freedom depends on one what means more to you for that project so there&#39;s a few things that you should know before you jump into Express you should have a good understanding of JavaScript obviously all the fundamentals as well as all the the es6 features Arrow functions destructuring promises a syn await um you should have a basic understanding of node.js you don&#39;t have to know a lot in fact I would say watching my 2-hour crash course is plenty before you jump into Express you should know how to use npm how to install packages and in many cases you&#39;ll be working with Json data but you can also use a template engine like ejs or pug and I&#39;m going to actually give you an example of that later on um but yeah you can build both server side applications as well as Json apis microservices Etc and if you&#39;re learning let&#39;s say the M Stack it doesn&#39;t really matter which order you learn the Technologies if you want to learn react and you want to learn the front end first that&#39;s fine or you could do nod and express first and then learn react what&#39;s really important is that you you know JavaScript before you jump to either one of those front or back end now as far as what we&#39;re going to do here obviously we&#39;re going to set up a server we&#39;re going to look at routing how to handle requests we&#39;re going to look at the request and response cycle and the request response objects to see how we can get things like the response body how we can get the headers um things like that we&#39;re going to look at custom middleware so middleware functions basically sit in between the request and response and you can do all sorts of things we&#39;ll create some custom logging middleware we&#39;re going to look at crud operations so create read update and delete we&#39;re basically going to create a full crud API uh at the end we&#39;ll look at template engines we&#39;re going to use the ejs which is embedded JavaScript um cuz you can render HTML Pages directly from your server as well it doesn&#39;t have to be Json data we&#39;re going to look at error handling creating custom error handling middleware thirdparty npm packages controllers so I&#39;m going to show you how we can actually clean up our code and and take take our code out of the route file and put it into a file that has a bunch of controller methods fetching data from the front end so I&#39;ll give you an example of how we can create a static file server and we can basically have frontend JavaScript that will make a request and fetch data from our Express API and we&#39;ll look at environment variables we look at a lot more too but these are the the the core things that I want to go over all right so that&#39;s it for slides let&#39;s jump in and get started okay so this is Express js. this is where you can find the documentation there&#39;s some guides here on routing and middleware and you can use this as kind of a supplement to this crash course so to install Express just like any other package you can just install it with npm so we&#39;ll get to that but we&#39;re going to jump into vs code or open whatever text editor you use and go into some empty folder where you want to create this project now this isn&#39;t uh um an actual project that we&#39;re going to be working on um like I do in many of my videos we&#39;re just going to kind of explore uh we will be building a crud API it&#39;ll be ad Json API that will create read up update and delete posts but we&#39;re also going to look at loading HTML files we&#39;re going to look at using template engines creating middleware error handling uh all kinds of stuff all right so just open up a folder and in our terminal since this is a nodejs project and obviously you have to have node installed if you don&#39;t just go to nodejs.org so the first thing you&#39;re going to want to do is create a package.json file and I&#39;m not going to explain every single little detail like what a package.json file file is because you should know that if you don&#39;t just go ahead and watch the node crash course so we&#39;re going to run npm in knit and I&#39;m just going to do dashy so we don&#39;t have to go through the questions and that will create the package.json file with all the defaults okay now to install Express as you saw on the homepage we can simply run npm install or I and then Express okay and that will get added as a dependency as you can see right here it also creates the node modules folder now at this point I usually like to create a dog ignore file and what that&#39;ll do is it&#39;ll whatever you put in here it will not be pushed to your git repository and you never want to push your node modules folder so you pretty much always want to create this and I&#39;m also going to putv in here just in case we have an environment uhv file usually you don&#39;t want to push that either because that&#39;s usually where you have things like API Keys things you don&#39;t want to share all right so let&#39;s create an entry point and I&#39;m going to call it server.js and typically the convention I like to use is if I&#39;m creating an API or like a M Stack application where I&#39;m serving Json data I&#39;ll call it server.js the entry point if I&#39;m building a node app that uses a template engine like ejs then I&#39;ll call it appjs that&#39;s just kind of what I like to do but obviously you can create you can call it whatever you want so let&#39;s go ahead and bring in Express and I&#39;m using the commonjs syntax which is like the the native node module syntax later on I&#39;ll show you how you can switch it up if you want to use uh es modules and you want to use the import syntax but for now we&#39;ll just go ahead and use the require and we&#39;re going to require Express and then we want to initialize Express into a variable called app and then app variable or this object this is basically what we use for everything to create routes to use middleware to start the server and listen on a port which is what I&#39;m going to do right now we&#39;re going to call the listen method and that takes in a port number usually I&#39;ll use 5,000 for backend stuff however that&#39;s being used on this machine so I&#39;m going to use 8,000 and then there&#39;s an optional function call back you can pass in actually we don&#39;t even need curly braces and we&#39;re just going to do a console log to just say that the server is running so we&#39;ll say server is running on Port 8,000 and those three lines will actually allow you to run a server so if I come down here and I run node and then the name of the file either server.js or just server there we go so now it&#39;s running it&#39;s not doing anything there&#39;s no routes so there&#39;s there&#39;s not really any requests we can send for it to do anything but it is running so I&#39;m going to stop that now with roller command C and the next thing we&#39;ll do is just add a very very simple route and we can do that with the app object and then depending on what type of method you want to handle if it&#39;s a get request or post request you use that method in this case uh we&#39;ll use a get method so this is going to say respond to a get request to slash just the root URL or endpoint and then that takes in a second argument of a function and that function takes in a request and response object and those objects just have a ton of stuff on them so whatever you want to get from the headers the body or query strings from the URL that&#39;s all in the request object the response object has a bunch of methods we can use so let&#39;s use the send method and we&#39;ll just send some text so we&#39;ll say hello world and then let&#39;s run the server and we&#39;ll go ahead and go to the browser go go to Local Host 8000 and we&#39;ll see Hello World and what&#39;s nice about this is we don&#39;t have to Define like the the content type we don&#39;t have to say HTML or text slpl text or text/html if I put an H1 in here like this and we do have to restart the server I&#39;ll show you how we can fix that but for now we do have to restart it you&#39;ll see now it&#39;s uh it&#39;s parsing the HTML we could even send Json data so I could do let&#39;s say message hello world and we can it&#39;s just a JavaScript object but it&#39;ll actually stringify it on its own we don&#39;t have to do it manually like we would have to with uh you know with the with nodejs and just the HTTP module like we did in the node.js course also this is only pertaining to the root route if I go to slash about then that&#39;s not going to work if I make a post request to the root route it&#39;s not going to work it has to be a get request because that&#39;s what we defined so we don&#39;t have to manually check for that stuff like we would without using Express now having to restart the server every time we make a change is pretty annoying so there&#39;s a few things you can do what I&#39;ve done up until recently is used a a thirdparty package called nodemon which is really easy to set up you just install it with npm but with recent versions of nodejs you can can actually use the watch Flags you don&#39;t have to use a third- party uh package so I&#39;m going to show you how to do that in in the node.js crash course we did use nodemon so you can check that out if you want to you know if you do want to know how to do that but let&#39;s go ahead and stop this and uh I&#39;m going to go into the package.json here and what we want to do is create a couple scripts and to create npm scripts we just go into this object I&#39;m going to create two going to create one called start which is just going to start at normally just like we just did with the node and then the name of the file but then I&#39;m going to also create a Dev script which watches it so that we don&#39;t have to keep restarting so we can just simply do node-- watch and then server or whatever you call the file so now if I save that and come down here and we run npm run Dev you&#39;ll see that now it&#39;s running on Port 8000 and it does say watch mode is an experimental feature and might change it any time but I&#39;m pretty sure that it&#39;s not going to change so you should be able to to use that um but let&#39;s go ahead and try it out so I&#39;m going to change this back to just a string of hello world and save and I didn&#39;t restart it myself it did it on its own and if I come back and reload now we just get the string okay so now we don&#39;t have to worry about restarting it now the next thing I want to do well let&#39;s just create another row just so you can see so we&#39;ll create one at slab and we&#39;ll just return say about okay so now if I come back here and I go to slash about get request then we see about in the browser now most of what we&#39;re going to be doing is dealing with Jason data but I do want to show you how you can serve HTML pages and there&#39;s a few ways to do that this first way I&#39;m going to show you really isn&#39;t what you&#39;re going to do and that would be create a separate route for every single page you can you can do this in a much easier way by just creating a static server but I do want to show you this way just so you so you know how it works so this res uh this res object has a method called send file so I want to send an HTML file when we hit a route so I&#39;m going to create a folder called public public and let&#39;s say this is where we want to have our HTML files so I&#39;ll create index.html we&#39;ll just go ahead and create a boiler plate here I&#39;ll just say welcome say welcome to the homepage and then I&#39;m also going to create an about. HTML and we&#39;ll say welcome to the about page okay so we have these two HTML files now I&#39;m going to go into this this uh root route and let&#39;s do a res. send file and this will take in an absolute path to whatever you want to load and there&#39;s a few ways we can do this I&#39;m going to go ahead and bring in the path module so we&#39;ll say path I&#39;m going to require and this is just a uh it&#39;s kind of like a utility to just help with file paths so so in this send file we can use this double uncore durame and that will basically give us the path to the current file that we&#39;re in or the current location that we&#39;re in I should say the directory and then from there we want to go to the public folder and then the index HTML that&#39;s the page that I want to load so we can actually wrap this in path. jooin which just allows you to join together folders and files so we&#39;ll say from the durame then we want to go into public then we want to go to index.html so that&#39;ll give us the absolute path to that to the index HTML file so I&#39;m going to save that and actually you know what let&#39;s just copy this and we&#39;ll do the same with the about change this to about HTML and now if I reload the homepage here we get welcome to the homepage if I go to slab we get welcome to the about about page so that&#39;s one way to do it if you just want to load HTML files but you can imagine if you have a lot of files you&#39;re going to have to create a bunch of routes just to load a single page and that&#39;s kind of silly so what you can do is use the the express static middleware so to do that we&#39;re going to come right here and we just need to add a line so let&#39;s say setup we&#39;ll say setup static folder and basically we&#39;re going to declare one of our folders to be static meaning you can just go to the URL and it will just work and we&#39;re going to set public to be our static folder so to do that we can say app. use because this is middleware middleware is just a function that runs between the incoming request and the outgoing response and we want to pass in here express. static just like that now this takes in the location of what you where you want your static folder which in our case is public so we can again use path. jooin and same thing we&#39;ll just do double uncore durame and then uh we want to go to public okay so if I do that and then I just get rid of these two routes completely and we come back to the homepage and reload it still works now if I go to slab even though I have that about. HTML it&#39;s not going to work because I actually have to specify the HTML if I do that it does work so now anytime I wanted to create an HTML like let&#39;s say I want contact uh. HTML all I have to do is create it in this folder and it will automatically work I don&#39;t have to create a separate route for it so that&#39;s how you create a static server with no. JS now I want to move on to working with Json data because the chances are that&#39;s what you&#39;re Learning Express for and and again I&#39;ll get into template engines as well which allows you to load HTML pages but also use Dynamic data you can pass data into the route and into the page but uh let&#39;s go ahead and um we&#39;ll just leave this the static here well no let&#39;s comment it out for now because we&#39;re going to use it later because I do want to show you how we can interact with our Json data with uh through these HTML files but for now we&#39;ll just comment that out and let&#39;s create a new row we&#39;ll say app.get and let&#39;s say I want this to be SL API that&#39;s a common uh convention is just to to have if it&#39;s adjacent API prefix all your endpoints with API so we&#39;ll say API slash and let&#39;s do post and then we have our request response our function and usually you&#39;re going to be dealing with a database but let&#39;s let&#39;s just go ahead and hardcode some posts here so we&#39;ll say cons post actually I&#39;m going to use let and you&#39;ll see why later but we&#39;re going to use let and let&#39;s set an array and all I&#39;m going to have is an ID and a title I&#39;m not going to get crazy here so we&#39;ll say id1 title oops we don&#39;t want quotes around that title we&#39;ll say post one what I got two colons there so post one and then we&#39;ll just copy that down a couple times post two three change this up 2 three all right so let&#39;s just pretend that this this isn&#39;t a database so we want to serve these posts through this endpoint so let&#39;s do res. now we can do res. send and like I showed you before you can pass Jason in there or you can pass a JavaScript object and it will get pared as or stringified as Json but there&#39;s also o a specific Json method and that&#39;s what I prefer to use so we&#39;re going to do res. Json and then simply pass post which is just a JavaScript array of objects but if we go to back to Chrome now and we go back to let&#39;s go to SL API slost now we get our Json post okay and you could you could hit this endpoint from your react application or view or your mobile app whatever it is you&#39;re using you could hit that endpoint and get this data dealing with adjacent API the browser isn&#39;t the best tool to use because you want to you want to be able to test post and put and deletes so there&#39;s a ton of tools that you can use to do that Postman is what I prefer and there&#39;s a desktop version there&#39;s also a vs code extension which I have installed so that&#39;s what I&#39;m going to use if you want to use that as well just search for Postman under extensions so this right here you can install it you do have to create an account but it&#39;s free so you can just install it and then you&#39;ll have this little icon here and then you can simply open up the new HTTP request and then you can choose whatever method you want let&#39;s say get request to this right here Local Host 8000 API posts send it and you can see we get our Json data in the body here we can also see the headers here so we have like X powered by Express we have the content type which is automatically application Json content length Etc all right so this is what I&#39;m going to use from now on and we don&#39;t I don&#39;t even have to leave vs code to to make my requests now before we move on to to other routes and all that I just want to talk about environment variables so basically you have variables on your system that you can use uh called environment variables and you can also create them in a file called EnV now prior to uh I think it was I don&#39;t know a couple versions of node.js a couple versions ago you had to use a third-party package called EnV but now you can actually use envir an EnV file without using that package so I&#39;m going to show you how to do that real quick so let&#39;s create a file called EnV and usually if you have like if you have like a Google API key or something like that you&#39;ll put that in this file so you don&#39;t want to push this to to GitHub or anywhere else so that&#39;s why usually you want to put this in your G ignore file now I don&#39;t have any API keys or anything so all we&#39;re going to put in here is the port number and I&#39;m going to put that to just for now I&#39;ll put it to 8080 just so we can we don&#39;t need a semicolon just so we can make sure that this this is being used and then in server.js what I&#39;m going to do is come up here I usually like to put this at the top and we&#39;ll create a VAR aable called port and I&#39;m going to set that to process. EnV Dot and then Port because that&#39;s the name of the environment variable okay now you should also have a fallback just in case that doesn&#39;t exist so we&#39;ll say or 8,000 and then down here where we&#39;re connecting to 8,000 here and here I&#39;m going to change that to well here we need to use a we need to use this syntax because it&#39;s a variable okay so now we&#39;re using that Port variable so this is going to look in the EnV now it&#39;s not going to work by default in fact if I restart the server you&#39;ll see it&#39;s not using 8080 as we have in the EnV it&#39;s using 8,000 it&#39;s using the fallback the reason for that is because you have to actually you have to explicitly describe the EnV file in your package.json so right here where we&#39;re running the dev script we&#39;re going to add- dv- file equals Dov like that okay so now I&#39;ll save and let&#39;s now restart the server and now you&#39;ll see it&#39;s running on 880 okay so that&#39;s how you can use a EnV file without having to use the EnV package now I&#39;m going to change that this to 8,000 I just wanted to show you that it was working so I&#39;m going to change that restart and now it&#39;s back to 8,000 now what if we want to get a single post let&#39;s create a route for that actually I&#39;m going to put a comment here so this is to get all post and then what we&#39;ll do is just grab that and I&#39;m going to show you later on how we can create a separate file for routes but for now we&#39;ll just put it in here so this will get a single post and we want to be able to put API slost slash and then when whenever the ID if it&#39;s post with an ID of one then we want to be able to get it by passing in a one so since this is dynamic this param here we have to prefix it with a colon and then whatever we want to call the param in this case we want to call it ID you might have like a if it&#39;s a a blog post you might have maybe a slug or something like that but we&#39;re just going to stick with an ID now how do we get whatever is passed here in our function here well we do that let&#39;s console log we do that with the request object and on that there&#39;s a pams object let&#39;s just go ahead and console log that so I&#39;ll make the request to API post SL1 and when I send it you&#39;ll see that now we have an object with an ID of one and notice that it is a string by default okay so that&#39;s how we can get it we can do request. prams and then doid or if this was slug we could do prams do slug plug so let&#39;s make it so we get that particular post so what I&#39;ll do is first of all just create a variable call ID and I want a parse int so I want this to go from a string to a number so we&#39;re going to pass that into parse int request. perams doid okay so now we have the the the ID now let&#39;s filter the post so we&#39;re going to respond with Jason and then we can use filter and I&#39;m assuming that you guys know filter that you know all this this JavaScript stuff if not then you might want to just pause Learning Express and kind of get into just JavaScript a little more but filter will take in a function basically we&#39;re going to Loop through and for each post we want to say if that post the current iteration if that post ID is equal to the ID that&#39;s passed in right here here which is this variable now then that&#39;s what we want to show that&#39;s what we want to respond with so let&#39;s go ahead and save that let&#39;s come back here and send and now you can see we get just the I the post with the ID of one if I do two we get the post with the ID of two now if I do let&#39;s say 200 which we know doesn&#39;t exist right now it just gives me an empty array because it&#39;s filtering through and it doesn&#39;t doesn&#39;t find a post with that ID in reality you should probably have this return a 404 not found with an error message and we&#39;ll get to that we&#39;ll get to error handling but before we do that I want to talk about getting query strings so for instance if we were to go to API slost and then do question mark limit equals two maybe you want to limit the the amount of post that come back how do we get this value well we can still use the the request object right just like we did here but instead of request pams it would be request. query so this is the route we&#39;re looking at where we want to be able to get it so let&#39;s just do a console log of request. query okay and then we&#39;ll make that request again and now in the console you can see we have an object limit to and it is a string by default and if I were to add onto this an Amper and then maybe we want like sort equals DEC now you&#39;ll see that that is also added to that object so let&#39;s make the limit work we won&#39;t do the sort now but let&#39;s let&#39;s actually make that limit works so we&#39;ll come back in here now one thing you have to realize when you&#39;re dealing with with backend development is anytime a user can change the data right like in this case you have to just be aware of that and be aware of what you&#39;re doing with that data because it&#39;s possible someone could put like a a an SQL query in here and really screw things up that&#39;s called SQL injection um in this case obviously we&#39;re not even using a database but you just have to you just have to be aware of that okay and the type of data that you expect should be the only type of data that that can be accepted so in this case we want a number right in particular we want a number that is positive because it&#39;s a limit so let&#39;s first of all let&#39;s um let&#39;s say put this in a variable I do want to parse it as a number so let&#39;s say parse int and we can get it with request. query. limit okay so that&#39;ll give us the actual number and there&#39;s a ton of different ways you could handle this what I&#39;m going to do is just check and I&#39;m going to say if not Nan or is Nan is n n right which stands for not a number so is Nan is a a function that will return true if it&#39;s a number and false if it&#39;s not so we want to say if it&#39;s not is a number limit and then we also want to make sure that it&#39;s positive so we&#39;ll say and if that limit is greater than zero okay so if that if those conditions are true then we want to respond with Jason um except we want to only return the whatever the limit is so we&#39;ll say post so we have our post array and then I&#39;m going to use the slice method and say I want to go from zero to whatever the limit is and then we can do an else and then move this into here because if there&#39;s no limit then we just want to return all the pose all right so let&#39;s let&#39;s try that out we&#39;ll save it and let&#39;s try it without any kind of limit so we still get all three but then let&#39;s do question mark limit equals 2 we get two if we do equals one we get one all right if we do 10 of it&#39;s just going to give us all of them all right cool so that&#39;s how you can deal with query strings now status codes are really important you should have a basic understanding of the the main status codes the the ranges like 200 means success um 300 you have redirects 400 you have client error 500 you have server errors so let&#39;s um let&#39;s be specific about the the actual statuses we&#39;re sending back when you just do res. Json it&#39;s it&#39;s going to default to 200 however I like to still specify 200 explicitly even though I don&#39;t have to I think it just makes it more readable so what we can do is do a res. status and you can pass in the status you want to send back so in this case I&#39;m going to say 200 and then you can actually chain on the Json so we can do it like that and same thing here we&#39;ll say res. status and you can just send the status without any content uh without the Json but we do want to send the post back so we&#39;ll say 200 and then Json all right same thing down here so res. status 200 now let&#39;s make it so that when that post doesn&#39;t exist we get a 404 and a message so I&#39;m actually going to just get rid of that whole thing there and we want to put the post in a variable because we want to be able to check for it and we can use find here so post. find and let&#39;s pass in here so for each post and we want where the post. ID is equal to ID and then we can check for that post or we&#39;ll say if not post so if the post doesn&#39;t exist then let&#39;s say res. status and this time we&#39;ll send a 404 and then you don&#39;t have to but I also would like to send a message so we&#39;ll say MSG and we&#39;ll actually let&#39;s use back ticks here and we&#39;ll say uh we&#39;ll say a post with the ID of ID was not found okay and then we&#39;ll say else so if it is then we&#39;ll say res. status and we want to send a 200 and then as far as the data we send back that&#39;s going to be the post all right make sure this is singular post not posts so let&#39;s try that out so if we go to API slost SL1 we get post one go to slash two we get post two if I go to post sl200 then you see over here I get a a 404 not found for the status and we get this message a post with the ID of 200 was not found all right so that&#39;s how you can send different statuses um and you always want to make sure that you have a proper response if what you&#39;re looking for is not there now just to kind of clean this up a little I don&#39;t really like to have the else&#39;s here so typically what I&#39;ll do we&#39;ll start with this where we&#39;re checking to we&#39;re making sure that the limit um seeing if the limits there since we have two res. statuses we can do this and just have an if else but what I&#39;ll usually do is not have the else so we&#39;ll go like that but if we do it this way then the first one here we want to return so that should work the same way so let&#39;s try it out if we go to SL poost okay so that still works and then here instead of using the else so we&#39;ll get rid of this but this first first one even though it&#39;s within an if we still want to have a return like that I think I just think that cleans it up a little bit all right so now we know how to create routes we know how to get route pams we know how to get query pams we know how to send different statuses now let&#39;s move the routes to a separate file because you can only imagine if you have a bunch of resources like post users categories and then you have a bunch of routes for each resource this file can get filled up pretty quickly so you&#39;re usually going to have a separate file for your different resource routes so let&#39;s create a folder in the root and we&#39;ll call it routes and let&#39;s create a file called posts. uh post.jpg we&#39;re going to be using the express router so first off let&#39;s bring in Express and then let&#39;s we&#39;re going to be using the router so we can do that by defining a router variable and then setting that to Express dot and then capital r router like that all right so the way that this works we can actually just copy or not copy but cut the two routes that we have here okay so I&#39;m just going to cut them out of that file we&#39;re going to bring the post into the routes file as well but let&#39;s paste those in and let&#39;s also cut this okay so we&#39;ll cut that so we&#39;re really cleaning up the server JS and we&#39;ll put that here all right now instead of using app because obviously we don&#39;t have access to app anymore that&#39;s being defined in the server JS we&#39;re now going to use the router so here let&#39;s replace that with router and replace this one with router so now anytime we create new routes we&#39;re going to be using the router instead and then very important you have to export that at the bottom here so we want to export as default router now we need to bring that in that router routes file into the server JS so up at the top here let&#39;s say const post and set that to require and we want to go into let&#39;s see do slash routes slost and then we&#39;re going to come down here let&#39;s say routes and what we do is we use app.use because this is in fact middleware so in the app.use we can pass in the endpoint that we want to use for that file which is going to be SL API SL poost and then as a second argument we pass in post now since we&#39;re defining API or SL API slost here in the actual route file we don&#39;t need to have API SL poost here again so instead we&#39;re going to get rid of this we still want the ID for this particular route so this would just be slon ID and then this would just be slash okay because if you were to leave this and that then it&#39;s going to be slash API poost twice obviously we don&#39;t want that so let&#39;s save and let&#39;s make sure that everything well looks like we&#39;re getting unexpected token export um oh we&#39;re still using commonjs modules which I should probably change up so with commonjs we would say module exports router okay so now let&#39;s try it out so API post that works API post one that works all right now I do want to switch it up to es modules I prefer that over the the commonjs require syntax so you don&#39;t have to do this if you if you want to stick with this with the you know the standard node.js module syntax you can but I like to to have the same syntax on the front and back end so I&#39;m going to go into package.json and I&#39;m going to set type to module instead of commonjs now we need to switch up let&#39;s go to server JS first we can replace this with import Express Express from Express and then for path I know we&#39;re not using path right now but we will so import path from path and let&#39;s see for we&#39;re going to import posts from do slash uh what is it yeah dot slash routes slash now when you&#39;re using this synta the es modules with no. JS you do have to do the JS if it&#39;s a file all right so we&#39;ll save that and then where else do we need to put this in the actual route file we&#39;re going to replace this okay and I think that&#39;s it let&#39;s see what&#39;s going on here ah the export so in this the post route file now we can change this module. exports to export default posts uh I&#39;m sorry router all right so now everything should work let&#39;s try it out okay we can get that good so now we&#39;re using ES modules the next thing I want to do is show you how we can get data from the request body so let&#39;s let&#39;s make it so we can make an actual post request and submit a new post and I know we&#39;re not using a database but we&#39;ll just add it to to memory so I&#39;m going to open up a new uh Postman tab so we&#39;ll say new request and I&#39;m just going to move this over here okay and I want this to be a post request and it&#39;s going to be the same endpoint API poost but I want to be able to go to the body here and either send Rod Jason or use this www form URL encoded where we can just put like you know title I think title is the only field that we have for posts but this kind of replicates a form a web form so in order to get the the body data we actually need to add a couple lines of middleware we don&#39;t have to install anything you used to actually have to install a separate body parer package but now it&#39;s just included with Express so let&#39;s go right here and let&#39;s say body parser middleware and we&#39;re going to say app.use and pass in here express. Json like that so this line this will take care of being able to submit raw Json but again I also want to be able to use URL encoded data so we need to add one more line app.use and in here we&#39;re going to say Express . URL encoded and that just takes in an object and we&#39;re going to set extended to false so that will allow us to send the form data now let&#39;s create a new route so obviously that&#39;s going to be in our routes post JS file so we&#39;ll go right here let&#39;s say create new post and we&#39;re using the router now since this is going to be a post request instead of router. get we use router. poost and again the the end point is still going to be API SL poost so here we just need to put a slash because remember we already have this defined right here so now create a new post and we&#39;ll have our function with recres okay and then to get the the body data let&#39;s just do a console log here I&#39;m going to do request. body and if you if you took the node.js course crash course you remember we did do this but it&#39;s it was a lot more difficult you actually got a buffer and then had to turn it into a string um it&#39;s it&#39;s much more complicated Express makes it really easy and then for the response we&#39;ll just say res. status now a 201 means successful and it means something was created and then let&#39;s also add post I know we&#39;re not actually creating a new post yet but that&#39;s the the response we&#39;re going to want so if we go to make a post request to API poost right if I just send it as is then we&#39;re getting all the posts and we just have an empty object but let&#39;s go to this form URL encoded and let&#39;s add title we&#39;ll say my title is the value and send and now you can see we get this object of we have title and my title so we can access this value right here with rec. body. tile so let&#39;s go back into here and if you want to pause the video and and try this yourself basically you&#39;re just pushing it onto an array there&#39;s no omm or anything with with a database um if you want to pause it and try it you can but I&#39;m going to go ahead and just create a variable called new post and there&#39;s so many ways to do the same thing that&#39;s like I said earlier about Express it&#39;s very unopinionated so you can do things how you want so I&#39;m going to create an object and let&#39;s say ID and I&#39;m going to just keep it very simple and take the length of the post and then just add one to it for the ID okay so we&#39;re keeping it simple in reality you&#39;d be adding it to a database and most of the time the database is going to give you the ID um automatically and then for the title this is where we can access request. body remember it&#39;s that object which will have the title on it all right and then let&#39;s say if there&#39;s not if that new post doesn&#39;t have a title then let&#39;s return a 400 because that means it&#39;s a client error so it&#39;s something the the person making the request did did something wrong so we&#39;re going to say return res. status 400 and then we&#39;ll add on uh message so here we&#39;ll say message and we&#39;ll say please include a title okay um else so basically if there is a title title then we just want to add it to the array so let&#39;s say post. push and pass in here our new post and we&#39;re still sending this back so let&#39;s go back to postman and I&#39;m just going to change my title to uh yeah I guess we&#39;ll just say Brad&#39;s post and I&#39;m going to send and what I get back is my post and you can see that there&#39;s a new one here with an ID of four with the title of Brad&#39;s post now obviously that&#39;s not going to persist if I restart the server it&#39;s going to just go away because it&#39;s not being put in a database but it gives you an idea of how this would work also in reality you&#39;d have your your form whether it&#39;s just regular HTML CSS JavaScript or if you&#39;re using react view spelt something like that now I think it&#39;s it it&#39;s only natural that we finish this as a a crud API and do a put which is an update and also a delete request so let&#39;s go under where we did the post and Let&#39;s do let&#39;s say update yeah we&#39;ll do update post and we&#39;ll take our router and put is normally what we use for updating you can also use patch I prefer a put though and when we update a post obviously we need to know which one we&#39;re updating so it&#39;s going to be API slost slash and then whatever the ID is and then we&#39;ll have our function with our request response and we want the ID so remember we can get that I&#39;m going to par it I&#39;m going to parse int and we can get that with request. prams doid so that&#39;ll give us the ID then let&#39;s get the post so we&#39;ll get that with find so we&#39;ll take the post array and find and then for each post we want to uh we want to get where the post ID is equal to the ID in the URL then we&#39;ll check for the post so we&#39;ll say if not post then let&#39;s return re and we&#39;re going to do a status of 404 not found and we&#39;ll just P put a message in here and actually let&#39;s use back ticks and we&#39;ll say no what do we what do we do up here um yeah we can just copy this all right and then to do the update I&#39;m just going to Simply take the title so post title and I&#39;m going to set it to request. body. booty request. body. tile and then we&#39;ll do a res status of 200 and we&#39;ll send back the post and that will include the updated post so let&#39;s try that out so let&#39;s say we want to update slash we&#39;ll do two and I want the title we&#39;ll say updated post and then we send that and what we get back well we&#39;re getting a 404 oh that&#39;s because I&#39;m making a post request this should be put so now you can see id2 the post with the id2 has a title of updated post so that takes care of the put request now let&#39;s do the delete so under that we&#39;ll say delete post so router actually you know what we could just copy what we just did delete post and this is going to be a delete request same thing it&#39;s going to we need the ID so we&#39;re going to keep that we&#39;re going to um par it as an INT and then we&#39;re going to find the post we&#39;re going to check for it and then uh let&#39;s see all we&#39;re going to do get rid of that all I&#39;m going to do is basically overwrite the post that&#39;s why I used let when I Define the array so we&#39;ll say post then equals post. filter and let&#39;s pass in our function for each post and uh we want to say where the post ID is not equal to ID so that&#39;ll return all the posts except for the one with that ID and then say that we can leave this because we want to just send back all the posts with the one that&#39;s deleted should be gone so let&#39;s I guess we could just use this so let&#39;s do delete and we&#39;ll do Post slash1 send and now you can see the ID with one is gone so we now have a full fraud API create read update and delete now again obviously in the real world instead of doing this kind of stuff you would be working with a database and you&#39;d use some kind of om for instance if you&#39;re using mongodb as your database there&#39;s an OM called Mongoose and it has methods like find um delete things like that and you would be finding and deleting from the database rather than from just a hard-coded array like we&#39;re doing here here in fact the code would you have less code because we have to write more JavaScript to deal with this hardcoded array than we would to just uh to use a few methods with and if you&#39;re using a SQL database SQ eyes is a really popular orm for node.js so that takes care of creating an API now what I want to do is talk a little bit about middleware so middleware functions are functions that have access to this request and response object and they can do anything I mean you can use it for logging you can use it for authentication you can add to the request object here for example a lot of the authentication middlewares will allow you to add like a rec. user and then in your row you have access to the currently logged in user now I&#39;m just going to do something simple we&#39;re going to create some logger middleware that will show the method and the end point in the console whenever a request is made and you can have middle Weare run on either the route level so in any one of these routes or at the app level where it runs no matter what route is hit so let&#39;s start off by just creating uh a function uh we&#39;re not going to keep this here but I&#39;m just going to put it here for now so we&#39;ll make this an arrow function now middleware functions take three things in the request and response remember I said they have access to those and then also next which is a a function that you&#39;re going to run at the end of your your middleware function because what that does is it calls the next piece of middleware in the stack so in this logger function let&#39;s do a console log and like I said we have access to everything that&#39;s on this request object including the method the protocol the just everything cookies if you have any so what I want to do is just log let&#39;s put some back ticks in and then I want to use a variable so I&#39;m using the money sign the template literal syntax and let&#39;s get the method we&#39;ll put that first and then outside of that curly brace let&#39;s put the protocol so request. protocol which would be HTTP then we&#39;ll put colon SL slash and then we can get the host name with doget and then just pass in host okay and then after that curly brace let&#39;s put the the original URL property so request. original URL and then finally we need to call next which again we&#39;ll just call the next piece of middleware in the stack so as I said we can implement this on a route level or the app level so let&#39;s start with the route level let&#39;s say I want this logger to run only on this get all post route so for middleware to run we just have to add it as a second argument so I can simply pass in logger like that and now when I hit API slost you can see it&#39;s logging it&#39;s a get request Local Host 8000 API post if I go to API post SL1 then it doesn&#39;t run because it&#39;s only being passed into this one route now you might have middleware you want it to run on all routes on the app level so in that case we&#39;re not going to do this so we can get rid of that and we don&#39;t want this function in this file because we want to use it in our server JS so commonly what you&#39;ll do let&#39;s cut this commonly what you&#39;ll do is have a folder for your middleware and we&#39;ll create a new uh we&#39;ll create a new file here called um logger.log or you could call it like logger middleware and we&#39;ll paste that in and then we just want to export that as default okay then we&#39;ll bring it into our server JS so let&#39;s import logger that&#39;s going to be SL middleware SL logger JS and then all we have to do is is wrap it in app. use that&#39;s how we use middleware so I&#39;ll say logger middleware app.use and we&#39;re just going to pass in logger so now let&#39;s make a request so this is API post one and you can see now it&#39;s logging that if I do just API post still logging it if I go to the delete so any request I make now it&#39;s going to log it down in the console so that&#39;s how you can create and Implement middleware so now I want to look at error hand Ling now Express comes with a default error Handler if you make a request to something that doesn&#39;t exist like let&#39;s say we go API SL test you&#39;ll see this is the default error Handler it gives us a 404 but it actually gives us an HTML page and if you&#39;re building an API obviously that&#39;s not what you want so I want to show you how we can create a custom error Handler that will give us a Jason response along with the status code that we want so let&#39;s go to our routes and we&#39;ll start with the single post so basically wherever we&#39;re sending these 404s I want to instead of doing that here I want that to happen in the error Handler so let&#39;s actually uh I&#39;m going to just all I&#39;m going to do is copy this right here the message itself and then I&#39;m going to get rid of this return that&#39;s inside here and I want to be able to go like this oh or yeah we want to be able to do new error this is what fires off the error Handler by saying new error and we&#39;re going to pass in a message like that okay now we do have to call the next function and next can get passed in as a third parameter up here so we&#39;re going to pass next into the actual route Handler and then underneath where we just said new error we&#39;re going to return next but we want to pass the error in there as well so let&#39;s do this error like that okay so in order for for this to work we have to create an error Handler which is going to be a piece of middleware so in middleware let&#39;s create a new file called error. JS and we&#39;re going to say const error Handler now just just like any other middleware this is going to take in request response and next however the very first thing it&#39;s going to take in is error and just by doing that just by passing this first error in it&#39;s going to run when we do this now as far as what I want to put in here for now let&#39;s just do a res. status and we&#39;ll just do 404 and then Json and for now I&#39;ll just do a hardcoded message so we&#39;ll say MSG and I&#39;ll just say error and we just want to make sure we export as [Music] default now to use this just like any other middleware we need to wrap it in app.use so let&#39;s bring it into our server JS so import error Handler and we&#39;re going to do you put the app. below the routes here otherwise we could have some conflicts so say error Handler app. okay now it should work if we if we get that error right so if we if there&#39;s no post with the ID that we pass in then it this should run this should run so let&#39;s try it let&#39;s go to API slost sl100 and there we go so we get a 404 not found we get message error now obviously we want this to be more specific right so we&#39;re passing the message in right here so we can access that through this object so right here let&#39;s say for the message instead of just uh Str ring of error let&#39;s say error do message so now we&#39;ll try that again and now we get the correct error message now at the moment it&#39;s it&#39;s always going to be a 404 right and I don&#39;t want that what I want to do is check to see if we if we set a status in the route if we didn&#39;t then I want it to be a 500 by default which is a server error so what I&#39;m going to do is say if let&#39;s say if the error. status then we&#39;ll say res. status set it to whatever that error status is and then Json and in there we&#39;re going to do message and set it to error. message okay else if there is no if there is no status defined then let&#39;s make it a 500 so I&#39;ll change this to a 500 all right so now let&#39;s try it again we&#39;ll try to get Post 100 now we can see we&#39;re getting the correct message but it&#39;s a 500 that&#39;s the default so all we have to do is when we Define this error here right before we return next we can just do error. status set that to 404 now hit send now it&#39;s a 404 okay so if it doesn&#39;t if it doesn&#39;t have an explicit uh status code then it&#39;s going to just be 500 now let&#39;s just use the error Handler in these the other routes where for instance uh where else did we use this like right here here so instead of returning the the res status Jason instead of doing it here we&#39;ll let the handler do it so I&#39;m just going to copy these three lines and let&#39;s go let&#39;s see is there anything up here that we need no so create new post so where we check for the title let&#39;s replace this this with this except I want it to be a 400 and let&#39;s say please include a title so let&#39;s see if that works if we go and we try to make a post request to API post and we don&#39;t include a title oh next is not defined so in in your route we just want to make sure that we add next and just add it to all of them so here that&#39;s better practice anyways just to make sure we have that even if you&#39;re not going to use it there we go all right so we&#39;ll try that again send with no title and there we go so we get a 400 bad request and please include a title so now let&#39;s find where else we can use the error Handler so right here so a post with the ID so basically we can do the same thing so this right here and then same thing right here yeah I think that&#39;s it so we&#39;re just letting it go through the Handler rather than than doing it here all right now I want to have a a catch all for like I said if we go to like API test which doesn&#39;t exist it&#39;s not a post that doesn&#39;t exist it&#39;s an it&#39;s a URL it&#39;s an endpoint that doesn&#39;t exist it&#39;s still giving us that HTML page so to have kind of like a catchall we&#39;ll go underneath let&#39;s see we&#39;re going to go under these routes we can do it so let&#39;s say app.use and let&#39;s pass in so we&#39;re just creating another middleware function so we got wreck res next and let&#39;s say const error equals new error so same thing we did in the routes let&#39;s say not found and the status so we&#39;ll say error. status set it to 404 and then call next and pass in the error all right so if we do that now if I try to go to API test which is an uh an actual endpoint or Route 404 not found and we get message not found and we could clean this up a little instead of having it in here we could just create another file and we&#39;ll call it not found. JS and then we&#39;ll just take the function here cut that we say cons not found equals so we&#39;ll do that then we&#39;ll bring it in up here yeah we&#39;ll just do that and we can just move that down here I think that makes sense so now that should do the same thing if we go to API test good so the next thing that I want to do is show you an example of using uh another package and we&#39;re going to use a small Library called colors that allows us to basically just add colors to the console and we&#39;ll make our little logs here pop a little more by adding color to it so you can either stop the server for a minute or you can open up another terminal I&#39;m just going to open up another one and I&#39;m going to run npm install colors and if you go to package.json you should have colors as a dependency so we&#39;re going to be using this in the logger file let&#39;s just close up some of this stuff that we don&#39;t need and we&#39;re going to go to middleware logger JS and we want to bring in colors so import colors from colors and the way that we can use this I believe we can just I haven&#39;t used this in quite a while but I believe we can just go like this add an array and and then put like red I think that&#39;s me let&#39;s see just try that yeah see so now it&#39;s red and it doesn&#39;t it right now it doesn&#39;t matter which requests we make or anything like that it&#39;s just all going to be red but what I&#39;d like to do is make it so if it&#39;s a if it&#39;s a get request will make it green if it&#39;s a post request will make it blue and so on and there&#39;s a lot of ways we could do that we could have a bunch of if else but I think to Define an object and Define a mapping of HTTP methods two colors would be the cleanest way to do this so let&#39;s go above the the console log and let&#39;s say const method colors and set that to an object and we&#39;ll say forget let&#39;s make that green for post blue for put we&#39;ll do yellow and then for delete we&#39;ll do red all right and then all we have to do is let&#39;s create a variable called color set that to our method colors and then the request. method because remember we have access to that or it&#39;ll just be white and then we can just replace this in this uh array here replace red with the color variable so now let&#39;s make a get request you can see that it&#39;s green if I make a post request blue put request I mean these are not found because it&#39;s API test but it doesn&#39;t matter it&#39;s still it&#39;s making the request so it&#39;s still going to log and then delete is red so it&#39;s just it it you can see how much Freedom you have with Express it&#39;s it&#39;s very minimalistic and you can use all types of libraries to to do what you want and and create any kind of middleware that you want you have total control over the whole request response cycle now the next thing I&#39;d like to do is move all the functionality from the routes file I want to have controller methods I think that that&#39;s a cleaner way to do this rather than just having all the the logic inside the route file I just want the route file to to point the correct whatever that endpoint and Method point to a controller method rather than putting everything in here so this would go in its own function in the controller file so let&#39;s create a new folder called controllers and then inside controllers we&#39;ll have a file called post controller.js and then in here we&#39;re going to define a bunch of different functions I&#39;m going to use Arrow functions so for instance we&#39;ll have get posts and we&#39;ll set that actually you know what we could do is just go to our uh routes post file and just grab this entire function right here and cut it so we&#39;ll cut that and then we&#39;ll set get post equal to that and what I&#39;ll usually do and if you&#39;ve ever taken my node.js courses or mstat courses in my controller methods I like to have a description and a comment just saying what it does so this will get all post and then I also like to put the route so we&#39;ll say a route uh in this case would be a get request to SL API SL post and then I I would also put access but uh we don&#39;t have authentication so there&#39;s no reason to do that so next we&#39;ll have let&#39;s do description get single post and then route this would be slash API SL poost slash and then the ID space that out a little more all right and then we&#39;ll have get post and set that equal to and we&#39;ll grab this cut that paste that in all right I&#39;m just going to copy this so the next one would be to create a post or create new post post and oh I forgot the method yeah so we want to do that and then post create post set that to this okay and I&#39;m just going to copy this again so we get two more we get the update and the delete all right so const all right so let&#39;s grab this so that&#39;s the update and then we got the delete oops okay so these these methods have to be exported you could either do it at the bottom or you can just simply put export before each one which is I guess what I&#39;m going to do okay so looks ort those now we want to import them into the routes file oh this to obviously we need access to the posts in the controller so that will go at the very top okay and then from here let&#39;s import from and then we&#39;re going to go let&#39;s see up one level into controllers and then post [Music] controller.js and then I&#39;ll we have to do is replace what we just cut out with the the name so get post this will be get post so you can see how much we&#39;re cleaning this up and let&#39;s see get poses oh I didn&#39;t bring them in so right here we need to bring in get all right so everything should still work the same so if I try to get post two okay that works if I try to get all posts if I try to get a post that doesn&#39;t exist okay error Handler is working good so I think that this is cleaner to have these these named functions here and then to have our routes that just point to those named functions and I just realized that I have create post here this should be delete post all right now what I want to do next is give you an example of how we can interact with our backend from the front end and we already have a public folder with some HTML files and I&#39;m not going to this is going to be very like very simple I&#39;m not going to create a UI with styled CSS or anything we&#39;ll just make it so we can have a button we click and it fetches data we&#39;ll also just have a simple form where we can add a add a new post add a title all right and we&#39;re going to do that that&#39;s why I kept this commented out because we&#39;re going to use this um this Express static middleware because I want to be able to use those HTML files now we&#39;re going to have an issue here and you&#39;ll see if I save this I get an error and if we look at this it says double undor dur name is not defined in es module scope the reason this isn&#39;t working this right here this this usually will you know get the C the current directory that you&#39;re in it doesn&#39;t work when you when you&#39;re using ES modules it&#39;s in the scope of the commonjs modules however there is a workaround so we&#39;re going to just uh just add a couple lines here to make this work so first thing I&#39;m going to do up here I&#39;m actually going to import a function from the URL from the URL package or the URL module which is is part of node.js so we&#39;re going to import from URL and the name of the function is file URL to path and then basically what we&#39;re going to do is create this our s because it&#39;s not available to us because well I mean if you&#39;re using commonjs it is available to you but if you&#39;re using this import syntax it&#39;s not so I&#39;m going to go right here let&#39;s say get the directory get the directory name so first off we&#39;re going to create double uncore file name that doesn&#39;t exist either anymore but we can create it oursel by using the file URL to path and then passing in import. met. url and what this gives you is your file URL to the the current file we&#39;re in it&#39;ll give us like file it&#39;ll look like this right and then path to whatever file we&#39;re in um I don&#39;t want the file URL I want the just the path and that&#39;s what this does is it gets you just the path and we can do a console log here of file name and even though we have the error it should still show us above that um right here so see this users Brad traversy desktop so that&#39;s that&#39;s my path and this is the file or server JS um to get the path name or the D the directory name let&#39;s say cons Dore durame all we have to do is then use the path module and there&#39;s a durame method that we can use and then we can just pass in that double uncore file name so now everything works right we&#39;re not getting any more errors so now that that works we have our static folder and if I were to go to Local Host 8000 we should see the homepage right because I have that index HTML I also have that about page so if I go to slab HTM ml shows me the about page now this this index HTML this is where I want to have some frontend JavaScript to fetch the data from my back end and you&#39;d probably be using something like react some kind of front-end framework or Library um we&#39;re not doing that we&#39;re just using vanilla JavaScript but the way that you would fetch data and stuff is going to be the same you&#39;re going to use the fetch API or something like axios so let&#39;s go to the public folder and then index HTML and I&#39;m just going to change a couple things up here we&#39;ll say post again this isn&#39;t going to be like a nice looking UI or anything so H1 we&#39;ll say post I&#39;m going to have a button and given an ID of get- post- BTN say get post and then let&#39;s have an out output ID and then we need a front-end JavaScript file so we&#39;ll have a script tag with a source let&#39;s say [Music] sljs main.js that&#39;ll be our front-end JavaScript so in public let&#39;s create a folder called JS and then create a file called main.js all right and then let&#39;s go ahead and I&#39;m sure that you guys don&#39;t really need me to explain much here it&#39;s just frontend JavaScript we&#39;re going to use document. Query selector and I want to get that output ID element and let&#39;s also get the button so get- post- BTN and we&#39;ll call this uh button all right and then I&#39;m going to have a function we&#39;ll make this an async cuz I&#39;m going to be using a sync of weight so we&#39;ll make an a async function called show posts and let&#39;s just say get and show post all right so we&#39;ll say const res set that to await Fetch and we want to fetch from our API so HTTP and Local Host Port 8000 SL API slost same endpoint that we&#39;ve been using in Postman and then we&#39;ll say if um so if not res. okay so something goes wrong and we can&#39;t fetch then let&#39;s just do throw new uh throw new error say failed to fetch failed to fetch posts okay then underneath that let&#39;s say cons post set that to await the res. Json and we&#39;re going to take the output dot enter HTML I&#39;m going to set that to an empty string to begin with okay then we&#39;re going to Loop through the posts so we&#39;ll say post dot for each I mean there&#39;s a million ways to do this this is just a very quick way so let&#39;s say for each post then we&#39;re going to let&#39;s say post element uh we&#39;ll set that to document dot so I&#39;m going to create an element for each post and that element will be a div okay then we&#39;ll take our post element d and let&#39;s add some text content and set that to the post. tile and then we&#39;re going to take the output and append child and we want to append that post element okay we should probably put this in a try catch so let&#39;s do that just take this okay and in the catch just do a console log and we&#39;ll say error fetching posts all right now we just need an event listener so let&#39;s say event listeners we&#39;ll have the button and let&#39;s listen for a click event and when we click that we&#39;re going to call show post all right so let&#39;s go to our homepage and now if I click get post there we go post one two and three right if I were to add a new post by making a a post request of a title let&#39;s say new post send okay and then I go back here there we go see our new post so now let&#39;s make it so we actually have a form here an input that we can add a new post so let&#39;s go back to the HTML and I mean I know that a lot of you guys probably already know this stuff but it&#39;s just for those of you that aren&#39;t really familiar with full stack development how we can interact with our API with our back end from the front end so I&#39;m going to add just a very simple form so we&#39;ll put this let&#39;s see we&#39;ll just put this under the H1 say form no action but I am going to give it an ID of add post form and we&#39;ll give it a label let&#39;s say for title and I&#39;m just going to put a line break I&#39;m not using any CSS at all so we&#39;ll put an input let&#39;s let&#39;s give it an ID of title type is going to be text we&#39;ll give it a name of title and we&#39;ll put a line break here as well and then let&#39;s do a button give it a type of submit okay so we should now have a very ugly looking form and when we submit this obviously we want to make a post request and add some data add a post so let&#39;s go back to our main JS our frontend JavaScript and let&#39;s create a function so this will be also async function we&#39;ll call it add post and I&#39;m going to pass in our event param we want to prevent the default Behavior so e. prevent default then for the form data I&#39;m going to set that equal to new a new form data object and pass in this and then we can get the title with form data doget and title all right so that&#39;ll give us the title then for the request I&#39;m going to put that in a try catch and let&#39;s say conr set that to a wait Fetch and we&#39;re going to make a request to http Local Host 8000 API poost now we want this to be a a a post request so we&#39;re going to pass in an options object as a second argument with a method of post and we&#39;re going to set headers and we want to set the content type I want to set that to application SL Json and the body so the data we&#39;re going to send we&#39;re going to wrap this in json.stringify and pass in an object with the title all right and then after that let&#39;s check to see if it&#39;s not okay so we&#39;ll say if not res. okay then throw we say Throw new error and fail to add post okay then here let&#39;s say const new post set that to await res. Json then I&#39;m going to create post element document dot uh create element that&#39;s going to be a div okay then we&#39;re going to take that post element and we&#39;re going to add t text content which is going to be the new post. tile and then we just want to append that to the output so output pen child post element and then in the catch here let&#39;s just do a we&#39;ll do a console. error all right and then we just need another event listener that&#39;s going to be on the form which did I bring in I didn&#39;t bring that in so up here add post form form it&#39;s going to be a submit and it&#39;s going to call add post all right and actually we want to let&#39;s show the post after too so right at the end here we can just call show post this is just very very quick JavaScript that I just created um so this should work though so let&#39;s reload it let&#39;s go ahead and say Brad&#39;s post add post and there we go and I can you know keep adding them cool so just an example of frontend JavaScript working with our backend API so where we at now I think I think that I&#39;ve covered everything I wanted to as far as you know building an API I I do want to get a little bit into template engines because you might want a build just a a server side app similar to like what you would do with PHP um and there&#39;s a bunch of template engines you can use ejs embedded JavaScript is my favorite um I think it&#39;s it&#39;s very similar to how PHP works as far as the tags go and all that and I I don&#39;t want to use it in this project so I think what I&#39;ll do is just create a whole new folder and and go from there so I&#39;m going to stop this server and I&#39;m going to close that up and then create something else so let&#39;s do this isn&#39;t going to be very long I&#39;m not going to get too deep into it so let&#39;s create uh I&#39;ll make a directory call this Express 2 CD into Express 2 and open up vs code all right let&#39;s put this in here my little square okay so we&#39;re going to basically just start from scratch here but I&#39;m going to go kind of quick so npm and nit and then we&#39;re going to create I&#39;m going to call it app.js this time and let&#39;s install Express npm install Express now we&#39;re also using ejs so let&#39;s install that as well so Express and ejs those should get added as dependencies and then I&#39;m just going to add a script start script here so this will be node not server node app and then let&#39;s do a Dev and this will be node d-at app and let&#39;s use es modules you don&#39;t have to but that&#39;s I just prefer it so we&#39;ll say not module type and module all right so we&#39;ll just create a basic server so we want to initialize Express and we want to listen I&#39;m not going to bother with environment variables or anything like that just say server started all right [Music] so the way that we configure ejs is actually very simple so let&#39;s say config ejs so basically we just got to set the the view engine so we do that with app. set and we want to set view engine and then we also want to pass in ejs as a string then we also want to set the the folder that we want as our views folder so let&#39;s say app. set I think it&#39;s views by default so you might not need to add this but I do anyway so I want to set the view view folder to a folder called views all right and then let&#39;s see we&#39;ll create a route let&#39;s say app.get so app.get slash and request request response now since we we&#39;re using a template engine we have access to res. render so if I say res. render and I pass in here index it&#39;s going to look for an index page in My Views folder so let&#39;s create that let&#39;s say new folder views and inside that we&#39;re going to create index Dot and it&#39;s going to be ejs is the extension that we want to use and in here let&#39;s just create like a basic HTML I&#39;ll just say welcome H1 welcome all right now I&#39;m going to run the server so npm runev so server started now let&#39;s go to the browser let&#39;s go to Local Host 8000 and we get welcome okay so it&#39;s using v um VJs it&#39;s using ejs now what&#39;s really cool about these template engines is not just that we can render HTML pages I showed you that in the very beginning but we can pass in Dynamic data right so if you have if you if you have like if you fetch data from a database you can pass it into the view now I&#39;m not using a database but just to show you how to pass data we can just add an object as a second argument here and let&#39;s say we want to pass in title so we&#39;ll say title welcome and then let&#39;s say message and we&#39;ll say hello from ejs all right so I&#39;m passing these these variables in title and message and then I can go into my my page that I&#39;m rendering let&#39;s say for the title instead of welcome I want to show that variable and the Syntax for this is going to be an angle bracket and then percent sign and then equals and then whatever the variable and then close it with percent brackets so very similar to PHP and then let&#39;s say we&#39;re I have this H1 that&#39;s where I want to put the message so again I&#39;ll use my percent equals and then message and then percent angle bracket okay so now we&#39;ll check that out if I reload we get welcome in the in the tab here and that&#39;s coming from this right if I say my website so now my website in the title we got hello from ejs which is the message so you can pass this Dynamic data in you can also pass in arrays so let&#39;s say we want to pass in we&#39;ll say people make that an array John uh Jane and Jack all right so now I got these people and ultimately these would most likely come from a database and then let&#39;s say I want to put them in a UL so I&#39;ll use my ejs syntax and we can take that people variable which is an array and then do four each and say person and open curly brace and then we can close off this line and then down here we&#39;ll open up another one and that&#39;s where we&#39;ll have our closing curly brace in parentheses and then in the middle here we could put An Li and then we could output each person okay so let&#39;s try that reload and there we go so this is good if you have something if you have a a project where you don&#39;t really need uh a very Dynamic UI and you just want to fetch data show it stuff like that I mean ejs something like ejs could be a really good option you can also have partials so for instance if we want to have if we&#39;re going to have multiple pages and we want a header on every page obviously we don&#39;t want to put it you know put the header code the header HTML in every single view so we can create uh let&#39;s do a folder here called partials inside the views folder and we&#39;ll create header. ejs and let&#39;s just put a header with an H1 okay and then if I want to include that in my index file I can use an include so I&#39;ll go right here and the Syntax for this it&#39;s changed from from back in the day now you&#39;re going to do uh a hyphen like that and then you can do include and then the location which is going to be partial slash the location is going to be from from within the um the views folder there so ejs and then close that off so now you can see now we have the header showing all right and you can also have layouts obviously so you don&#39;t have to repeat yourself with all with this stuff but I&#39;m not going to get too too much into this I just wanted to show you it is possible you don&#39;t always have to build apis um with Express but hopefully you guys learned a little something from this I know a lot of you probably already knew a lot of the stuff but even if you did hopefully you could pick one or two things up and for those of you that are new to express if you&#39;re overwhelmed don&#39;t worry about it things will will start to click as the more you work with it um but that&#39;s it guys thanks so much for watching and I&#39;ll see you next time

what&amp;#39;s going on guys welcome to my expressjs crash course so this is a revamped updated version of the one that I did about 5 years ago I also just revamped my node.js crash course you can find a link to that in the description node.js is a JavaScript runtime environment and if you&amp;#39;re brand new to node I would definitely suggest that you watch that one first it&amp;#39;s going to give you a better understanding of what nodejs is and how it works but if you&amp;#39;re ready to dive into Express let&amp;#39;s get started [Music] all right so we&amp;#39;re going to be covering a lot of stuff in this video we&amp;#39;re going to spend just a few minutes in some slides to talk about what Express is and what it&amp;#39;s used for then we&amp;#39;ll jump into uh uh Express project and we&amp;#39;ll look at things like creating routes the request response objects middleware error handling and more so let&amp;#39;s first establish what Express is so Express is a minimal and flexible noj s web framework that provides a robust set of features for web and mobile applications and it&amp;#39;s used for both server side applications as well as apis and microservices I would say that it&amp;#39;s most used for building backend apis that are consumed by front-end Frameworks and you&amp;#39;ve probably heard of the M Stack which is mongod DB Express react node.js there&amp;#39;s also the mean stack the mevan stack where you can swap out uh react for angular or view or really any front-end technology that you want even just vanilla JavaScript so it&amp;#39;s a very popular framework in fact I would say it&amp;#39;s the framework for node.js there are others I&amp;#39;d say there&amp;#39;s even Frameworks that are more powerful but Express has really established itself as the go-to framework for node.js and it&amp;#39;s used by huge companies like IBM Uber Nike and a bunch of others it&amp;#39;s also a really popular option for smaller projects and start UPS so Express simplifies the process of handling HTTP requests if you watch my node.js crash course we started to build an API from scratch just using the HTTP module and you saw how difficult and and how lowlevel it was well Express gives us a ton of tools to work with to make building apis and just working with HTTP much easier and express is a very fast and unopinionated framework which I just want to spend a couple minutes on so when it comes to web Frameworks you have two types you have opinionated and unopinionated and opinionated framework is one that has a lot of rules and conventions that you need to follow so there&amp;#39;s there&amp;#39;s basically recommended ways of doing things and it&amp;#39;s very structured it&amp;#39;s it&amp;#39;s going to guide you in in a certain direction they also come with or they usually come with a lot of bells and whistles out of the box things like authentication CIS uh database ORS and some examples of opinionated Frameworks are Ruby on Rails jeno laravel uh if we&amp;#39;re talking about node.js in particular nestjs and Adonis are opinionated Frameworks for node and I would say in general opinionated Frameworks are more popular I think node and express is is really the only exception I can think of where the most popular framework is a minimalistic unopinionated one so opinionated Frameworks are extremely flexible and there&amp;#39;s not really a right way to do things you can structure your application however you want and use whatever libraries you want you can use whatever database you want it&amp;#39;s very minimalistic and it&amp;#39;s up to you to to decide how you want to structure your application there&amp;#39;s not as many rules to follow but you also don&amp;#39;t get as many uh as many features or bells and whistles out of the box but you do get the necessities and of course you can install other packages for the functionality that you need so there&amp;#39;s definitely uh pros and cons to both I would say it&amp;#39;s really features versus Freedom depends on one what means more to you for that project so there&amp;#39;s a few things that you should know before you jump into Express you should have a good understanding of JavaScript obviously all the fundamentals as well as all the the es6 features Arrow functions destructuring promises a syn await um you should have a basic understanding of node.js you don&amp;#39;t have to know a lot in fact I would say watching my 2-hour crash course is plenty before you jump into Express you should know how to use npm how to install packages and in many cases you&amp;#39;ll be working with Json data but you can also use a template engine like ejs or pug and I&amp;#39;m going to actually give you an example of that later on um but yeah you can build both server side applications as well as Json apis microservices Etc and if you&amp;#39;re learning let&amp;#39;s say the M Stack it doesn&amp;#39;t really matter which order you learn the Technologies if you want to learn react and you want to learn the front end first that&amp;#39;s fine or you could do nod and express first and then learn react what&amp;#39;s really important is that you you know JavaScript before you jump to either one of those front or back end now as far as what we&amp;#39;re going to do here obviously we&amp;#39;re going to set up a server we&amp;#39;re going to look at routing how to handle requests we&amp;#39;re going to look at the request and response cycle and the request response objects to see how we can get things like the response body how we can get the headers um things like that we&amp;#39;re going to look at custom middleware so middleware functions basically sit in between the request and response and you can do all sorts of things we&amp;#39;ll create some custom logging middleware we&amp;#39;re going to look at crud operations so create read update and delete we&amp;#39;re basically going to create a full crud API uh at the end we&amp;#39;ll look at template engines we&amp;#39;re going to use the ejs which is embedded JavaScript um cuz you can render HTML Pages directly from your server as well it doesn&amp;#39;t have to be Json data we&amp;#39;re going to look at error handling creating custom error handling middleware thirdparty npm packages controllers so I&amp;#39;m going to show you how we can actually clean up our code and and take take our code out of the route file and put it into a file that has a bunch of controller methods fetching data from the front end so I&amp;#39;ll give you an example of how we can create a static file server and we can basically have frontend JavaScript that will make a request and fetch data from our Express API and we&amp;#39;ll look at environment variables we look at a lot more too but these are the the the core things that I want to go over all right so that&amp;#39;s it for slides let&amp;#39;s jump in and get started okay so this is Express js. this is where you can find the documentation there&amp;#39;s some guides here on routing and middleware and you can use this as kind of a supplement to this crash course so to install Express just like any other package you can just install it with npm so we&amp;#39;ll get to that but we&amp;#39;re going to jump into vs code or open whatever text editor you use and go into some empty folder where you want to create this project now this isn&amp;#39;t uh um an actual project that we&amp;#39;re going to be working on um like I do in many of my videos we&amp;#39;re just going to kind of explore uh we will be building a crud API it&amp;#39;ll be ad Json API that will create read up update and delete posts but we&amp;#39;re also going to look at loading HTML files we&amp;#39;re going to look at using template engines creating middleware error handling uh all kinds of stuff all right so just open up a folder and in our terminal since this is a nodejs project and obviously you have to have node installed if you don&amp;#39;t just go to nodejs.org so the first thing you&amp;#39;re going to want to do is create a package.json file and I&amp;#39;m not going to explain every single little detail like what a package.json file file is because you should know that if you don&amp;#39;t just go ahead and watch the node crash course so we&amp;#39;re going to run npm in knit and I&amp;#39;m just going to do dashy so we don&amp;#39;t have to go through the questions and that will create the package.json file with all the defaults okay now to install Express as you saw on the homepage we can simply run npm install or I and then Express okay and that will get added as a dependency as you can see right here it also creates the node modules folder now at this point I usually like to create a dog ignore file and what that&amp;#39;ll do is it&amp;#39;ll whatever you put in here it will not be pushed to your git repository and you never want to push your node modules folder so you pretty much always want to create this and I&amp;#39;m also going to putv in here just in case we have an environment uhv file usually you don&amp;#39;t want to push that either because that&amp;#39;s usually where you have things like API Keys things you don&amp;#39;t want to share all right so let&amp;#39;s create an entry point and I&amp;#39;m going to call it server.js and typically the convention I like to use is if I&amp;#39;m creating an API or like a M Stack application where I&amp;#39;m serving Json data I&amp;#39;ll call it server.js the entry point if I&amp;#39;m building a node app that uses a template engine like ejs then I&amp;#39;ll call it appjs that&amp;#39;s just kind of what I like to do but obviously you can create you can call it whatever you want so let&amp;#39;s go ahead and bring in Express and I&amp;#39;m using the commonjs syntax which is like the the native node module syntax later on I&amp;#39;ll show you how you can switch it up if you want to use uh es modules and you want to use the import syntax but for now we&amp;#39;ll just go ahead and use the require and we&amp;#39;re going to require Express and then we want to initialize Express into a variable called app and then app variable or this object this is basically what we use for everything to create routes to use middleware to start the server and listen on a port which is what I&amp;#39;m going to do right now we&amp;#39;re going to call the listen method and that takes in a port number usually I&amp;#39;ll use 5,000 for backend stuff however that&amp;#39;s being used on this machine so I&amp;#39;m going to use 8,000 and then there&amp;#39;s an optional function call back you can pass in actually we don&amp;#39;t even need curly braces and we&amp;#39;re just going to do a console log to just say that the server is running so we&amp;#39;ll say server is running on Port 8,000 and those three lines will actually allow you to run a server so if I come down here and I run node and then the name of the file either server.js or just server there we go so now it&amp;#39;s running it&amp;#39;s not doing anything there&amp;#39;s no routes so there&amp;#39;s there&amp;#39;s not really any requests we can send for it to do anything but it is running so I&amp;#39;m going to stop that now with roller command C and the next thing we&amp;#39;ll do is just add a very very simple route and we can do that with the app object and then depending on what type of method you want to handle if it&amp;#39;s a get request or post request you use that method in this case uh we&amp;#39;ll use a get method so this is going to say respond to a get request to slash just the root URL or endpoint and then that takes in a second argument of a function and that function takes in a request and response object and those objects just have a ton of stuff on them so whatever you want to get from the headers the body or query strings from the URL that&amp;#39;s all in the request object the response object has a bunch of methods we can use so let&amp;#39;s use the send method and we&amp;#39;ll just send some text so we&amp;#39;ll say hello world and then let&amp;#39;s run the server and we&amp;#39;ll go ahead and go to the browser go go to Local Host 8000 and we&amp;#39;ll see Hello World and what&amp;#39;s nice about this is we don&amp;#39;t have to Define like the the content type we don&amp;#39;t have to say HTML or text slpl text or text/html if I put an H1 in here like this and we do have to restart the server I&amp;#39;ll show you how we can fix that but for now we do have to restart it you&amp;#39;ll see now it&amp;#39;s uh it&amp;#39;s parsing the HTML we could even send Json data so I could do let&amp;#39;s say message hello world and we can it&amp;#39;s just a JavaScript object but it&amp;#39;ll actually stringify it on its own we don&amp;#39;t have to do it manually like we would have to with uh you know with the with nodejs and just the HTTP module like we did in the node.js course also this is only pertaining to the root route if I go to slash about then that&amp;#39;s not going to work if I make a post request to the root route it&amp;#39;s not going to work it has to be a get request because that&amp;#39;s what we defined so we don&amp;#39;t have to manually check for that stuff like we would without using Express now having to restart the server every time we make a change is pretty annoying so there&amp;#39;s a few things you can do what I&amp;#39;ve done up until recently is used a a thirdparty package called nodemon which is really easy to set up you just install it with npm but with recent versions of nodejs you can can actually use the watch Flags you don&amp;#39;t have to use a third- party uh package so I&amp;#39;m going to show you how to do that in in the node.js crash course we did use nodemon so you can check that out if you want to you know if you do want to know how to do that but let&amp;#39;s go ahead and stop this and uh I&amp;#39;m going to go into the package.json here and what we want to do is create a couple scripts and to create npm scripts we just go into this object I&amp;#39;m going to create two going to create one called start which is just going to start at normally just like we just did with the node and then the name of the file but then I&amp;#39;m going to also create a Dev script which watches it so that we don&amp;#39;t have to keep restarting so we can just simply do node-- watch and then server or whatever you call the file so now if I save that and come down here and we run npm run Dev you&amp;#39;ll see that now it&amp;#39;s running on Port 8000 and it does say watch mode is an experimental feature and might change it any time but I&amp;#39;m pretty sure that it&amp;#39;s not going to change so you should be able to to use that um but let&amp;#39;s go ahead and try it out so I&amp;#39;m going to change this back to just a string of hello world and save and I didn&amp;#39;t restart it myself it did it on its own and if I come back and reload now we just get the string okay so now we don&amp;#39;t have to worry about restarting it now the next thing I want to do well let&amp;#39;s just create another row just so you can see so we&amp;#39;ll create one at slab and we&amp;#39;ll just return say about okay so now if I come back here and I go to slash about get request then we see about in the browser now most of what we&amp;#39;re going to be doing is dealing with Jason data but I do want to show you how you can serve HTML pages and there&amp;#39;s a few ways to do that this first way I&amp;#39;m going to show you really isn&amp;#39;t what you&amp;#39;re going to do and that would be create a separate route for every single page you can you can do this in a much easier way by just creating a static server but I do want to show you this way just so you so you know how it works so this res uh this res object has a method called send file so I want to send an HTML file when we hit a route so I&amp;#39;m going to create a folder called public public and let&amp;#39;s say this is where we want to have our HTML files so I&amp;#39;ll create index.html we&amp;#39;ll just go ahead and create a boiler plate here I&amp;#39;ll just say welcome say welcome to the homepage and then I&amp;#39;m also going to create an about. HTML and we&amp;#39;ll say welcome to the about page okay so we have these two HTML files now I&amp;#39;m going to go into this this uh root route and let&amp;#39;s do a res. send file and this will take in an absolute path to whatever you want to load and there&amp;#39;s a few ways we can do this I&amp;#39;m going to go ahead and bring in the path module so we&amp;#39;ll say path I&amp;#39;m going to require and this is just a uh it&amp;#39;s kind of like a utility to just help with file paths so so in this send file we can use this double uncore durame and that will basically give us the path to the current file that we&amp;#39;re in or the current location that we&amp;#39;re in I should say the directory and then from there we want to go to the public folder and then the index HTML that&amp;#39;s the page that I want to load so we can actually wrap this in path. jooin which just allows you to join together folders and files so we&amp;#39;ll say from the durame then we want to go into public then we want to go to index.html so that&amp;#39;ll give us the absolute path to that to the index HTML file so I&amp;#39;m going to save that and actually you know what let&amp;#39;s just copy this and we&amp;#39;ll do the same with the about change this to about HTML and now if I reload the homepage here we get welcome to the homepage if I go to slab we get welcome to the about about page so that&amp;#39;s one way to do it if you just want to load HTML files but you can imagine if you have a lot of files you&amp;#39;re going to have to create a bunch of routes just to load a single page and that&amp;#39;s kind of silly so what you can do is use the the express static middleware so to do that we&amp;#39;re going to come right here and we just need to add a line so let&amp;#39;s say setup we&amp;#39;ll say setup static folder and basically we&amp;#39;re going to declare one of our folders to be static meaning you can just go to the URL and it will just work and we&amp;#39;re going to set public to be our static folder so to do that we can say app. use because this is middleware middleware is just a function that runs between the incoming request and the outgoing response and we want to pass in here express. static just like that now this takes in the location of what you where you want your static folder which in our case is public so we can again use path. jooin and same thing we&amp;#39;ll just do double uncore durame and then uh we want to go to public okay so if I do that and then I just get rid of these two routes completely and we come back to the homepage and reload it still works now if I go to slab even though I have that about. HTML it&amp;#39;s not going to work because I actually have to specify the HTML if I do that it does work so now anytime I wanted to create an HTML like let&amp;#39;s say I want contact uh. HTML all I have to do is create it in this folder and it will automatically work I don&amp;#39;t have to create a separate route for it so that&amp;#39;s how you create a static server with no. JS now I want to move on to working with Json data because the chances are that&amp;#39;s what you&amp;#39;re Learning Express for and and again I&amp;#39;ll get into template engines as well which allows you to load HTML pages but also use Dynamic data you can pass data into the route and into the page but uh let&amp;#39;s go ahead and um we&amp;#39;ll just leave this the static here well no let&amp;#39;s comment it out for now because we&amp;#39;re going to use it later because I do want to show you how we can interact with our Json data with uh through these HTML files but for now we&amp;#39;ll just comment that out and let&amp;#39;s create a new row we&amp;#39;ll say app.get and let&amp;#39;s say I want this to be SL API that&amp;#39;s a common uh convention is just to to have if it&amp;#39;s adjacent API prefix all your endpoints with API so we&amp;#39;ll say API slash and let&amp;#39;s do post and then we have our request response our function and usually you&amp;#39;re going to be dealing with a database but let&amp;#39;s let&amp;#39;s just go ahead and hardcode some posts here so we&amp;#39;ll say cons post actually I&amp;#39;m going to use let and you&amp;#39;ll see why later but we&amp;#39;re going to use let and let&amp;#39;s set an array and all I&amp;#39;m going to have is an ID and a title I&amp;#39;m not going to get crazy here so we&amp;#39;ll say id1 title oops we don&amp;#39;t want quotes around that title we&amp;#39;ll say post one what I got two colons there so post one and then we&amp;#39;ll just copy that down a couple times post two three change this up 2 three all right so let&amp;#39;s just pretend that this this isn&amp;#39;t a database so we want to serve these posts through this endpoint so let&amp;#39;s do res. now we can do res. send and like I showed you before you can pass Jason in there or you can pass a JavaScript object and it will get pared as or stringified as Json but there&amp;#39;s also o a specific Json method and that&amp;#39;s what I prefer to use so we&amp;#39;re going to do res. Json and then simply pass post which is just a JavaScript array of objects but if we go to back to Chrome now and we go back to let&amp;#39;s go to SL API slost now we get our Json post okay and you could you could hit this endpoint from your react application or view or your mobile app whatever it is you&amp;#39;re using you could hit that endpoint and get this data dealing with adjacent API the browser isn&amp;#39;t the best tool to use because you want to you want to be able to test post and put and deletes so there&amp;#39;s a ton of tools that you can use to do that Postman is what I prefer and there&amp;#39;s a desktop version there&amp;#39;s also a vs code extension which I have installed so that&amp;#39;s what I&amp;#39;m going to use if you want to use that as well just search for Postman under extensions so this right here you can install it you do have to create an account but it&amp;#39;s free so you can just install it and then you&amp;#39;ll have this little icon here and then you can simply open up the new HTTP request and then you can choose whatever method you want let&amp;#39;s say get request to this right here Local Host 8000 API posts send it and you can see we get our Json data in the body here we can also see the headers here so we have like X powered by Express we have the content type which is automatically application Json content length Etc all right so this is what I&amp;#39;m going to use from now on and we don&amp;#39;t I don&amp;#39;t even have to leave vs code to to make my requests now before we move on to to other routes and all that I just want to talk about environment variables so basically you have variables on your system that you can use uh called environment variables and you can also create them in a file called EnV now prior to uh I think it was I don&amp;#39;t know a couple versions of node.js a couple versions ago you had to use a third-party package called EnV but now you can actually use envir an EnV file without using that package so I&amp;#39;m going to show you how to do that real quick so let&amp;#39;s create a file called EnV and usually if you have like if you have like a Google API key or something like that you&amp;#39;ll put that in this file so you don&amp;#39;t want to push this to to GitHub or anywhere else so that&amp;#39;s why usually you want to put this in your G ignore file now I don&amp;#39;t have any API keys or anything so all we&amp;#39;re going to put in here is the port number and I&amp;#39;m going to put that to just for now I&amp;#39;ll put it to 8080 just so we can we don&amp;#39;t need a semicolon just so we can make sure that this this is being used and then in server.js what I&amp;#39;m going to do is come up here I usually like to put this at the top and we&amp;#39;ll create a VAR aable called port and I&amp;#39;m going to set that to process. EnV Dot and then Port because that&amp;#39;s the name of the environment variable okay now you should also have a fallback just in case that doesn&amp;#39;t exist so we&amp;#39;ll say or 8,000 and then down here where we&amp;#39;re connecting to 8,000 here and here I&amp;#39;m going to change that to well here we need to use a we need to use this syntax because it&amp;#39;s a variable okay so now we&amp;#39;re using that Port variable so this is going to look in the EnV now it&amp;#39;s not going to work by default in fact if I restart the server you&amp;#39;ll see it&amp;#39;s not using 8080 as we have in the EnV it&amp;#39;s using 8,000 it&amp;#39;s using the fallback the reason for that is because you have to actually you have to explicitly describe the EnV file in your package.json so right here where we&amp;#39;re running the dev script we&amp;#39;re going to add- dv- file equals Dov like that okay so now I&amp;#39;ll save and let&amp;#39;s now restart the server and now you&amp;#39;ll see it&amp;#39;s running on 880 okay so that&amp;#39;s how you can use a EnV file without having to use the EnV package now I&amp;#39;m going to change that this to 8,000 I just wanted to show you that it was working so I&amp;#39;m going to change that restart and now it&amp;#39;s back to 8,000 now what if we want to get a single post let&amp;#39;s create a route for that actually I&amp;#39;m going to put a comment here so this is to get all post and then what we&amp;#39;ll do is just grab that and I&amp;#39;m going to show you later on how we can create a separate file for routes but for now we&amp;#39;ll just put it in here so this will get a single post and we want to be able to put API slost slash and then when whenever the ID if it&amp;#39;s post with an ID of one then we want to be able to get it by passing in a one so since this is dynamic this param here we have to prefix it with a colon and then whatever we want to call the param in this case we want to call it ID you might have like a if it&amp;#39;s a a blog post you might have maybe a slug or something like that but we&amp;#39;re just going to stick with an ID now how do we get whatever is passed here in our function here well we do that let&amp;#39;s console log we do that with the request object and on that there&amp;#39;s a pams object let&amp;#39;s just go ahead and console log that so I&amp;#39;ll make the request to API post SL1 and when I send it you&amp;#39;ll see that now we have an object with an ID of one and notice that it is a string by default okay so that&amp;#39;s how we can get it we can do request. prams and then doid or if this was slug we could do prams do slug plug so let&amp;#39;s make it so we get that particular post so what I&amp;#39;ll do is first of all just create a variable call ID and I want a parse int so I want this to go from a string to a number so we&amp;#39;re going to pass that into parse int request. perams doid okay so now we have the the the ID now let&amp;#39;s filter the post so we&amp;#39;re going to respond with Jason and then we can use filter and I&amp;#39;m assuming that you guys know filter that you know all this this JavaScript stuff if not then you might want to just pause Learning Express and kind of get into just JavaScript a little more but filter will take in a function basically we&amp;#39;re going to Loop through and for each post we want to say if that post the current iteration if that post ID is equal to the ID that&amp;#39;s passed in right here here which is this variable now then that&amp;#39;s what we want to show that&amp;#39;s what we want to respond with so let&amp;#39;s go ahead and save that let&amp;#39;s come back here and send and now you can see we get just the I the post with the ID of one if I do two we get the post with the ID of two now if I do let&amp;#39;s say 200 which we know doesn&amp;#39;t exist right now it just gives me an empty array because it&amp;#39;s filtering through and it doesn&amp;#39;t doesn&amp;#39;t find a post with that ID in reality you should probably have this return a 404 not found with an error message and we&amp;#39;ll get to that we&amp;#39;ll get to error handling but before we do that I want to talk about getting query strings so for instance if we were to go to API slost and then do question mark limit equals two maybe you want to limit the the amount of post that come back how do we get this value well we can still use the the request object right just like we did here but instead of request pams it would be request. query so this is the route we&amp;#39;re looking at where we want to be able to get it so let&amp;#39;s just do a console log of request. query okay and then we&amp;#39;ll make that request again and now in the console you can see we have an object limit to and it is a string by default and if I were to add onto this an Amper and then maybe we want like sort equals DEC now you&amp;#39;ll see that that is also added to that object so let&amp;#39;s make the limit work we won&amp;#39;t do the sort now but let&amp;#39;s let&amp;#39;s actually make that limit works so we&amp;#39;ll come back in here now one thing you have to realize when you&amp;#39;re dealing with with backend development is anytime a user can change the data right like in this case you have to just be aware of that and be aware of what you&amp;#39;re doing with that data because it&amp;#39;s possible someone could put like a a an SQL query in here and really screw things up that&amp;#39;s called SQL injection um in this case obviously we&amp;#39;re not even using a database but you just have to you just have to be aware of that okay and the type of data that you expect should be the only type of data that that can be accepted so in this case we want a number right in particular we want a number that is positive because it&amp;#39;s a limit so let&amp;#39;s first of all let&amp;#39;s um let&amp;#39;s say put this in a variable I do want to parse it as a number so let&amp;#39;s say parse int and we can get it with request. query. limit okay so that&amp;#39;ll give us the actual number and there&amp;#39;s a ton of different ways you could handle this what I&amp;#39;m going to do is just check and I&amp;#39;m going to say if not Nan or is Nan is n n right which stands for not a number so is Nan is a a function that will return true if it&amp;#39;s a number and false if it&amp;#39;s not so we want to say if it&amp;#39;s not is a number limit and then we also want to make sure that it&amp;#39;s positive so we&amp;#39;ll say and if that limit is greater than zero okay so if that if those conditions are true then we want to respond with Jason um except we want to only return the whatever the limit is so we&amp;#39;ll say post so we have our post array and then I&amp;#39;m going to use the slice method and say I want to go from zero to whatever the limit is and then we can do an else and then move this into here because if there&amp;#39;s no limit then we just want to return all the pose all right so let&amp;#39;s let&amp;#39;s try that out we&amp;#39;ll save it and let&amp;#39;s try it without any kind of limit so we still get all three but then let&amp;#39;s do question mark limit equals 2 we get two if we do equals one we get one all right if we do 10 of it&amp;#39;s just going to give us all of them all right cool so that&amp;#39;s how you can deal with query strings now status codes are really important you should have a basic understanding of the the main status codes the the ranges like 200 means success um 300 you have redirects 400 you have client error 500 you have server errors so let&amp;#39;s um let&amp;#39;s be specific about the the actual statuses we&amp;#39;re sending back when you just do res. Json it&amp;#39;s it&amp;#39;s going to default to 200 however I like to still specify 200 explicitly even though I don&amp;#39;t have to I think it just makes it more readable so what we can do is do a res. status and you can pass in the status you want to send back so in this case I&amp;#39;m going to say 200 and then you can actually chain on the Json so we can do it like that and same thing here we&amp;#39;ll say res. status and you can just send the status without any content uh without the Json but we do want to send the post back so we&amp;#39;ll say 200 and then Json all right same thing down here so res. status 200 now let&amp;#39;s make it so that when that post doesn&amp;#39;t exist we get a 404 and a message so I&amp;#39;m actually going to just get rid of that whole thing there and we want to put the post in a variable because we want to be able to check for it and we can use find here so post. find and let&amp;#39;s pass in here so for each post and we want where the post. ID is equal to ID and then we can check for that post or we&amp;#39;ll say if not post so if the post doesn&amp;#39;t exist then let&amp;#39;s say res. status and this time we&amp;#39;ll send a 404 and then you don&amp;#39;t have to but I also would like to send a message so we&amp;#39;ll say MSG and we&amp;#39;ll actually let&amp;#39;s use back ticks here and we&amp;#39;ll say uh we&amp;#39;ll say a post with the ID of ID was not found okay and then we&amp;#39;ll say else so if it is then we&amp;#39;ll say res. status and we want to send a 200 and then as far as the data we send back that&amp;#39;s going to be the post all right make sure this is singular post not posts so let&amp;#39;s try that out so if we go to API slost SL1 we get post one go to slash two we get post two if I go to post sl200 then you see over here I get a a 404 not found for the status and we get this message a post with the ID of 200 was not found all right so that&amp;#39;s how you can send different statuses um and you always want to make sure that you have a proper response if what you&amp;#39;re looking for is not there now just to kind of clean this up a little I don&amp;#39;t really like to have the else&amp;#39;s here so typically what I&amp;#39;ll do we&amp;#39;ll start with this where we&amp;#39;re checking to we&amp;#39;re making sure that the limit um seeing if the limits there since we have two res. statuses we can do this and just have an if else but what I&amp;#39;ll usually do is not have the else so we&amp;#39;ll go like that but if we do it this way then the first one here we want to return so that should work the same way so let&amp;#39;s try it out if we go to SL poost okay so that still works and then here instead of using the else so we&amp;#39;ll get rid of this but this first first one even though it&amp;#39;s within an if we still want to have a return like that I think I just think that cleans it up a little bit all right so now we know how to create routes we know how to get route pams we know how to get query pams we know how to send different statuses now let&amp;#39;s move the routes to a separate file because you can only imagine if you have a bunch of resources like post users categories and then you have a bunch of routes for each resource this file can get filled up pretty quickly so you&amp;#39;re usually going to have a separate file for your different resource routes so let&amp;#39;s create a folder in the root and we&amp;#39;ll call it routes and let&amp;#39;s create a file called posts. uh post.jpg we&amp;#39;re going to be using the express router so first off let&amp;#39;s bring in Express and then let&amp;#39;s we&amp;#39;re going to be using the router so we can do that by defining a router variable and then setting that to Express dot and then capital r router like that all right so the way that this works we can actually just copy or not copy but cut the two routes that we have here okay so I&amp;#39;m just going to cut them out of that file we&amp;#39;re going to bring the post into the routes file as well but let&amp;#39;s paste those in and let&amp;#39;s also cut this okay so we&amp;#39;ll cut that so we&amp;#39;re really cleaning up the server JS and we&amp;#39;ll put that here all right now instead of using app because obviously we don&amp;#39;t have access to app anymore that&amp;#39;s being defined in the server JS we&amp;#39;re now going to use the router so here let&amp;#39;s replace that with router and replace this one with router so now anytime we create new routes we&amp;#39;re going to be using the router instead and then very important you have to export that at the bottom here so we want to export as default router now we need to bring that in that router routes file into the server JS so up at the top here let&amp;#39;s say const post and set that to require and we want to go into let&amp;#39;s see do slash routes slost and then we&amp;#39;re going to come down here let&amp;#39;s say routes and what we do is we use app.use because this is in fact middleware so in the app.use we can pass in the endpoint that we want to use for that file which is going to be SL API SL poost and then as a second argument we pass in post now since we&amp;#39;re defining API or SL API slost here in the actual route file we don&amp;#39;t need to have API SL poost here again so instead we&amp;#39;re going to get rid of this we still want the ID for this particular route so this would just be slon ID and then this would just be slash okay because if you were to leave this and that then it&amp;#39;s going to be slash API poost twice obviously we don&amp;#39;t want that so let&amp;#39;s save and let&amp;#39;s make sure that everything well looks like we&amp;#39;re getting unexpected token export um oh we&amp;#39;re still using commonjs modules which I should probably change up so with commonjs we would say module exports router okay so now let&amp;#39;s try it out so API post that works API post one that works all right now I do want to switch it up to es modules I prefer that over the the commonjs require syntax so you don&amp;#39;t have to do this if you if you want to stick with this with the you know the standard node.js module syntax you can but I like to to have the same syntax on the front and back end so I&amp;#39;m going to go into package.json and I&amp;#39;m going to set type to module instead of commonjs now we need to switch up let&amp;#39;s go to server JS first we can replace this with import Express Express from Express and then for path I know we&amp;#39;re not using path right now but we will so import path from path and let&amp;#39;s see for we&amp;#39;re going to import posts from do slash uh what is it yeah dot slash routes slash now when you&amp;#39;re using this synta the es modules with no. JS you do have to do the JS if it&amp;#39;s a file all right so we&amp;#39;ll save that and then where else do we need to put this in the actual route file we&amp;#39;re going to replace this okay and I think that&amp;#39;s it let&amp;#39;s see what&amp;#39;s going on here ah the export so in this the post route file now we can change this module. exports to export default posts uh I&amp;#39;m sorry router all right so now everything should work let&amp;#39;s try it out okay we can get that good so now we&amp;#39;re using ES modules the next thing I want to do is show you how we can get data from the request body so let&amp;#39;s let&amp;#39;s make it so we can make an actual post request and submit a new post and I know we&amp;#39;re not using a database but we&amp;#39;ll just add it to to memory so I&amp;#39;m going to open up a new uh Postman tab so we&amp;#39;ll say new request and I&amp;#39;m just going to move this over here okay and I want this to be a post request and it&amp;#39;s going to be the same endpoint API poost but I want to be able to go to the body here and either send Rod Jason or use this www form URL encoded where we can just put like you know title I think title is the only field that we have for posts but this kind of replicates a form a web form so in order to get the the body data we actually need to add a couple lines of middleware we don&amp;#39;t have to install anything you used to actually have to install a separate body parer package but now it&amp;#39;s just included with Express so let&amp;#39;s go right here and let&amp;#39;s say body parser middleware and we&amp;#39;re going to say app.use and pass in here express. Json like that so this line this will take care of being able to submit raw Json but again I also want to be able to use URL encoded data so we need to add one more line app.use and in here we&amp;#39;re going to say Express . URL encoded and that just takes in an object and we&amp;#39;re going to set extended to false so that will allow us to send the form data now let&amp;#39;s create a new route so obviously that&amp;#39;s going to be in our routes post JS file so we&amp;#39;ll go right here let&amp;#39;s say create new post and we&amp;#39;re using the router now since this is going to be a post request instead of router. get we use router. poost and again the the end point is still going to be API SL poost so here we just need to put a slash because remember we already have this defined right here so now create a new post and we&amp;#39;ll have our function with recres okay and then to get the the body data let&amp;#39;s just do a console log here I&amp;#39;m going to do request. body and if you if you took the node.js course crash course you remember we did do this but it&amp;#39;s it was a lot more difficult you actually got a buffer and then had to turn it into a string um it&amp;#39;s it&amp;#39;s much more complicated Express makes it really easy and then for the response we&amp;#39;ll just say res. status now a 201 means successful and it means something was created and then let&amp;#39;s also add post I know we&amp;#39;re not actually creating a new post yet but that&amp;#39;s the the response we&amp;#39;re going to want so if we go to make a post request to API poost right if I just send it as is then we&amp;#39;re getting all the posts and we just have an empty object but let&amp;#39;s go to this form URL encoded and let&amp;#39;s add title we&amp;#39;ll say my title is the value and send and now you can see we get this object of we have title and my title so we can access this value right here with rec. body. tile so let&amp;#39;s go back into here and if you want to pause the video and and try this yourself basically you&amp;#39;re just pushing it onto an array there&amp;#39;s no omm or anything with with a database um if you want to pause it and try it you can but I&amp;#39;m going to go ahead and just create a variable called new post and there&amp;#39;s so many ways to do the same thing that&amp;#39;s like I said earlier about Express it&amp;#39;s very unopinionated so you can do things how you want so I&amp;#39;m going to create an object and let&amp;#39;s say ID and I&amp;#39;m going to just keep it very simple and take the length of the post and then just add one to it for the ID okay so we&amp;#39;re keeping it simple in reality you&amp;#39;d be adding it to a database and most of the time the database is going to give you the ID um automatically and then for the title this is where we can access request. body remember it&amp;#39;s that object which will have the title on it all right and then let&amp;#39;s say if there&amp;#39;s not if that new post doesn&amp;#39;t have a title then let&amp;#39;s return a 400 because that means it&amp;#39;s a client error so it&amp;#39;s something the the person making the request did did something wrong so we&amp;#39;re going to say return res. status 400 and then we&amp;#39;ll add on uh message so here we&amp;#39;ll say message and we&amp;#39;ll say please include a title okay um else so basically if there is a title title then we just want to add it to the array so let&amp;#39;s say post. push and pass in here our new post and we&amp;#39;re still sending this back so let&amp;#39;s go back to postman and I&amp;#39;m just going to change my title to uh yeah I guess we&amp;#39;ll just say Brad&amp;#39;s post and I&amp;#39;m going to send and what I get back is my post and you can see that there&amp;#39;s a new one here with an ID of four with the title of Brad&amp;#39;s post now obviously that&amp;#39;s not going to persist if I restart the server it&amp;#39;s going to just go away because it&amp;#39;s not being put in a database but it gives you an idea of how this would work also in reality you&amp;#39;d have your your form whether it&amp;#39;s just regular HTML CSS JavaScript or if you&amp;#39;re using react view spelt something like that now I think it&amp;#39;s it it&amp;#39;s only natural that we finish this as a a crud API and do a put which is an update and also a delete request so let&amp;#39;s go under where we did the post and Let&amp;#39;s do let&amp;#39;s say update yeah we&amp;#39;ll do update post and we&amp;#39;ll take our router and put is normally what we use for updating you can also use patch I prefer a put though and when we update a post obviously we need to know which one we&amp;#39;re updating so it&amp;#39;s going to be API slost slash and then whatever the ID is and then we&amp;#39;ll have our function with our request response and we want the ID so remember we can get that I&amp;#39;m going to par it I&amp;#39;m going to parse int and we can get that with request. prams doid so that&amp;#39;ll give us the ID then let&amp;#39;s get the post so we&amp;#39;ll get that with find so we&amp;#39;ll take the post array and find and then for each post we want to uh we want to get where the post ID is equal to the ID in the URL then we&amp;#39;ll check for the post so we&amp;#39;ll say if not post then let&amp;#39;s return re and we&amp;#39;re going to do a status of 404 not found and we&amp;#39;ll just P put a message in here and actually let&amp;#39;s use back ticks and we&amp;#39;ll say no what do we what do we do up here um yeah we can just copy this all right and then to do the update I&amp;#39;m just going to Simply take the title so post title and I&amp;#39;m going to set it to request. body. booty request. body. tile and then we&amp;#39;ll do a res status of 200 and we&amp;#39;ll send back the post and that will include the updated post so let&amp;#39;s try that out so let&amp;#39;s say we want to update slash we&amp;#39;ll do two and I want the title we&amp;#39;ll say updated post and then we send that and what we get back well we&amp;#39;re getting a 404 oh that&amp;#39;s because I&amp;#39;m making a post request this should be put so now you can see id2 the post with the id2 has a title of updated post so that takes care of the put request now let&amp;#39;s do the delete so under that we&amp;#39;ll say delete post so router actually you know what we could just copy what we just did delete post and this is going to be a delete request same thing it&amp;#39;s going to we need the ID so we&amp;#39;re going to keep that we&amp;#39;re going to um par it as an INT and then we&amp;#39;re going to find the post we&amp;#39;re going to check for it and then uh let&amp;#39;s see all we&amp;#39;re going to do get rid of that all I&amp;#39;m going to do is basically overwrite the post that&amp;#39;s why I used let when I Define the array so we&amp;#39;ll say post then equals post. filter and let&amp;#39;s pass in our function for each post and uh we want to say where the post ID is not equal to ID so that&amp;#39;ll return all the posts except for the one with that ID and then say that we can leave this because we want to just send back all the posts with the one that&amp;#39;s deleted should be gone so let&amp;#39;s I guess we could just use this so let&amp;#39;s do delete and we&amp;#39;ll do Post slash1 send and now you can see the ID with one is gone so we now have a full fraud API create read update and delete now again obviously in the real world instead of doing this kind of stuff you would be working with a database and you&amp;#39;d use some kind of om for instance if you&amp;#39;re using mongodb as your database there&amp;#39;s an OM called Mongoose and it has methods like find um delete things like that and you would be finding and deleting from the database rather than from just a hard-coded array like we&amp;#39;re doing here here in fact the code would you have less code because we have to write more JavaScript to deal with this hardcoded array than we would to just uh to use a few methods with  and if you&amp;#39;re using a SQL database SQ eyes is a really popular orm for node.js so that takes care of creating an API now what I want to do is talk a little bit about middleware so middleware functions are functions that have access to this request and response object and they can do anything I mean you can use it for logging you can use it for authentication you can add to the request object here for example a lot of the authentication middlewares will allow you to add like a rec. user and then in your row you have access to the currently logged in user now I&amp;#39;m just going to do something simple we&amp;#39;re going to create some logger middleware that will show the method and the end point in the console whenever a request is made and you can have middle Weare run on either the route level so in any one of these routes or at the app level where it runs no matter what route is hit so let&amp;#39;s start off by just creating uh a function uh we&amp;#39;re not going to keep this here but I&amp;#39;m just going to put it here for now so we&amp;#39;ll make this an arrow function now middleware functions take three things in the request and response remember I said they have access to those and then also next which is a a function that you&amp;#39;re going to run at the end of your your middleware function because what that does is it calls the next piece of middleware in the stack so in this logger function let&amp;#39;s do a console log and like I said we have access to everything that&amp;#39;s on this request object including the method the protocol the just everything cookies if you have any so what I want to do is just log let&amp;#39;s put some back ticks in and then I want to use a variable so I&amp;#39;m using the money sign the template literal syntax and let&amp;#39;s get the method we&amp;#39;ll put that first and then outside of that curly brace let&amp;#39;s put the protocol so request. protocol which would be HTTP then we&amp;#39;ll put colon SL slash and then we can get the host name with doget and then just pass in host okay and then after that curly brace let&amp;#39;s put the the original URL property so request. original URL and then finally we need to call next which again we&amp;#39;ll just call the next piece of middleware in the stack so as I said we can implement this on a route level or the app level so let&amp;#39;s start with the route level let&amp;#39;s say I want this logger to run only on this get all post route so for middleware to run we just have to add it as a second argument so I can simply pass in logger like that and now when I hit API slost you can see it&amp;#39;s logging it&amp;#39;s a get request Local Host 8000 API post if I go to API post SL1 then it doesn&amp;#39;t run because it&amp;#39;s only being passed into this one route now you might have middleware you want it to run on all routes on the app level so in that case we&amp;#39;re not going to do this so we can get rid of that and we don&amp;#39;t want this function in this file because we want to use it in our server JS so commonly what you&amp;#39;ll do let&amp;#39;s cut this commonly what you&amp;#39;ll do is have a folder for your middleware and we&amp;#39;ll create a new uh we&amp;#39;ll create a new file here called um logger.log or you could call it like logger middleware and we&amp;#39;ll paste that in and then we just want to export that as default okay then we&amp;#39;ll bring it into our server JS so let&amp;#39;s import logger that&amp;#39;s going to be SL middleware SL logger JS and then all we have to do is is wrap it in app. use that&amp;#39;s how we use middleware so I&amp;#39;ll say logger middleware app.use and we&amp;#39;re just going to pass in logger so now let&amp;#39;s make a request so this is API post one and you can see now it&amp;#39;s logging that if I do just API post still logging it if I go to the delete so any request I make now it&amp;#39;s going to log it down in the console so that&amp;#39;s how you can create and Implement middleware so now I want to look at error hand Ling now Express comes with a default error Handler if you make a request to something that doesn&amp;#39;t exist like let&amp;#39;s say we go API SL test you&amp;#39;ll see this is the default error Handler it gives us a 404 but it actually gives us an HTML page and if you&amp;#39;re building an API obviously that&amp;#39;s not what you want so I want to show you how we can create a custom error Handler that will give us a Jason response along with the status code that we want so let&amp;#39;s go to our routes and we&amp;#39;ll start with the single post so basically wherever we&amp;#39;re sending these 404s I want to instead of doing that here I want that to happen in the error Handler so let&amp;#39;s actually uh I&amp;#39;m going to just all I&amp;#39;m going to do is copy this right here the message itself and then I&amp;#39;m going to get rid of this return that&amp;#39;s inside here and I want to be able to go like this oh or yeah we want to be able to do new error this is what fires off the error Handler by saying new error and we&amp;#39;re going to pass in a message like that okay now we do have to call the next function and next can get passed in as a third parameter up here so we&amp;#39;re going to pass next into the actual route Handler and then underneath where we just said new error we&amp;#39;re going to return next but we want to pass the error in there as well so let&amp;#39;s do this error like that okay so in order for for this to work we have to create an error Handler which is going to be a piece of middleware so in middleware let&amp;#39;s create a new file called error. JS and we&amp;#39;re going to say const error Handler now just just like any other middleware this is going to take in request response and next however the very first thing it&amp;#39;s going to take in is error and just by doing that just by passing this first error in it&amp;#39;s going to run when we do this now as far as what I want to put in here for now let&amp;#39;s just do a res. status and we&amp;#39;ll just do 404 and then Json and for now I&amp;#39;ll just do a hardcoded message so we&amp;#39;ll say MSG and I&amp;#39;ll just say error and we just want to make sure we export as [Music] default now to use this just like any other middleware we need to wrap it in app.use so let&amp;#39;s bring it into our server JS so import error Handler and we&amp;#39;re going to do you put the app. below the routes here otherwise we could have some conflicts so say error Handler app. okay now it should work if we if we get that error right so if we if there&amp;#39;s no post with the ID that we pass in then it this should run this should run so let&amp;#39;s try it let&amp;#39;s go to API slost sl100 and there we go so we get a 404 not found we get message error now obviously we want this to be more specific right so we&amp;#39;re passing the message in right here so we can access that through this object so right here let&amp;#39;s say for the message instead of just uh Str ring of error let&amp;#39;s say error do message so now we&amp;#39;ll try that again and now we get the correct error message now at the moment it&amp;#39;s it&amp;#39;s always going to be a 404 right and I don&amp;#39;t want that what I want to do is check to see if we if we set a status in the route if we didn&amp;#39;t then I want it to be a 500 by default which is a server error so what I&amp;#39;m going to do is say if let&amp;#39;s say if the error. status then we&amp;#39;ll say res. status set it to whatever that error status is and then Json and in there we&amp;#39;re going to do message and set it to error. message okay else if there is no if there is no status defined then let&amp;#39;s make it a 500 so I&amp;#39;ll change this to a 500 all right so now let&amp;#39;s try it again we&amp;#39;ll try to get Post 100 now we can see we&amp;#39;re getting the correct message but it&amp;#39;s a 500 that&amp;#39;s the default so all we have to do is when we Define this error here right before we return next we can just do error. status set that to 404 now hit send now it&amp;#39;s a 404 okay so if it doesn&amp;#39;t if it doesn&amp;#39;t have an explicit uh status code then it&amp;#39;s going to just be 500 now let&amp;#39;s just use the error Handler in these the other routes where for instance uh where else did we use this like right here here so instead of returning the the res status Jason instead of doing it here we&amp;#39;ll let the handler do it so I&amp;#39;m just going to copy these three lines and let&amp;#39;s go let&amp;#39;s see is there anything up here that we need no so create new post so where we check for the title let&amp;#39;s replace this this with this except I want it to be a 400 and let&amp;#39;s say please include a title so let&amp;#39;s see if that works if we go and we try to make a post request to API post and we don&amp;#39;t include a title oh next is not defined so in in your route we just want to make sure that we add next and just add it to all of them so here that&amp;#39;s better practice anyways just to make sure we have that even if you&amp;#39;re not going to use it there we go all right so we&amp;#39;ll try that again send with no title and there we go so we get a 400 bad request and please include a title so now let&amp;#39;s find where else we can use the error Handler so right here so a post with the ID so basically we can do the same thing so this right here and then same thing right here yeah I think that&amp;#39;s it so we&amp;#39;re just letting it go through the Handler rather than than doing it here all right now I want to have a a catch all for like I said if we go to like API test which doesn&amp;#39;t exist it&amp;#39;s not a post that doesn&amp;#39;t exist it&amp;#39;s an it&amp;#39;s a URL it&amp;#39;s an endpoint that doesn&amp;#39;t exist it&amp;#39;s still giving us that HTML page so to have kind of like a catchall we&amp;#39;ll go underneath let&amp;#39;s see we&amp;#39;re going to go under these routes we can do it so let&amp;#39;s say app.use and let&amp;#39;s pass in so we&amp;#39;re just creating another middleware function so we got wreck res next and let&amp;#39;s say const error equals new error so same thing we did in the routes let&amp;#39;s say not found and the status so we&amp;#39;ll say error. status set it to 404 and then call next and pass in the error all right so if we do that now if I try to go to API test which is an uh an actual endpoint or Route 404 not found and we get message not found and we could clean this up a little instead of having it in here we could just create another file and we&amp;#39;ll call it not found. JS and then we&amp;#39;ll just take the function here cut that we say cons not found equals so we&amp;#39;ll do that then we&amp;#39;ll bring it in up here yeah we&amp;#39;ll just do that and we can just move that down here I think that makes sense so now that should do the same thing if we go to API test good so the next thing that I want to do is show you an example of using uh another package and we&amp;#39;re going to use a small Library called colors that allows us to basically just add colors to the console and we&amp;#39;ll make our little logs here pop a little more by adding color to it so you can either stop the server for a minute or you can open up another terminal I&amp;#39;m just going to open up another one and I&amp;#39;m going to run npm install colors and if you go to package.json you should have colors as a dependency so we&amp;#39;re going to be using this in the logger file let&amp;#39;s just close up some of this stuff that we don&amp;#39;t need and we&amp;#39;re going to go to middleware logger JS and we want to bring in colors so import colors from colors and the way that we can use this I believe we can just I haven&amp;#39;t used this in quite a while but I believe we can just go like this add an array and and then put like red I think that&amp;#39;s me let&amp;#39;s see just try that yeah see so now it&amp;#39;s red and it doesn&amp;#39;t it right now it doesn&amp;#39;t matter which requests we make or anything like that it&amp;#39;s just all going to be red but what I&amp;#39;d like to do is make it so if it&amp;#39;s a if it&amp;#39;s a get request will make it green if it&amp;#39;s a post request will make it blue and so on and there&amp;#39;s a lot of ways we could do that we could have a bunch of if else but I think to Define an object and Define a mapping of HTTP methods two colors would be the cleanest way to do this so let&amp;#39;s go above the the console log and let&amp;#39;s say const method colors and set that to an object and we&amp;#39;ll say forget let&amp;#39;s make that green for post blue for put we&amp;#39;ll do yellow and then for delete we&amp;#39;ll do red all right and then all we have to do is let&amp;#39;s create a variable called color set that to our method colors and then the request. method because remember we have access to that or it&amp;#39;ll just be white and then we can just replace this in this uh array here replace red with the color variable so now let&amp;#39;s make a get request you can see that it&amp;#39;s green if I make a post request blue put request I mean these are not found because it&amp;#39;s API test but it doesn&amp;#39;t matter it&amp;#39;s still it&amp;#39;s making the request so it&amp;#39;s still going to log and then delete is red so it&amp;#39;s just it it you can see how much Freedom you have with Express it&amp;#39;s it&amp;#39;s very minimalistic and you can use all types of libraries to to do what you want and and create any kind of middleware that you want you have total control over the whole request response cycle now the next thing I&amp;#39;d like to do is move all the functionality from the routes file I want to have controller methods I think that that&amp;#39;s a cleaner way to do this rather than just having all the the logic inside the route file I just want the route file to to point the correct whatever that endpoint and Method point to a controller method rather than putting everything in here so this would go in its own function in the controller file so let&amp;#39;s create a new folder called controllers and then inside controllers we&amp;#39;ll have a file called post controller.js and then in here we&amp;#39;re going to define a bunch of different functions I&amp;#39;m going to use Arrow functions so for instance we&amp;#39;ll have get posts and we&amp;#39;ll set that actually you know what we could do is just go to our uh routes post file and just grab this entire function right here and cut it so we&amp;#39;ll cut that and then we&amp;#39;ll set get post equal to that and what I&amp;#39;ll usually do and if you&amp;#39;ve ever taken my node.js courses or mstat courses in my controller methods I like to have a description and a comment just saying what it does so this will get all post and then I also like to put the route so we&amp;#39;ll say a route uh in this case would be a get request to SL API SL post and then I I would also put access but uh we don&amp;#39;t have authentication so there&amp;#39;s no reason to do that so next we&amp;#39;ll have let&amp;#39;s do description get single post and then route this would be slash API SL poost slash and then the ID space that out a little more all right and then we&amp;#39;ll have get post and set that equal to and we&amp;#39;ll grab this cut that paste that in all right I&amp;#39;m just going to copy this so the next one would be to create a post or create new post post and oh I forgot the method yeah so we want to do that and then post create post set that to this okay and I&amp;#39;m just going to copy this again so we get two more we get the update and the delete all right so const all right so let&amp;#39;s grab this so that&amp;#39;s the update and then we got the delete oops okay so these these methods have to be exported you could either do it at the bottom or you can just simply put export before each one which is I guess what I&amp;#39;m going to do okay so looks ort those now we want to import them into the routes file oh this to obviously we need access to the posts in the controller so that will go at the very top okay and then from here let&amp;#39;s import from and then we&amp;#39;re going to go let&amp;#39;s see up one level into controllers and then post [Music] controller.js and then I&amp;#39;ll we have to do is replace what we just cut out with the the name so get post this will be get post so you can see how much we&amp;#39;re cleaning this up and let&amp;#39;s see get poses oh I didn&amp;#39;t bring them in so right here we need to bring in get all right so everything should still work the same so if I try to get post two okay that works if I try to get all posts if I try to get a post that doesn&amp;#39;t exist okay error Handler is working good so I think that this is cleaner to have these these named functions here and then to have our routes that just point to those named functions and I just realized that I have create post here this should be delete post all right now what I want to do next is give you an example of how we can interact with our backend from the front end and we already have a public folder with some HTML files and I&amp;#39;m not going to this is going to be very like very simple I&amp;#39;m not going to create a UI with styled CSS or anything we&amp;#39;ll just make it so we can have a button we click and it fetches data we&amp;#39;ll also just have a simple form where we can add a add a new post add a title all right and we&amp;#39;re going to do that that&amp;#39;s why I kept this commented out because we&amp;#39;re going to use this um this Express static middleware because I want to be able to use those HTML files now we&amp;#39;re going to have an issue here and you&amp;#39;ll see if I save this I get an error and if we look at this it says double undor dur name is not defined in es module scope the reason this isn&amp;#39;t working this right here this this usually will you know get the C the current directory that you&amp;#39;re in it doesn&amp;#39;t work when you when you&amp;#39;re using ES modules it&amp;#39;s in the scope of the commonjs modules however there is a workaround so we&amp;#39;re going to just uh just add a couple lines here to make this work so first thing I&amp;#39;m going to do up here I&amp;#39;m actually going to import a function from the URL from the URL package or the URL module which is is part of node.js so we&amp;#39;re going to import from URL and the name of the function is file URL to path and then basically what we&amp;#39;re going to do is create this our s because it&amp;#39;s not available to us because well I mean if you&amp;#39;re using commonjs it is available to you but if you&amp;#39;re using this import syntax it&amp;#39;s not so I&amp;#39;m going to go right here let&amp;#39;s say get the directory get the directory name so first off we&amp;#39;re going to create double uncore file name that doesn&amp;#39;t exist either anymore but we can create it oursel by using the file URL to path and then passing in import. met. url and what this gives you is your file URL to the the current file we&amp;#39;re in it&amp;#39;ll give us like file it&amp;#39;ll look like this right and then path to whatever file we&amp;#39;re in um I don&amp;#39;t want the file URL I want the just the path and that&amp;#39;s what this does is it gets you just the path and we can do a console log here of file name and even though we have the error it should still show us above that um right here so see this users Brad traversy desktop so that&amp;#39;s that&amp;#39;s my path and this is the file or server JS um to get the path name or the D the directory name let&amp;#39;s say cons Dore durame all we have to do is then use the path module and there&amp;#39;s a durame method that we can use and then we can just pass in that double uncore file name so now everything works right we&amp;#39;re not getting any more errors so now that that works we have our static folder and if I were to go to Local Host 8000 we should see the homepage right because I have that index HTML I also have that about page so if I go to slab HTM ml shows me the about page now this this index HTML this is where I want to have some frontend JavaScript to fetch the data from my back end and you&amp;#39;d probably be using something like react some kind of front-end framework or Library um we&amp;#39;re not doing that we&amp;#39;re just using vanilla JavaScript but the way that you would fetch data and stuff is going to be the same you&amp;#39;re going to use the fetch API or something like axios so let&amp;#39;s go to the public folder and then index HTML and I&amp;#39;m just going to change a couple things up here we&amp;#39;ll say post again this isn&amp;#39;t going to be like a nice looking UI or anything so H1 we&amp;#39;ll say post I&amp;#39;m going to have a button and given an ID of get- post- BTN say get post and then let&amp;#39;s have an out output ID and then we need a front-end JavaScript file so we&amp;#39;ll have a script tag with a source let&amp;#39;s say [Music] sljs main.js that&amp;#39;ll be our front-end JavaScript so in public let&amp;#39;s create a folder called JS and then create a file called main.js all right and then let&amp;#39;s go ahead and I&amp;#39;m sure that you guys don&amp;#39;t really need me to explain much here it&amp;#39;s just frontend JavaScript we&amp;#39;re going to use document. Query selector and I want to get that output ID element and let&amp;#39;s also get the button so get- post- BTN and we&amp;#39;ll call this uh button all right and then I&amp;#39;m going to have a function we&amp;#39;ll make this an async cuz I&amp;#39;m going to be using a sync of weight so we&amp;#39;ll make an a async function called show posts and let&amp;#39;s just say get and show post all right so we&amp;#39;ll say const res set that to await Fetch and we want to fetch from our API so HTTP and Local Host Port 8000 SL API slost same endpoint that we&amp;#39;ve been using in Postman and then we&amp;#39;ll say if um so if not res. okay so something goes wrong and we can&amp;#39;t fetch then let&amp;#39;s just do throw new uh throw new error say failed to fetch failed to fetch posts okay then underneath that let&amp;#39;s say cons post set that to await the res. Json and we&amp;#39;re going to take the output dot enter HTML I&amp;#39;m going to set that to an empty string to begin with okay then we&amp;#39;re going to Loop through the posts so we&amp;#39;ll say post dot for each I mean there&amp;#39;s a million ways to do this this is just a very quick way so let&amp;#39;s say for each post then we&amp;#39;re going to let&amp;#39;s say post element uh we&amp;#39;ll set that to document dot so I&amp;#39;m going to create an element for each post and that element will be a div okay then we&amp;#39;ll take our post element d and let&amp;#39;s add some text content and set that to the post. tile and then we&amp;#39;re going to take the output and append child and we want to append that post element okay we should probably put this in a try catch so let&amp;#39;s do that just take this okay and in the catch just do a console log and we&amp;#39;ll say error fetching posts all right now we just need an event listener so let&amp;#39;s say event listeners we&amp;#39;ll have the button and let&amp;#39;s listen for a click event and when we click that we&amp;#39;re going to call show post all right so let&amp;#39;s go to our homepage and now if I click get post there we go post one two and three right if I were to add a new post by making a a post request of a title let&amp;#39;s say new post send okay and then I go back here there we go see our new post so now let&amp;#39;s make it so we actually have a form here an input that we can add a new post so let&amp;#39;s go back to the HTML and I mean I know that a lot of you guys probably already know this stuff but it&amp;#39;s just for those of you that aren&amp;#39;t really familiar with full stack development how we can interact with our API with our back end from the front end so I&amp;#39;m going to add just a very simple form so we&amp;#39;ll put this let&amp;#39;s see we&amp;#39;ll just put this under the H1 say form no action but I am going to give it an ID of add post form and we&amp;#39;ll give it a label let&amp;#39;s say for title and I&amp;#39;m just going to put a line break I&amp;#39;m not using any CSS at all so we&amp;#39;ll put an input let&amp;#39;s let&amp;#39;s give it an ID of title type is going to be text we&amp;#39;ll give it a name of title and we&amp;#39;ll put a line break here as well and then let&amp;#39;s do a button give it a type of submit okay so we should now have a very ugly looking form and when we submit this obviously we want to make a post request and add some data add a post so let&amp;#39;s go back to our main JS our frontend JavaScript and let&amp;#39;s create a function so this will be also async function we&amp;#39;ll call it add post and I&amp;#39;m going to pass in our event param we want to prevent the default Behavior so e. prevent default then for the form data I&amp;#39;m going to set that equal to new a new form data object and pass in this and then we can get the title with form data doget and title all right so that&amp;#39;ll give us the title then for the request I&amp;#39;m going to put that in a try catch and let&amp;#39;s say conr set that to a wait Fetch and we&amp;#39;re going to make a request to http Local Host 8000 API poost now we want this to be a a a post request so we&amp;#39;re going to pass in an options object as a second argument with a method of post and we&amp;#39;re going to set headers and we want to set the content type I want to set that to application SL Json and the body so the data we&amp;#39;re going to send we&amp;#39;re going to wrap this in json.stringify and pass in an object with the title all right and then after that let&amp;#39;s check to see if it&amp;#39;s not okay so we&amp;#39;ll say if not res. okay then throw we say Throw new error and fail to add post okay then here let&amp;#39;s say const new post set that to await res. Json then I&amp;#39;m going to create post element document dot uh create element that&amp;#39;s going to be a div okay then we&amp;#39;re going to take that post element and we&amp;#39;re going to add t text content which is going to be the new post. tile and then we just want to append that to the output so output pen child post element and then in the catch here let&amp;#39;s just do a we&amp;#39;ll do a console. error all right and then we just need another event listener that&amp;#39;s going to be on the form which did I bring in I didn&amp;#39;t bring that in so up here add post form form it&amp;#39;s going to be a submit and it&amp;#39;s going to call add post all right and actually we want to let&amp;#39;s show the post after too so right at the end here we can just call show post this is just very very quick JavaScript that I just created um so this should work though so let&amp;#39;s reload it let&amp;#39;s go ahead and say Brad&amp;#39;s post add post and there we go and I can you know keep adding them cool so just an example of frontend JavaScript working with our backend API so where we at now I think I think that I&amp;#39;ve covered everything I wanted to as far as you know building an API I I do want to get a little bit into template engines because you might want a build just a a server side app similar to like what you would do with PHP um and there&amp;#39;s a bunch of template engines you can use ejs embedded JavaScript is my favorite um I think it&amp;#39;s it&amp;#39;s very similar to how PHP works as far as the tags go and all that and I I don&amp;#39;t want to use it in this project so I think what I&amp;#39;ll do is just create a whole new folder and and go from there so I&amp;#39;m going to stop this server and I&amp;#39;m going to close that up and then create something else so let&amp;#39;s do this isn&amp;#39;t going to be very long I&amp;#39;m not going to get too deep into it so let&amp;#39;s create uh I&amp;#39;ll make a directory call this Express 2 CD into Express 2 and open up vs code all right let&amp;#39;s put this in here my little square okay so we&amp;#39;re going to basically just start from scratch here but I&amp;#39;m going to go kind of quick so npm and nit and then we&amp;#39;re going to create I&amp;#39;m going to call it app.js this time and let&amp;#39;s install Express npm install Express now we&amp;#39;re also using ejs so let&amp;#39;s install that as well so Express and ejs those should get added as dependencies and then I&amp;#39;m just going to add a script start script here so this will be node not server node app and then let&amp;#39;s do a Dev and this will be node d-at app and let&amp;#39;s use es modules you don&amp;#39;t have to but that&amp;#39;s I just prefer it so we&amp;#39;ll say not module type and module all right so we&amp;#39;ll just create a basic server so we want to initialize Express and we want to listen I&amp;#39;m not going to bother with environment variables or anything like that just say server started all right [Music] so the way that we configure ejs is actually very simple so let&amp;#39;s say config ejs so basically we just got to set the the view engine so we do that with app. set and we want to set view engine and then we also want to pass in ejs as a string then we also want to set the the folder that we want as our views folder so let&amp;#39;s say app. set I think it&amp;#39;s views by default so you might not need to add this but I do anyway so I want to set the view view folder to a folder called views all right and then let&amp;#39;s see we&amp;#39;ll create a route let&amp;#39;s say app.get so app.get slash and request request response now since we we&amp;#39;re using a template engine we have access to res. render so if I say res. render and I pass in here index it&amp;#39;s going to look for an index page in My Views folder so let&amp;#39;s create that let&amp;#39;s say new folder views and inside that we&amp;#39;re going to create index Dot and it&amp;#39;s going to be ejs is the extension that we want to use and in here let&amp;#39;s just create like a basic HTML I&amp;#39;ll just say welcome H1 welcome all right now I&amp;#39;m going to run the server so npm runev so server started now let&amp;#39;s go to the browser let&amp;#39;s go to Local Host 8000 and we get welcome okay so it&amp;#39;s using v um VJs it&amp;#39;s using ejs now what&amp;#39;s really cool about these template engines is not just that we can render HTML pages I showed you that in the very beginning but we can pass in Dynamic data right so if you have if you if you have like if you fetch data from a database you can pass it into the view now I&amp;#39;m not using a database but just to show you how to pass data we can just add an object as a second argument here and let&amp;#39;s say we want to pass in title so we&amp;#39;ll say title welcome and then let&amp;#39;s say message and we&amp;#39;ll say hello from ejs all right so I&amp;#39;m passing these these variables in title and message and then I can go into my my page that I&amp;#39;m rendering let&amp;#39;s say for the title instead of welcome I want to show that variable and the Syntax for this is going to be an angle bracket and then percent sign and then equals and then whatever the variable and then close it with percent brackets so very similar to PHP and then let&amp;#39;s say we&amp;#39;re I have this H1 that&amp;#39;s where I want to put the message so again I&amp;#39;ll use my percent equals and then message and then percent angle bracket okay so now we&amp;#39;ll check that out if I reload we get welcome in the in the tab here and that&amp;#39;s coming from this right if I say my website so now my website in the title we got hello from ejs which is the message so you can pass this Dynamic data in you can also pass in arrays so let&amp;#39;s say we want to pass in we&amp;#39;ll say people make that an array John uh Jane and Jack all right so now I got these people and ultimately these would most likely come from a database and then let&amp;#39;s say I want to put them in a UL so I&amp;#39;ll use my ejs syntax and we can take that people variable which is an array and then do four each and say person and open curly brace and then we can close off this line and then down here we&amp;#39;ll open up another one and that&amp;#39;s where we&amp;#39;ll have our closing curly brace in parentheses and then in the middle here we could put An Li and then we could output each person okay so let&amp;#39;s try that reload and there we go so this is good if you have something if you have a a project where you don&amp;#39;t really need uh a very Dynamic UI and you just want to fetch data show it stuff like that I mean ejs something like ejs could be a really good option you can also have partials so for instance if we want to have if we&amp;#39;re going to have multiple pages and we want a header on every page obviously we don&amp;#39;t want to put it you know put the header code the header HTML in every single view so we can create uh let&amp;#39;s do a folder here called partials inside the views folder and we&amp;#39;ll create header. ejs and let&amp;#39;s just put a header with an H1 okay and then if I want to include that in my index file I can use an include so I&amp;#39;ll go right here and the Syntax for this it&amp;#39;s changed from from back in the day now you&amp;#39;re going to do uh a hyphen like that and then you can do include and then the location which is going to be partial slash the location is going to be from from within the um the views folder there so ejs and then close that off so now you can see now we have the header showing all right and you can also have layouts obviously so you don&amp;#39;t have to repeat yourself with all with this stuff but I&amp;#39;m not going to get too too much into this I just wanted to show you it is possible you don&amp;#39;t always have to build apis um with Express but hopefully you guys learned a little something from this I know a lot of you probably already knew a lot of the stuff but even if you did hopefully you could pick one or two things up and for those of you that are new to express if you&amp;#39;re overwhelmed don&amp;#39;t worry about it things will will start to click as the more you work with it um but that&amp;#39;s it guys thanks so much for watching and I&amp;#39;ll see you next time

Transcript for:Express.js Crash Course Notes

Transcript for:
Express.js Crash Course Notes