Transcript for:
Lecture on Integrating Morgan Logger and EJS in an Express App

if you are using a different text editor you would probably say something like or if there is no process ends up port give it like 8080 or something and then you would save that and that will work to these double pipes the or symbol just means that if this does not exist do this instead this or this cool cool now that we got all this kind of working let's make sure we can send back our version of HTML the first thing I'm going to do is I'm going to bring in another package that we already installed what are the name of the two other packages we installed that's right so we're going to say bar logger equals require Morgan what do you think Morgan does it logs things how do you know no prob how did you know because he's a lumberjack logging now without that kind of logging it's going to store information about what's going on inside your app and it's going to display it down here all you have to do to make that work is you have to say app dot use logger and then we're going to give it the argument of depth for development which means we're still developing and when you save this and restart you can then refresh the page and see what happens you'll notice that down here it now tells us that somebody issued a guest request for our app we sent them back some info and it's at five point six four two milliseconds nice all we do-si bars lager equals require Morgan and then right below where we created the instance of the app creates instance of Express app we then tell our app to use the logger that we just required the Morgan lager and to log information as if we are developing our app and we are because we're still in development mode now we want right below this we want to serve up JavaScript and HTML and to do that we're going to use EJ s ej s stands for embedded JavaScript all it means that we're going to put some of our JavaScript inside our HTML now the way to get that working is you say app dot set the view engine to EJ s and this says instead of using normal HTML we want our app to use EJ s cool home all year now once that's set up we also want to send CSS and images etc which are known as static files CSS images and other static files to do that we need to tell our app we want to app dot use Express dot static and we want to put them all in a folder called views which means what do we have to do inside our directory inside our project make a new make a new folder that's right Daryl so we say mkdir wasn't named in this folder daryl views you got it shut up then we could put our CSS in there our images in there and we can put our ejs files too basic like HTML for school so in fact let's mcdr view slash the SS use slash images now it's in there cool and let's touch a new file touch a view slash home ej s and this ejs is exactly like HTML for the time being because you haven't put any javascript in it and that's basically it there is actually one more thing we should do to make our lives easier we should probably also this is a little bit of funk this is funky so i'll pay attention this one really quick I'm going to set app dot set the views folder and then we use this weird little variable that we get for free called der name underscore underscore and it actually comes up what is this one right there see that underscore underscore der name it stands for the name of the directory that the currently executing script resides in it just means whatever directory we're currently in use that directory it's called underscore underscore der name it's a node variable click and we say plus slash views oh man what the heck did we just do a ton of funky stuff but all of this just make sure that whenever we want the user comes to our page we're going to send them some HTML files so now we can set HTML files depending on whatever page they try to get in our application this is how apps use different kinds of files that's how you can go to youtube ve equals whatever the ID of the different video is and get a new video every time inside now the last inside home to ejs turn it into an HTML page doctype HTML HTML head body give it a title my first express app body is going to say h1 prep for prep and then a paragraph tag it says live your life the problem is we haven't told our app to use our home das file yet and I'm going to paste all this into slack so don't worry I am gonna paste all into slack I just want you to see the errors that happen if you don't do things right the first time so if you doing kind of errors again you know what's up cool now you guys can do this part here but in your server to ejs this is the part you have to remember instead of saying response dot send h1 we're going to response dot render the home DJ s page and now if you restart your application you should be able tada and there's our HTML page beautiful now we have a fully functioning working application all you have to do is flesh out the CSS and HTML like use materialized or bootstrap and that's a full app that's it you don't have to do a single other thing now we are going to do a few more things just because I want to make this cool and right now it's pretty boring but at its core that is literally all you need to get app working we just did it and how many lines of code like 26 and I just put some comments in there that's kind of nuts now I'm going to end this video here I'm going to send you the code on slack and by the way even says get and we got a 200 which means it's good and it took eighteen point two six nine milliseconds and we sent over our home to ejs page