File-Based Routing Exercise

[00:00:00]
>> Ben Hong: So our fun little exercise, this shouldn't take as long. I'm going to push up my branch to the 04 exercise branch. And your task, should you choose to accept it, is to migrate everything from the routes into file based routing. So I kept this one a little bit on the shorter side because, you know, again, it's kind of like a fun thing to kind of get used to and I figured it's kind of easier for you to play with on your own also.

[00:00:34]
So let's go ahead and just, let's. Let's migrate the whole thing, shall we? So when I'm doing the migration for something like this, something actually, the first thing I actually want to emphasize here is actually that you might notice that these two approaches are actually coexisting right now.

[00:00:50]
There is the pages approach and you technically have some views being manually defined. I do think this is a big philosophy that I've always enjoyed about VUE and kind of its community is that it doesn't try to force you one way or the other and it basically lets you, I mean to kind of what we were talking about earlier in this workshop kind of composes of things that make sense to you.

[00:01:08]
Because I don't know if some of you got to the challenges part, but this not found doing wildcards is a little bit. It's actually. You actually have to look in the docs for this. It's not incredibly intuitive. I mean there is a world where some people like, because this is just easier for them to understand, they'll configure some of their routes still manually because maybe they also have some custom things they want to do, maybe programmatically that doesn't fit the file based routing.

[00:01:32]
Because that's usually what I hear when people criticize file based routing and they're like, I have this one edge case that doesn't apply to that. It's like, that's cool. But for 95% of the other things, file based routing works great. So this is my reminder to you that like, while I'm going to migrate everything over, you certainly don't have to.

[00:01:48]
And more importantly, should you need to manually define your routes in the future, it is really just a step away by just adding something inside of this route configuration. Okay, so that said, let's go ahead and move on. Okay, first thing first, reflection. I'll drop that one first.

[00:02:05]
So I'll move that over and then I'll just call it reflection and then we'll get rid of it inside of the routes page. Here. Boom. Save. I think that's good. So we're going to test it, though. We always test our things. All right, that's up. We go to reflection.

[00:02:28]
Great, it's working. All right, moving on. Let's just do the sandbox page because we can. Yes. Move. And then we'll just rename that sandbox. And then inside of our routes, we delete the sandbox page here. Check it. Yep, there's our sandbox page. Okay, keep going. Let's do Settings next.

[00:02:55]
So drop that over there. Settings. Delete from here. There we go. And then let's click Settings. Hey, there's our settings. Everything still works great. All right, now the coup de grace. All right, so the planner section. Let's take a look at how we intended this to be routed.

[00:03:20]
So, the planner page itself looks like it's just slash planner. So one way we could do this. So you saw that earlier for slash tasks, I did, like an index under the folder. This should work the way I think it does, which is that you can still just make this like.

[00:03:37]
Just Planner like this. And so now that that's Planner, we should be able to then come in. Wait, I didn't delete the other record. So now Planner should be here. And there you go Planner and renders as expected. Okay, here is then the tricky part. So now you have this week as well as this ID here.

[00:04:00]
So we need to do. Here is we need to do a folder for week and then we create a. Well, actually take the back. I don't need to create. I just need to drag week detail page in here and then swap out the name for a square bracket id.

[00:04:20]
This should be. Okay. About to find out if I'm wrong. Now that we have this, let's just refresh it real quick. And then we're going to look at the week itself. Up, page not found. What happened? Failed to resolve. That shouldn't be the reason. Let's debug this together.

[00:04:47]
Let's see. We have it here.
>> Speaker 2: Don't we need to put it in a planner folder or something like that to match the original way that it was?
>> Ben Hong: Yeah, you're totally right. I got ahead of myself. Let me undo this real quick. I guess I thought I created.

[00:05:03]
I will tell you in my head, I created a planner folder. I clearly did not. You are 100% right. So that means week needs to be nested under here. There you go Planner Week id. All right, now let's try this again. Sorry. Let me delete this. All right, this is a fun little tidbit.

[00:05:26]
Okay, tip here. So, you may have noticed we have a lot of broken paths. I don't know if you notice this pattern I was using, the at symbol. Are people familiar with this? Okay, great. For those who are not, this is something that comes from the vite configuration and it's actually an alias.

[00:05:44]
So this is not magic. It's actually something you can configure. And it basically says, hey, for these paths, whenever you prefix it with at, I want you to start from the root directory and go straight into source. And so this makes it a lot easier to deal with moving things between directories, because you know that everything is always going to start at the source.

[00:06:05]
Although, granted, I'm not sure why it's still yelling at me. But one thing at a time. Okay, now that that's done, let's refresh. And then that did not work. Planner is good week did not happen. Okay, what's the problem here? So, I assume this is what you were mentioning.

[00:06:29]
So what I'm going to do now is we're going to take a look at the typed router to see what it's generating. So, we see that there's Planner here. Planner Planner here. Planner week. ID here. Param id true. Id param false. So that seems like it's sound to Planner Week.

[00:06:56]
And then this is also. I assume this is Planner Week. Let's find out. H. wait, why is this an H3? This seems suspicious. H3 card title. I have a guess. This is in our planner. No weeks available. That's not it this year. Yeah. Remember what I mentioned about AI doing funny things?

[00:07:31]
This is the goToweek and then it rather push. Okay. So yeah, it is pushing the weak ID and that is causing it. We are noticing, I think everyone knows that it crashes on their end as well when they get to this point.
>> Speaker 2: It works for me.
>> Ben Hong: It works for you.

[00:07:51]
So yeah, this is a smidge odd. See what errors am I getting new Planner Cardbody. Is that why it's yelling at me? No, you all should have the same code. Did you also do it the same way where you had the planner out here rather than like.
>> Speaker 2: No, I have Planner as an index.

[00:08:19]
>> Ben Hong: As an index. Okay, let's try this. And perhaps this is a bug. I was trying to be a little cheeky by jumping ahead, but that may have ultimately been a mistake. I'm going to go ahead and update these real quick. Okay, great. Planner week. Wow. Really doesn't like it this is why we debug live.

[00:08:55]
Okay, let me just fix this icon thing then let's make sure we remove all issues that we have. So, where's it getting an icon? Okay, got it. But to be honest, at that point I'm just going to import base icon. If I'm going to solve this and just do base icon and set of icon, its name and then sure, with height, whatever.

[00:09:21]
Okay, so now this. Wait, what is this? This does not like it. Okay, you know what I'm going to do though? On the planner new planner body, we're just going to delete this for now. Okay, so now no errors, but for some reason it still cannot find the page.

[00:09:45]
For those of you running into it, I believe somewhere in the hot module reloading something, some wires got crossed. So if you shut down your server, reboot it, it's able to reconnect all the dots. So I guess some people didn't have that issue. And then clearly I was able to duplicate it by accident.

[00:10:03]
So yeah, so the good old turn it off and on again saves the day. All right, excellent. So with that I think we're almost done actually we just have one more thing and that's this not found page. And so I'm going to go ahead and just so you all know because again I'm never going to memorize this and I don't expect any of you to ever.

[00:10:25]
So you know, we look for the docs. That's what the docs are for. We are going to search for what they call this is like a catch all. So you see here catchall not found 404 route. And so the way this works is you actually do a behind the path.

[00:10:44]
So if you think about It From a JavaScript perspective, it is essentially a spread operator saying whatever the heck the path is, if you can match this at the very, very end, then go to this thing. And so in our case, so if we look at our routes and then I go ahead and delete this last one, now it's reloaded.

[00:11:06]
If I go to my route and this time, I'm going to say something funny, nothing shows up. This makes sense because now there's no catch all. So let's try this again. Not found. Move it in. And again we want it to be. So, if you think about a catch all, again it's that asterisk concept.

[00:11:25]
It's a dynamic property path. It's really what we're doing. All right, it's reloaded, typed router think, it already did it for me. Hot module reloading. And that's how you'll catch any routes that haven't that are unable to be matched. And actually, I guess, you know, if you want to talk about final reroute route things, since we know for a fact that, at least for now, again, I can always recreate this whenever I want.

[00:11:52]
This is effectively empty because at this point, I don't foresee a world where I need to manually configure a route. So I can delete the routes file. I can delete this import. To be honest, I don't mind calling it Auto Routes. It's kind of explicit. So this is fine.

[00:12:09]
But obviously if you want to just be even more succinct, you can just do this. This is fine. That is a full refactor.
>> Speaker 3: You didn't have to then update any if you've got router pushes anywhere.
>> Ben Hong: Nope. Isn't that so great?
>> Speaker 3: It's amazing.
>> Ben Hong: It's such a nice developer experience for me.

[00:12:33]
Whenever I'm on a project without it, I'm like, I have to type the object. I got to type and then I got to configure it. Just makes it so much more fun to just try stuff out. And I feel like that's what a lot of development is, creating a faster feedback cycle so that we can try more things.

[00:12:50]
The more feedback loops we have, the more we can iterate and do cool.