This course has been updated! We now recommend you take the AWS For Front-End Engineers, v2 course.
Transcript from the "Client-side Routing and S3" Lesson
[00:00:03]
>> Steve: Before we broke, we set up a domain name. We set the DNS for that. That took a little bit of time, and we also provisioned an SSL search so we could do HTTPS. We have not set up HTTPS yet, but we have at least provisioned the service and gotten that going.
[00:00:20] So here we have, superimportantwebsite.com is now my app. And I can navigate around and everything is great. This is a picture of Prince, as you do. And so brings us to our updated areas of improvement which is the URL is now kind of great, but it's not over HTTPS.
[00:00:45] It's still kind of manual, we have that command line thing happening. It's still hosted in Virginia exclusively unless you chose a different region. And routing, let's take a look at routing. So if I just go to superimportantwebsite.com, it works. I can click on things to do which is now notes/1.
[00:01:06] What happens if I refresh this page? So I can like navigate to it, but if someone goes to superimportantwebsite.com/notes/1 we get this. That's not great. [LAUGH] We definitely need to fix that. So we're gonna do two things in this next little segment together. One is we're gonna get, let's just say we're gonna get client side routing not broken, right?
[00:01:36] Still gonna have room for improvement, but it's not gonna be this. Then two, we'll get the WWW set up, right? And then when we move to CloudFront, we'll handle the HTTPS and a whole bunch of other things along the way. All right, so we will go back to the AWS console, and I'll go back to S3.
[00:01:57] And the easy way to do this, we'll get to the not easy way shortly, the easy way to get this working is to go back to that set of website hosting, and we'll say, hey, we could define a 404 page. And that will be less bad, but not actively good.
[00:02:18] So now instead of seeing that ugly S3 not found, they'll see a prettier not found page for something that definitely should be found, that's not great. So the kind of way that, it's kind of industry standard to handle this, is just say hey, you know what? Even when the asset is not found on S3, tell you what, just send them the index at html with the client-side app again.
[00:02:46] So we'll save that. And now, if we go back to superimportantwebsite.com, it works, and we can refresh and it still works, right? Now you're like this is great, not really, right? So we'll go ahead, if we look in the console.
>> Steve: If anyone wants to know how to turn on developer mode in Safari, you're about to find out.
[00:03:23] You can't open the DevTools without showing the develop menu in the menu bar.
>> Steve: Cool, and you can go ahead and I can refresh, right? And so now it technically counts as a 404 even though it's a legit route. That's kinda like breaking the Web. In S3, we don't really have a lot of options, this is just how we have to handle it.
[00:03:50] At least it's showing up. And then I have react router handling if I do like.
>> Steve: To a definitely not known route. To the user, everything behaves properly, but 404 for decent routes, yuck. So there's various ways of handling this. We're gonna err in the other direction eventually, and then we will finally solve this problem that resulted, that came from a four hour argument with me and one of the architects before we finally found a solution to this.
[00:04:22] But the site at least works now, even though like 404 is for decent webpages, not the best thing in the world, but we'll get there. I promise you.