File-Based Routing

[00:00:00]
>> Ben Hong: And so we're gonna do a little dive into routing. Who here has heard of file based routing? Okay, so looks like some people here know, which is good. And so this technique I think is starting to take the community by storm because as we'll see, it helps to.

[00:00:14]
I mean I think a lot of development framework work is around making our developer experience as best as we can and simplifying the boilerplate that we have to do. So for those who don't know, let's take a look at what we have to start. So for those, you should already be familiar with Vue Router and the fact that with Vue Router we have all our pages in the Vue's folder, typically speaking.

[00:00:38]
And then we configure everything inside of our router inside of here, inside of a thing called routes and we define all these paths and we just find the component that go to it and it's a decent amount of work. Now file based routing is interesting because what it says is, all right, this is standard stuff, right?

[00:01:01]
When a user visits a site, we know when they're on a website that they're, that's actually really small, just do it here. When they're on a website they're going to say our domain.com/ and then it's usually some sort of about or product and then the ID and then maybe product detail, something like this.

[00:01:23]
If you look at this, this actually looks really, really similar to how files and directories work. So a pattern came out where basically they were like if this is what we want anyways, why bother with at least out of the box with most case scenario? Why are we bothering with all this configuration when we can just do it via file based routing.

[00:01:44]
So, the way this is gonna work is I have installed, so I took care of some of the setup already. And part of the reason I did this is because I do think the configuration is not something I want to harp on. And so what we're gonna be talking about here though, so I will bring this up so that people do know about this, Unplugin Vue Router.

[00:02:02]
So as to all next generation tech, this is like the future of routing. And so here you can see how to set it up on your own project. But I basically done most of this for you. And so what we're gonna do here is I want to show you I'm gonna progressively kind of start migrating some of it and then you all can get a little bit of hands on experience with it as well to kind of see what it's like.

[00:02:26]
So first thing first, let's see. I think everything should be ready to go. Let me just double check real quick. There's VueRouter, excellent. And then, okay, so the way this works is I guess you can assume everyone's background with web here, but when you visit a website like domain.com like this, just here.

[00:02:47]
For those of us who come back from the FTV days and we understand how this stuff works, what you don't know is what you're actually hitting is index.html. And so similarly if we go to domain.com/product, right, and then you have a bunch of products that are on the page, you're really hitting product.index.html.

[00:03:10]
The reason this is useful context is because you're gonna need to know this when you're doing the file based routing because you're basically gonna be calling these files index.vue and so forth. So what we do is here is we're gonna create a folder here called pages rather than Vues.

[00:03:24]
And so to show that this works, I'm gonna go ahead and first move the homepage inside of here. This is gonna break a bunch of stuff because this no longer exists. I'm gonna delete this route. Then what we need to do is inside of this, I need to import routes and this thing called handle hot updates.

[00:03:46]
I'll explain in a second from vue-router / auto-routes. So this is like a package within it. Now we have a naming collision here. So we're gonna use our handy little renaming here. So I'm gonna call this autoRoutes because that's what's happening, they're being auto-generated. And then, oop, what we're gonna do here is that the routes, we're gonna merge them.

[00:04:06]
We're gonna say first go ahead and do all your routes or actually we're gonna do auto routes first. Then we're gonna merge that with the routes that we manually wrote ourselves here. So that's what's happening there. So these two are being spread across the same object and then this is just a configuration thing.

[00:04:22]
But basically this will allow us when we're doing hot module reloading so that the router actually is generating the right thing. So, is it hot updates? Hot update, there you go. Okay, perfect. Now if this works as intended. Yep, reloaded localhost5173. Okay, beautiful, it's broken, that's good. What we did is we said, hey, our pages, our route, if you notice, it's called homepage, not index but if we go to homepage like this now, all of a sudden everything shows up.

[00:05:02]
So just to demo this, I'm gonna switch this now back to index.vue, you're gonna see it's gonna generate and then if we now homepage can't be found. If we go to the homepage now, voila. Now it's the homepage. What's cool is that you didn't see it here, but this file here is actually being generated for you this whole time.

[00:05:24]
To be clear, do not modify this file, big warning that I could tell or do I need to be bigger than that [LAUGH]? But you can see here it's actually generating typed routes so that when you're actually equating stuff, it'll actually do some records auto completes. Don't ask me to explain how the typescript works.

[00:05:38]
Just know that it's supposed to be type safe. That's an advantage you get with this. And so then I'm gonna go ahead and just do one more for example, so we mentioned like a task detail page, right? So a task detail page, this is the funny thing about the task detail page is that I actually without looking at the routes, it's hard to intuit what exactly you intended with that.

[00:06:02]
And so I have to kind of come back in here. I mean, look at this for example, TaskDetailsPage is under task/ and then a dynamic parameter of id, whereas weak, let's see, is it WeekDetailPage? WeekDetailPage is actually under planner weekid, right? And so this is actually kind of an interesting byproduct of doing it.

[00:06:21]
The file based routing way is that your components actually get pretty declarative and you understand where they're supposed to be and what they intend to do. And so the way this particular works, I'm gonna do the task one. So I'm gonna go ahead, let's see, I'm gonna move the task panel page.

[00:06:35]
Wait, that's the wrong one. Task page in here? Yes, just move. And then, so task page is gone. Then I'm gonna do the task detail page in here. That's gonna be gone now. And then to finalize this, we're gonna go ahead and we're gonna create a tasks folder cuz that's the route we wanted.

[00:06:56]
And then we'll drop a detail page in there. And then the convention we're looking for here to tell you all that is the square brackets inside of your file name basically mark the fact that it's a dynamic parameter. And so if you did something like this, by the way.

[00:07:13]
The task would be static, like the task dash. And then whatever is appended is basically the parameter. So there's that, and then task page, I'm just gonna put inside of here as index, oops, not vuex, okay? And then I think, okay, great. Don't save. Okay, let's see. Refresh routes.

[00:07:49]
Planners, correct. Nope, that's good. Planner, wait, Planner.
>> Speaker 2: Yeah, it somehow updated that.
>> Ben Hong: Yeah, that's weird. Okay, so that should be this. That looks good, I think. Okay, why is it unhappy? Routes.ts. Okay, yeah, yeah, yeah, I hear you. Yes, good, planner page, do, do, do, do do.

[00:08:24]
Planner page view. No, it somehow updated my directory path. It should be views, views, views.
>> Speaker 3: No, tasks.
>> Ben Hong: Tasks.
>> Speaker 4: [CROSSTALK] just views.
>> Ben Hong: You're right, thank you.
>> Ben Hong: Hey, beautiful. Okay, so now you can see, so if I go to tasks. What just happened? I know what just happened.

[00:08:54]
We go to the task index page. I believe that the imports mess up. No, they're good.
>> Speaker 3: Your task list filter.
>> Ben Hong: Yeah, looks like the task list filter tasks. Yeah, yeah, yeah, I did this experiment and then I never fixed it. Store.task list tasks, there you go.

[00:09:21]
Okay, refresh, aha, here we go. Okay, and then you see here, boom, task one is the id. So everything works. And what's great now is that whereas in the past, remember, I was like, I need to create a sandbox page and I have to configure a bunch of stuff.

[00:09:36]
Now it can be like, I don't know, someone shout out a page name for me.
>> Speaker 3: Sandbox.
>> Ben Hong: All right, Sandbox, although, do we have one already? I think we have one. I'll call it playground, playground.vue. Yay, playground. Playground, done. All that boilerplate gone. I don't have to deal with it anymore [LAUGH].

[00:10:04]
I love it. These are the things that make me happy [LAUGH].