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.