Python Web Apps that Fly with CDNs Transcripts
Chapter: Integrating Static Content
Lecture: The rest of the static links

Login or purchase this course to watch this video and the rest of the course contents.
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:29 Down at the bottom, we have a bunch of JavaScript. So we're gonna use the CDN here. Here's our HTMX. All right, those are all good.
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.
2:52 Look, it's going and getting all of, all like the fonts and the CSS and the JavaScript.
3:00 But if we exit and start again, and we click here, super fast, super fast.
3:09 All it did is go get the HTML from forward slash and then it said, well, you need the CSS, you need this JavaScript, you need these images.
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
4:56 also things like all the JavaScript and CSS and all those extra requests.
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.

Talk Python's Mastodon Michael Kennedy's Mastodon