Python Web Apps that Fly with CDNs Transcripts
Chapter: Integrating Static Content
Lecture: The rest of the static links
0:00 Well, we got one done. Let's find the rest. I'm going to do a search throughout the entire project for /static/.
0:10 Everything that is static content in this website comes out of that static directory and also only interested in the HTML files.
0:18 Let's open that in the find window so we can make our way through it. That one we don't need at the moment. What about this? Nope.
0:27 These are comments for us for later. All of these are actually comments up here, so we don't need those.
0:33 All right, this one, /static/imagebars, this is for infinite scroll. It's getting the CDN prefix here as well.
0:50 That's the one we already added. We've got a bunch of CSS files here. So same thing, we want to serve them out of the CDN.
1:02 We could use a different pull zone and a different domain, but it turns out to be not that great of an idea. I like using the same domain here.
1:10 This part of the top about using the CDN, that's what we're doing. And this beware caching is stale caching. We'll come back to that.
1:16 Now it looks like something's wrong. Like PyCharm's highlighted this as there's an error. It just says, I want to download this
1:22 so I can do autocomplete out of it. We'll let it do that in a minute. back to finding all these items.
1:44 And what else we got? Okay, excellent. We got the thumbnails for the videos. So put that in there. Here's the category image.
1:54 Now, when we load up the category, it takes that banner image and puts it as like a hero in the background.
2:00 So we'll put also want to load that out of the CDN, why not? Some more infinite scroll.
2:07 Oh, be careful, these are in the starter project that I don't want. I don't want to mess with those. The rest of these are all in starter.
2:16 Okay, so it looks like we've made all those changes. It's a little tedious, but I did want to actually go through it with you just so you saw like,
2:23 yep, it just means go through and replace all these things. Let's run it again.
2:29 And now remember, it's so tempting to click this and go, "Oh, it's so fast," but that's not what we want.
2:34 We want to make sure that we're using ngrok because that uses the CDN in the proper way, right? So let's click here and see what happens.
2:44 Nothing, because this page seemed to be out of the CDN, but did you notice up here it's still thinking about it for a minute? Let's look at this.
3:00 But if we exit and start again, and we click here, super fast, super fast.
3:16 And it went to the CDN or it believed the CDN when it said you can cache it.
3:21 away, it didn't come back here. Let's try again. Let's go to one of these. I'll click
3:26 on Apple for the category of videos. Notice it's pulling a bunch of these thumbnails.
3:34 This is the CDN again coming and getting all the thumbnails to seed the network through
3:39 the URL pull zone. But if we go away and we come back, nothing. It just does videos category Apple and then slash(/). Then, sorry, it's at the top.
3:52 Videos category Apple slash(/). No more content because all of these images you see flying in, they're flying in off of the CDN. How cool is that?
4:01 All right, let's try one more just for fun. Let's do Python. You can see them coming in slowly the first time because the CDN had to load them coming
4:09 in there, but subsequently, bam, super fast out of the CDN. And importantly, let's go and this is Vivaldi.
4:20 In Vivaldi you can hit control on Windows or command on Mac, command E or control E and say dev tools or view source. Super cool browser.
4:31 But check this out. We've got the video collector. Here's our bootstrap and that's coming out of the CDN, no longer out of our site.
4:39 Here we've got HTMX coming out of the CDN, no longer out of our site. for the images, same thing right there. Very very neat stuff.
4:50 So you can see that it's picked up not just the static stuff we see like the images but
5:03 When you saw the 109 requests from the course catalog page, almost every one of those came out of the CDN in just the same fashion.