Express JS - Sending Headers, Content, Attachments and Statuses

okay so today I want to talk about the response object with express so we've talked about how Express works and the request object we've talked about the HTTP verbs and understanding how routes get put together and all the things that can be sent to our server but what about what we can send back from the response so somebody makes an API call we've got an API that we've built and somebody makes a call to that or we've built a web server in somebody's requesting content for that web server whichever kind of server we're building we need to be able to send stuff back to the user as they request it so at the top of the file here I've got a link to the official Express documentation this is the response object documentation here so if you want to take a look at that I recommend you go through it with any product it's really a good idea once you've got over your initial discovery of what the thing can do once you understand the basics of how something functions it's always a good idea to take a look at the official documentation you'll find all kinds of things that you won't hear about in most tutorials so even mine the things that I just don't bother talking about in some tutorials but that being said let's get into all the things that we can do with response so I've got a very simple server setup here I've included Express I'm defaulting to port 3000 I'm then looking for just the route and I'm sending I'm listening for any incoming calls we're gonna talk about all these different things that we can do with this request that's coming in so the first and most basic one is send now this one lets you send content back to the user now my content could be just plain text or it could be HTML so I could create an entire HTML file here and send it back the cool thing about send with Express is it will look at what you were sending back and try to determine what's the most appropriate content type it sends back the status 200 to say yeah here we you go I've got some content for you this is the type here's where hundred status world good to go so we get all of that stuff built-in to send now end is very very close to this send an end very closely related the difference between them is that end is not going to set any type header it's not going to say the content type of what you're sending back is HTML or text so if you ever want to set the header for yourself and is the one that you should be using not send it also doesn't set an e-tag header to give kind of a version of the file saying okay here's the hash that identifies the file this is the current version of the file to make sure that you've got the right one cached it doesn't do any of that stuff it just sends the content that's all it does send will send the content but also looks to find figure out what kind of type it is all right so let's send an end of that one up and we'll come at these ones out again with res file our res send file as you can imagine this one is sending back a file instead of just content it's an actual file so over here in my file system I've got a folder called image here's this image that I've got I could go in here and say you know what I'm gonna send back to the user something in the image folder called cotton candy dot jiff there we go so that is now going to send that file the appropriate headers just like send up here it will set the appropriate headers to say it's an image slash jiff and that will be sent to the user if a problem occurs we do have an error function that we can use I'm just logging you know right now but you would probably want to actually do something here to say that nope there was an issue I don't have that file or whatever the problem was okay moving on we've got JSON this is similar to send and end you're sending back text content but in this case you were explicitly saying that what you were sending back is going to be a JSON object or a JSON string so I could create my object in here there we go I've got my object it's gonna take that it's gonna stringify it as JSON and send the string back to the user great okay redirect if you have an old version of an API or a website and you've changed some content you've changed some file names sometimes you're gonna want to maintain support for the old version and have your new content there as well so if somebody requests the old version you can do this you can send to the browser a redirect I'm sending them a 301 status which means permanently moved and here's the new URL that they should use so this is going to go to the browser the browser is going to say oh okay there's a new location for this file and it's gonna send the request for other then that will come back to the browser so the browser has to make two requests but we've automated the process instead of sending a 404 error to the user saying hey we can't find your file we're telling the browser no I know there used to be a file called that but this is where it is now all right format now this is a cool one with format let me uncomment all that browsers are allowed to ask for different versions of a file just like with emails you can get a plain text email you can get an HTML version of an email maybe when a resource is requested you've got a route which includes a method and an endpoint but you've got different versions of that content so build an API and say okay you can ask for the content as plain text as HTML as JSON or even we could say I'm gonna send it back as text slash XML there we go so now I'm doing a res dot send and I will send back my XML version one I have to match up my quotation marks here okay so that's just quick and dirty if we had a whole bunch of XML data we could send that back as well so the user has a choice of how they get their content they can include that inside of the headers to say you know what here's the list of response types that I'm going to allow or that I would like here's the order that I want them in this is sort of my priority sequencing if you've got JSON that's the one I want but if you don't have it I'll accept XML so we can set that that's what the format header is for or this format method is to say this is the content that I'm going to be sending back so it allows you to negotiate with the browser which type of content you're gonna send back and it comes with a very handy default property down here at the bottom actually I should have quotation marks around that there we go and the default will send back a response saying you know what you told me that you had this kind of content that you wanted back there was a specific type of content you wanted but I don't have that to give you so 4:06 not acceptable I'm not accepting your request because I don't have content of that type to send you okay so that is the format then links this is setting another header so with format we were actually sending the content back with links what we're doing is we're setting it's like we're setting link tags up inside the top of the browser inside your HTML up in the head you can set links to say okay here's the previous page here's the next page if we're doing paginate content here's the first link the last link or relative you know what's the maybe there's multiple ways that you can request this page I have another video on canonical links basically you're saying this is the one proper URL that you should use for this page on you can request it multiple ways but this is the real URL that all those other ways are going to point to so I've got one canonical link prefetch and preload so you're telling the browser hey you're going to need these resources so once you're done with the main thing that I've sent you back here's some other resources that you're going to want so we can help that by telling them ahead of time when the initial response goes back we're telling the browser you're also going to need these things in the future all right so those are headers that we can set that sets the link header it's not the actual link it's not injecting into the HTML I just want to be clear on that it's not adding to the HTML but it's accomplishing the same purpose it is actually setting a header in the HTTP response to tell the browser about these things okay rendering now I'm gonna do another video video on rendering of content using templates specifically pug but I have to talk about it here because we're doing the render method if you have a template to generate content now I've got a simple one here here is my template I'm generating doctype HTML tag head tag title tag body tag three paragraphs with some attributes and these are variables that I'm writing out in that content if I'm using render I need to make sure that I'm specifying up here at the top what the View engine is and where the views are located so here's my pug file that's inside of a folder called views that's what I'm doing here and getting the current working directory and I'm appending views on to that so I'm pointing to this folder and this is the name that I'm going to refer to this folder with so down here I'm gonna render my view it's gonna look to this folder and look for something called my view and there it is so it renders that it sends it back to the browser and this is just an example I can pass with another way of passing variables in I will do another video on how and how we can integrate that with Express these two kind of go together set an append set I'm setting one header or I'm setting an initial header and then a append lets me add more headers onto it so if you're gonna set a whole bunch of the headers do the first one is set and then append for the rest of them cookie if you were going to send cookies back to the browser so we've got a name and a value at the very least and then there's an options object and inside the options object I got an extra parenthesis there inside the options object you can define things like where's the cookie valid what's the domain subdomain the path that this cookie can be used on secure is it HTTPS only max-age or you can use expires if you prefer this one is 30 days worth of milliseconds status if you are just doing something like this all right I'm not sending any content back what you've requested doesn't exist so I'm setting a status 404 and I'm just firing back the response to to tell Express hey I'm done with this response please send the whole thing so the browser knows that the response is done as we have those we've got type if for some reason you needed to set the content type now you can use response dot set method or the type method these two are doing the same thing I mean it's two different content types but doing the same thing now the last couple ones I have here have to do with files so let's do this we had the send file up above so let me bring that down here just so we can compare just a moment okay I'll put it right in the middle all right so we have attachment send file and download attachment what that does is it sets the content-disposition header I'm gonna be dealing with the fact that I'm sending a file back in some other piece of code maybe I've got another function that I'm gonna call here and I'm gonna dynamically build a PNG file or I'm gonna take a couple of files smash them together or compress it or do something but I'm gonna be handling the fact that I'm sending the back my file with some other code maybe it's just gonna be no js' not touching Express at all but I need to set the header for this I'm saying this is going to be the file name that the user is gonna see so regardless of what it actually is a regardless of what I'm building this is the file name the user is going to see and the content-disposition header is going to be set to say that this is an attachment now attachment is doing the same thing as this download function here's the actual file this is the file name that I'm giving it and the download function sets the content-disposition header to attachment as well and that is an instruction to the browser to say you're not gonna render this in the browser itself you're not going to render it in a way that the user can see what you're going to do is you're going to trigger the save dialog so if I just to demonstrate this if I comment these two out save that now all I'm doing is res download I don't think I've got anything else uncommented nope all right so when I make a request for just the root URL I'm gonna be sending back this image so in our browser when I make a request just for the route oh I have to actually start my server that would help there we go listening on port 3000 and once again I will send the request for that here it is so candy that was the name I know it's pretty small here for you it is to see but candy this is the name that I was telling him this is the actual name but this is the name that I'm giving and I now can save that file and if we want to look at it there it is this is the animated gif if you've ever seen this one you can download all I will include this file you can take a look at this this kid just goes nuts over cotton candy alright so that's it those are the methods for the response object we've got a whole bunch of stuff that we can do with the response object let me shut this down so I recommend you take a look at the official documentation you can download this source file to play around with the functions experiment with it figure out what each one of them do to become familiar with it all if you have any questions feel free to leave those in the comments down below and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 10,652

Rating: 4.9736843 out of 5

Keywords: MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, express tutorial, express js, express js tutorial, http headers, express web server, express api, sending attachments, sending content, response object, mad9124, introduction to express

Id: w02YRfpYnS0

Length: 16min 4sec (964 seconds)

Published: Sat Jan 25 2020