Check out a free preview of the full AWS For Front-End Engineers, v2 course:
The "CloudFront Routing" Lesson is part of the full, AWS For Front-End Engineers, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve redirects 404 errors to the index.html file to let the client-side router handle any issues. This fix allows users to link directly to a page within the client-side application.

Get Unlimited Access Now

Transcript from the "CloudFront Routing" Lesson

[00:00:00]
>> Back to CloudFront., So, you can take a lucky guess where we can implement some bad error page dancing that we have a CloudFront, it's in this one called error pages. This is kinda cool because we get a lot more options than we had previously. So here we can choose a whole bevy of different error codes, and what we wanna do in given cases, right?

[00:00:29] How long do you wanna cache that for, and do you wanna customize the error response? Well, we do. Do for now found, you can redirect them basically anywhere in this case, and choose your status code. So before, if you remember, when we went to s3, we'd given the page but we'd count it as a 404.

[00:00:49] And then I told you like first we're gonna treat everything as a 404, and then second, we're going to treat nothing as a 404, and then eventually we'll treat only things that should be 404 as 404s. We're on the second phase of our journey together. We're gonna break the web in a different way.

[00:01:03] And I want to be real clear. This is how a lot of sites do it. And, the solution that we're eventually going to get to, so I'm gonna set that to index HTML, which is gonna serve my JavaScript, whatever client Side Routing, take care of stuff. I'm gonna say this okay.

[00:01:25] And this is what a lot of client side applications do. And the solution that will eventually end up in is me and one of my co workers got into a fight because he's like you're breaking the web. You should use that remote thing that we used to do like five, six years ago, where for client side routes, it was a hashtag.

[00:01:46] And then the rest of the route, like Twitter had it for a while. He's like, we should use hash routes everywhere. And I as a person with dignity, said, I'm not doing that. And then we went at it for like three hours on a Friday night, we eventually get to the final solution.

[00:02:01] So, that's a fun story. And this one needs the slash. The last one, the default route object, no slash. Response page path needs a slash. I would love to tell you eventually remember all these things but clearly as you saw I did not.
>> Quick question with the disabling the static website hosting.

[00:02:21] Do we also wanna disable it for the www bucket?
>> That will just redirect. Should, yeah.
>> It don't matter either way.
>> I don't think so. Let's find out.
>> Okay [LAUGH]
>> I also think that the www is now going directly to CloudFront.
>> Sure.
>> Right, so that bucket now is useful in some cases, right?

[00:02:42] Like, there is no necessity that you have to use s3. If you use CloudFront. There is no necessity that you have to use clustering to use s3. So some of these things like, If you use the whole solution, you might slice and dice it in slightly different ways.

[00:02:55] But I'm pretty sure our www is also good to go. And it's also secured. One thing to note is there was a minute there earlier, where I was not going to redirect it from HTTP to HTTPS. That was simply DNS catching up. I opened it in Chrome that didn't have the same DNS cache, it was fine.

[00:03:15] The browser just was confused that were wildly changing our deployment structures in our time together, awesome. So we've got that in place. All right, and so we should have our client side routes let's just verify that as well. Nope, but that one's unclear if that's because it hasn't deployed yet or not So we'll go check that one again in a second, and find out did we mess up, or do things just take a while.

[00:03:46] So if I go to my distributions, it's still declined. So I can't we not, we cannot confirm that, we have messed anything up yet. But, we'll go just check to make sure. Error pages, I've got the 404s, going to index HTML with a 200. I'm gonna assume it's just deploying at this exact moment.

[00:04:08] So, one of the things I promised you was I was gonna look into why my client side routes weren't working. And, it's almost as if I can't read, which is, if we look at the error, The error says, Access Denied. Now, I'm using Safari in this case just to keep the account simple, but we all know the 404 is not Access denied.

[00:04:35] 44 is not found, 403 is Access denied. And I have only dealt with the edge case of a 404. So everything works. It's the human that's problematic. So, we can go ahead and fix that real quick. We've got the 404, I'm gonna keep them because that's still a fair, irresponsible, create another custom one.

[00:04:58] Like in my notes is like, also make one 4o4 or 3 I was like, I don't need to do that. Got up we need to give it that page path as well. We'll send them over to this one has to have the slash, remember. The saving grace is once you get this all set up, you mostly leave it forever.

[00:05:26] So, that makes you feel better. All right, so now if we look, we're deploying it again, but I'm gonna, okay, there's no reason, we'll check on it a little bit. We'll put it back in the oven. I was suspicious that going that quickly with the error response was gonna work but we'll find out together.