So we don't have a whole lot of routes that we're working with inside of this application, but let's say that we did. Let's say that we had a long laundry list of routes to find.

How can we go about splitting them up into separate files based off of their separate groupings so that they're a little bit easier to sift through? Well, to start, let's identify what those groupings are.

First, we have the very specific route group right here that requires authentication for all of the routes inside of it. That's one file that we could extract out into.

Then we also have this group right here that's specific to our authentication-based routes. So that's another file that we can split these into. Now, in order for our routes to work,

all AdonisJS needs is for the route definitions themselves to run during the boot process of our application, which is what preload files are specifically for.

This routes.ts file that we're already working with, if we jump into our adonisrc.ts file and jump down into the preload section, the routes file is already defined here as a preload file.

So as AdonisJS boots our application, these preloads are going to run, and that's where our route definitions are then defined. So all we need is for these route definitions to run

either inside of this routes.ts file or any other preload file that we wish. So if we wanted to, we could, inside of our start directory, create a new folder and call this routes.

And then inside of this routes folder, we can create two new files. So new file, we'll call this one auth.ts, and then we'll do another new file and call this web.ts.

We can take our routes.ts and split it up now, cutting the auth specific routes out and plopping those into our auth.ts. And then we can cut our entire web-based group out

and plop that inside of our web.ts. We have a number of imports that are missing for each of these. I am going to scroll up now. Let's copy our login logout controller import,

paste that inside of our auth.ts, just like so. And then we can do command dot on router and add all missing imports. And let's do the exact same now for our web route. So we'll copy the remainder of our controllers

from there, paste it into the top of our web.ts, go down to one of our router Red Squigleys, command dot and add all missing imports. The reason why I copied the controller imports

is because these are lazily imported, which we do need to use in order for hot module reloading to work. In order for it to pick up any changes, it needs those imports to be lazily imported.

And whoop, okay, it imported the router from Inertia Vue 3. Let me go ahead and do command dot to make sure that it grabs the one from AdonisJS. Hit save on that so that we get reformatted.

And okay, everything in that one's happy. We can jump over here. Did the same thing for me on the router. I'm just gonna go ahead and re-import that, making sure that it uses the one from AdonisJS there. In order for these two separate route files to now be picked up,

we need to jump back into our routes.ts and get rid of all of these unused imports and just add in new imports, importing first our auth routes.

So we'll jump to our routes auth.js there. And then next we'll import dot slash routes and our web.js file. At the end of the day, these two files are still being imported

inside of our routes.ts, which is registered as a preload inside of our application. So all of these route definitions are still gonna run the same as they used to. Meaning that we should now be able to jump back into our browser.

Let's give it a refresh. And there we go. Everything's still working there A-okay. I can go ahead and log out. And there we go. Our auth routes are still working here too. Cool.

Let's take a look at a different approach to get the same result. So let's say that we didn't wanna import these two routes inside of a parent file, but rather just have them preload themselves

automatically without the need for this additional file. We can jump into our donusrc.ts file. We can add an additional preload imports.

So we'll add in an import for our start routes auth file, and then add in another one for our start routes web file,

making this file pretty much obsolete for us so we can get rid of it altogether. Now that it's no longer being used, we can go ahead and right click and delete and move it to the trash.

Meaning now all of our routes are defined inside of our routes folder. So we should be able to jump back into our browser now. We can give it a refresh and voila, everything's still working perfectly fine.

Let's go ahead and bring that file back real quick. So let's undo what we just did. I'm gonna click on the start folder here, hit command Z to bring that file back and then come back into our document

and just go back a couple of steps there using command Z some more. So now we're back to using our start routes file, this one right here. And let's say that we had specific ordering

that we needed these routes to go into. Inside of each of these files, rather than just having the route definitions off of the root, we can instead cut them out

and export function defineAuthRoutes and paste those route definitions in. Give it a save so that it formats. And what this allows us to do

is defer the execution of these actual route definitions until we've called this function. They're no longer going to be executed immediately whenever we import, but rather our import is now named.

So we have a defineAuthRoutes function being extracted from this import. And we can now call that, so defineAuthRoutes right down there.

Meaning that now our web routes are defined before our auth routes. So if we give this a save at the moment, let's jump back into our browser, make sure that our login page is still visible.

And sure enough, it is. Okay, one more test. Let's jump back into our text editor, jump into our web.ts file, and let's overwrite that get. So if we do router.get/login,

and I'm going to add in an optional parameter here so that we don't get a duplicate route definition error. Add in async, and then just return back login has been replaced.

Now, if we jump back into our browser, you'll see login has been replaced rather than our login page. We didn't change the login page route definition at all. We've just now added a route before it.

And this login route has precedence over our previous login route because AdonisJS finds the first match and uses that one for the request. Jumping back into our routes.ts,

the one in our web file matches first because these files are imported and immediately executed on that import. And our auth files are not defined

until way after where we call this function. So I'm sure there's additional ways, but there's three different ways that you can extract your route definitions out into separate files if you so wish.