00:02
So we don't have a whole lot of routes
00:06
that we're working with inside of this application,
00:08
but let's say that we did.
00:09
Let's say that we had a long laundry list of routes to find.
00:12
How can we go about splitting them up into separate files
00:15
based off of their separate groupings
00:17
so that they're a little bit easier to sift through?
00:19
Well, to start, let's identify what those groupings are.
00:21
First, we have the very specific route group right here
00:24
that requires authentication
00:26
for all of the routes inside of it.
00:27
That's one file that we could extract out into.
00:30
Then we also have this group right here
00:32
that's specific to our authentication-based routes.
00:34
So that's another file that we can split these into.
00:36
Now, in order for our routes to work,
00:38
all AdonisJS needs is for the route definitions themselves
00:41
to run during the boot process of our application,
00:44
which is what preload files are specifically for.
00:46
This routes.ts file that we're already working with,
00:49
if we jump into our adonisrc.ts file
00:51
and jump down into the preload section,
00:53
the routes file is already defined here as a preload file.
00:56
So as AdonisJS boots our application,
00:59
these preloads are going to run,
01:00
and that's where our route definitions are then defined.
01:03
So all we need is for these route definitions to run
01:06
either inside of this routes.ts file
01:08
or any other preload file that we wish.
01:10
So if we wanted to,
01:12
we could, inside of our start directory,
01:13
create a new folder and call this routes.
01:15
And then inside of this routes folder,
01:17
we can create two new files.
01:18
So new file, we'll call this one auth.ts,
01:20
and then we'll do another new file and call this web.ts.
01:24
We can take our routes.ts and split it up now,
01:27
cutting the auth specific routes out
01:29
and plopping those into our auth.ts.
01:31
And then we can cut our entire web-based group out
01:34
and plop that inside of our web.ts.
01:37
We have a number of imports
01:38
that are missing for each of these.
01:39
I am going to scroll up now.
01:41
Let's copy our login logout controller import,
01:44
paste that inside of our auth.ts, just like so.
01:46
And then we can do command dot on router
01:48
and add all missing imports.
01:50
And let's do the exact same now for our web route.
01:52
So we'll copy the remainder of our controllers
01:54
from there, paste it into the top of our web.ts,
01:57
go down to one of our router Red Squigleys,
01:59
command dot and add all missing imports.
02:01
The reason why I copied the controller imports
02:04
is because these are lazily imported,
02:06
which we do need to use
02:07
in order for hot module reloading to work.
02:09
In order for it to pick up any changes,
02:11
it needs those imports to be lazily imported.
02:13
And whoop, okay, it imported the router
02:15
from Inertia Vue 3.
02:16
Let me go ahead and do command dot
02:18
to make sure that it grabs the one from AdonisJS.
02:20
Hit save on that so that we get reformatted.
02:23
And okay, everything in that one's happy.
02:24
We can jump over here.
02:25
Did the same thing for me on the router.
02:27
I'm just gonna go ahead and re-import that,
02:29
making sure that it uses the one from AdonisJS there.
02:31
In order for these two separate route files
02:32
to now be picked up,
02:33
we need to jump back into our routes.ts
02:35
and get rid of all of these unused imports
02:37
and just add in new imports,
02:39
importing first our auth routes.
02:42
So we'll jump to our routes auth.js there.
02:44
And then next we'll import dot slash routes
02:47
and our web.js file.
02:49
At the end of the day,
02:50
these two files are still being imported
02:51
inside of our routes.ts,
02:53
which is registered as a preload
02:55
inside of our application.
02:55
So all of these route definitions
02:57
are still gonna run the same as they used to.
02:59
Meaning that we should now be able
03:00
to jump back into our browser.
03:01
Let's give it a refresh.
03:03
And there we go.
03:03
Everything's still working there A-okay.
03:05
I can go ahead and log out.
03:07
And there we go.
03:08
Our auth routes are still working here too.
03:09
Cool.
03:10
Let's take a look at a different approach
03:12
to get the same result.
03:13
So let's say that we didn't wanna import
03:15
these two routes inside of a parent file,
03:17
but rather just have them preload themselves
03:18
automatically without the need for this additional file.
03:21
We can jump into our donusrc.ts file.
03:23
We can add an additional preload imports.
03:25
So we'll add in an import for our start routes auth file,
03:29
and then add in another one for our start routes web file,
03:34
making this file pretty much obsolete for us
03:37
so we can get rid of it altogether.
03:38
Now that it's no longer being used,
03:40
we can go ahead and right click and delete
03:43
and move it to the trash.
03:44
Meaning now all of our routes are defined
03:46
inside of our routes folder.
03:47
So we should be able to jump back into our browser now.
03:50
We can give it a refresh and voila,
03:52
everything's still working perfectly fine.
03:53
Let's go ahead and bring that file back real quick.
03:56
So let's undo what we just did.
03:57
I'm gonna click on the start folder here,
03:59
hit command Z to bring that file back
04:01
and then come back into our document
04:03
and just go back a couple of steps there
04:05
using command Z some more.
04:07
So now we're back to using our start routes file,
04:09
this one right here.
04:10
And let's say that we had specific ordering
04:12
that we needed these routes to go into.
04:14
Inside of each of these files,
04:15
rather than just having the route definitions
04:17
off of the root,
04:17
we can instead cut them out
04:19
and export function defineAuthRoutes
04:23
and paste those route definitions in.
04:25
Give it a save so that it formats.
04:26
And what this allows us to do
04:28
is defer the execution of these actual route definitions
04:30
until we've called this function.
04:32
They're no longer going to be executed immediately
04:34
whenever we import,
04:35
but rather our import is now named.
04:37
So we have a defineAuthRoutes function
04:41
being extracted from this import.
04:43
And we can now call that,
04:44
so defineAuthRoutes right down there.
04:46
Meaning that now our web routes
04:48
are defined before our auth routes.
04:50
So if we give this a save at the moment,
04:53
let's jump back into our browser,
04:54
make sure that our login page is still visible.
04:56
And sure enough, it is.
04:57
Okay, one more test.
04:58
Let's jump back into our text editor,
04:59
jump into our web.ts file,
05:01
and let's overwrite that get.
05:03
So if we do router.get/login,
05:06
and I'm going to add in an optional parameter here
05:08
so that we don't get a duplicate route definition error.
05:10
Add in async,
05:11
and then just return back login has been replaced.
05:15
Now, if we jump back into our browser,
05:17
you'll see login has been replaced
05:19
rather than our login page.
05:21
We didn't change the login page route definition at all.
05:23
We've just now added a route before it.
05:25
And this login route has precedence
05:27
over our previous login route
05:29
because AdonisJS finds the first match
05:31
and uses that one for the request.
05:33
Jumping back into our routes.ts,
05:34
the one in our web file matches first
05:36
because these files are imported
05:39
and immediately executed on that import.
05:41
And our auth files are not defined
05:43
until way after where we call this function.
05:45
So I'm sure there's additional ways,
05:46
but there's three different ways
05:47
that you can extract your route definitions out
05:49
into separate files if you so wish.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!