Check out a free preview of the full AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course:
The "Error Pages with CloudFront" Lesson is part of the full, AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course featured in this preview video. Here's what you'd learn in this lesson:

Steve readdresses the problem with client-side routes and answers questions from students.

Get Unlimited Access Now

Transcript from the "Error Pages with CloudFront" Lesson

[00:00:00]
>> Steve Kinney: So we're going to try to see if our CloudFront distribution's up and running. It all depends on how long I just talked, and how quickly it went. We'll take a look and we'll see. If so, we will hit our website, right? So we get the CloudFront cache warmed up.

[00:00:17] And we'll take a look at what a ht and a miss are. And then we will go ahead and deploy a new version and see what happens. So what we'll end up doing is, at one point we'll make some change, you can change the title, you can change my wonderful CSS work, how dare you, those are pretty colors, and so on and so forth, right?

[00:00:36] And we'll see how that actually propagates and if it propagates. Cool, so we will either. Let's see if this works. If not, we'll take a quick break and wait for propagation to happen. All right, there it is. It's superimportantwebsite.com. Looks like it propagated enough, at least. Full disclosure, you might go to yours and it might not be propagated yet.

[00:00:59] Right, that is okay. If it doesn't propagate within about 30 minutes, then we'll deal with it, but it takes time. I was pleasantly surprised to find that mine propagated. So you see this little lock, that means I've got HTTPS. It's a little more prominent in Chrome and Firefox.

[00:01:20]
>> Steve Kinney: So we can see superimportantwebsite.
>> Steve Kinney: But the things I wanna make a note of is, this'll either be a hit from CloudFront, which means it never went to S3. A miss, which means it's the first time it's seen this one, and it has to go to S3, or an error.

[00:01:39] This is likely if you look, there's no such key, probably cuz we need to actually set up an error page for a 404 to show the index. Which we will literally do in a second. But we see some additional things in there as well. So let's go ahead and let's deploy a version of the application.

[00:01:59] And let's actually fix the error pages first.
>> Steve Kinney: So we're here. And in case that takes some time to propagate, we'll have that ready to go. Yes?
>> Speaker 2: Just a quick question about setting up the record set for CloudFront. I'm getting error that says that it's trying to create a record set.

[00:02:23] My domain type A, if I just leave that name blank, because it's already set up. Is that supposed to be a different value there or?
>> Steve Kinney: Are you making a new one or are you adding in the existing one?
>> Speaker 2: I'm making a new one.
>> Steve Kinney: It's probably like, hey, you already have one with that name.

[00:02:41]
>> Speaker 2: You wanna edit that one?
>> Steve Kinney: Yeah, exactly.
>> Speaker 2: To have the Cloudfront site. Okay, so then you're no longer using that S3 domain?
>> Steve Kinney: Exactly.
>> Speaker 2: Okay, cool.
>> Steve Kinney: It'll hit CloudFront, CloudFront will go to S3. Cool, so a bunch of options here. I have restrictions. I have error pages.

[00:03:00] So I'm gonna Create a custom error response. And I'm gonna say if you get back a 404, we want to customize that. We'll send you.
>> Steve Kinney: We'll actually ask for index.html, and we'll say everything's gravy. So this is the opposite problem that we had before. Before, when we had S3, we were like, yeah, it's a 404.

[00:03:20] And then we sent them the page and everything was great. This is a similar but terrible problem, where we're gonna treat everything as okay. Which means they go to /notes/1. Yay, that's a real route. If they go to slash totally not real, not found, I don't know what you're doing.

[00:03:37] [LAUGH] 200, they'll see the not found page, cause direct router'll handle that. This isn't great either. This is a fact, what a lot of client-side routing applications do, they just really, well that's life, what can I do? We'll actually explore how we can actually solve that. But this is actually the state of world in a lot of cases.

[00:03:58] I'm gonna make an additional one for 403s as well.
>> Steve Kinney: That will take a little bit of time to propagate.