Introduction to Web Development Static Assets

Transcript from the "Static Assets" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: Static Assets. So, Static Assets are interesting because they're essentially things that you're going to give to the user that the server's not going to change, right? So this is going to be like HTML, CSS, JavaScript images. They're just files that you're gonna store on your server and then send to the users.

[00:00:28] You're not gonna look at them, you're not gonna modify them. You're just, the user's going to say, hey, I need an image. Please give it to me. So we kind of introduced this idea of a static asset or a, something that's called a public directory. Cuz otherwise, you know how we're saying app.get do this, app.get do this?

[00:00:48] We could say app.get smileyface.png serve this smiley face picture to the user. It's a huge pain, especially if you have a large site with many, many, many images. So what we do is we take a folder and we me say this folder is now public, right? So anything that's in this folder can be accessed by anyone.

[00:01:08] Express is really good about that. You just say, hey, Express, serve anything in this folder to anyone who asks for it. And it just makes new routes for all your static assets based on what their file name is. And it'll even, you know how we set the content type?

[00:01:27] We had to say it was plain text, right? Express is smart enough to figure out what kind of static asset it's serving.
>> Brian Holt: So, again, it would be extremely painful if this idea of a static asset or a public folder didn't exist.
>> Brian Holt: Cool. Let's-
>> Male Student 1: So this is one of the things that Express adds, it's not part of [INAUDIBLE]

[00:01:53]
>> Brian Holt: Right. So this is an Express feature.
>> Brian Holt: Did I, okay, so I have a folder called, let's clear this out. CD dot dot. And we're gonna go to static assets. And we're gonna do npn install express.
>> Brian Holt: Okay.
>> Brian Holt: This should be, feel like the familiar pattern.

[00:02:25] You should be getting sick of it now, and I'm about to show you how you don't have to do every single time.
>> Brian Holt: But here in a second.
>> Brian Holt: All things in good time. Okay, so we're in static assets, and we're gonna look at app.js in here. Okay?

[00:02:45] So, even more simple. Here's an express server. And we're gonna use app.use, and then express.static.
>> Brian Holt: So, this line may look a little cryptic. It is. But, express.static is saying I'm gonna give you this entire directory, please serve it just like we were talking about. Underscore, underscore, dir name.

[00:03:09] That's essentially saying here is the directory where, it's essentially the base directory of where your app is. It gives, essentially, an absolute path to find these images, okay? In this particular case, if we go here, pwd.
>> Brian Holt: The underscore underscore dir name, it's a node variable, right? It's gonna be this, right?

[00:03:42] So, dir name is going to be equivalent to this super long string.
>> Brian Holt: Because node is aware of where it is, you're just telling it please use your awareness to figure out where this folder is. Okay? And then you say on addition to that go in to the public directory, right?

[00:03:57] Cuz you don't want your server side code being public, right? You just want your static assets to be public.
>> Brian Holt: Okay. And then after that we're just saying app.listen.
>> Brian Holt: Okay? So let's give this a shot
>> Brian Holt: We're gonna say nodemon app.js. Okay? And now, all these things in the public directory.

[00:04:24] I just wrote a little library right here, right? Don't, some CSS, some JavaScript, a little HTML file. You don't have to worry too much about it. You can look at it if you want to. So let's go back here
>> Brian Holt: and we're gonna go to index.html.
>> Brian Holt: Hopefully, you're seeing a large pink button that says press me.

[00:04:50] And lo and behold, of course, what did I do? It serves cat pictures.
>> Brian Holt: Right. And you can just keep pressing cat pictures and it will keep serving cat pictures.
>> Brian Holt: Kind of a one trick pony up here. Sorry, guys. [LAUGH]
>> Brian Holt: Well, let's look at our console real quick, right?

[00:05:19] And there's this little tab right here that says network. Let's go ahead and refresh it, our page. And it's gonna record everything that comes into the page. So I notice it's getting, it's getting our style.css, it's getting the HTML, it's getting the kitties.js. It's doing all of this without us explicitly telling Express serve this JavaScript, Express serve this CSS, Express serve this HTML.

[00:05:48] It would just drive everyone crazy, it would be impossible. So instead, I just put all of those files on a public directory and say serve this entire directory. I don't care what's in there. If they know what the name is, they can have it.
>> Brian Holt: Make sense? Awesome.

[00:06:05]
>> Brian Holt: I should really trademark this app. It's awesome.