Python Web Apps that Fly with CDNs Transcripts
Chapter: Troubleshooting
Lecture: Demo: Toggling CDN on and off for dev
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let me show you what I mean about being able to turn the CDN on and off at development time.
0:08
This is useful for troubleshooting, but it's also just useful in general for development, as we'll see.
0:15
So, notice again, a new chapter here, I'm calling this troubleshooting,
0:19
and I've got a bunch of blue files, I just changed those, we're going to talk about them in a second. And I got a new configuration to run this file.
0:29
Make sure you got the blue sources root here and here only. Okay, so what we want to do is somehow pass a variable along to our app.
0:40
Now that has that CDN information. So where does that variable come from?
0:46
Well, one thing that's always providing data to every HTML file in this website is the view model.
0:52
So the view model base, just like it's built cache ID can have this thing called
0:57
the CDN prefix. And up here at the top, we have a global variable use CDN, true or false.
1:05
And then when you create the view model, it says, well, if we're not using the CDN, we're
1:10
going to put nothing. So just forward slash static the way it was before. And if we are
1:15
using the CDN, then we're going to pass in our CDN here. And what that means is in different
1:21
locations like let's go here instead of having that hard coded that CDN prefix. We'll have
1:30
we're going to have the CDN prefix right there like that and here and here and here. So normally
1:37
if we just run it the way it is now and we pull this up we say source you can see here's Here's our static CDN link.
1:47
But if we go over here and we say, "You know what? In our app startup..." I'll have maybe another section here. I'll call this "Register CDN."
2:10
And of course, this is going to be really simple. You would read this from an environment variable or a configuration variable or something,
2:15
but for now we're just going to directly work with it here. So say viewModelBase.use_cdn = false. Okay. Let's run this. See how it looks again.
2:30
Still works. That's actually a pretty big accomplishment. But if I view source again, notice /static, /static, /static everywhere.
2:40
Here's the / static and let's put these side by side. Even down here where we're working with the images for the category, we still have our cache ID.
2:49
We still want that. That's still relevant. So we're not having this prefix for the CDN when we turn that off.
2:54
So what that means is we can now come over here and just start playing with this all
2:59
we want and as we make changes or as we go to the dev tools and look at say the network story when we click on this, you can see all this stuff.
3:09
If I scroll it so it fits on the screen, like this, it's coming out of localhost now. Okay. So this code is here.
3:19
Really all you just got to do is everywhere where there was the hard-coded text of the CDN, we put this variable.
3:25
And then at runtime, there we go, I'll put something like this to kind of give you a sense of whether or not it's in production.
3:32
If it's in production, we're going to use the CDN. If it's not, maybe, maybe not, depending on what you're doing.
3:37
So, but this is here for you to play with. I'm going to leave it just hard-coded to use the CDN for now.
3:43
And so if we go back and we rerun this and then refresh this, now we look at this, you can see out of the CDN, once again, beautiful.
3:54
Okay, so that is super handy. It's not, like I said, it's not just handy for solving problems.
4:00
Very nice when you actually go to production and your CDN origin is pointing at your production server,
4:07
you don't want to have to keep redeploying just to test minor CSS changes. So this is really relevant, this whole idea here to cycle it on and off,
4:17
but again, it's a nice way for testing if you run into problems too.