Unread Notifications

Latest Notifications

No Notifications

You're all set! Start a discussion by leaving a comment on a lesson or replying to an existing comment.

Let's Learn AdonisJS 5

Moving & Organizing Routes

4 MIN READ
10 months ago

In this lesson, we'll cover various different ways you can structure your routes within your Adonis project, including moving the routes.ts file, and using a module approach

Watch on YouTube

Although Adonis starts our route definitions within our start directory within routes.ts, in actuality, it really doesn't care where our routes reside so long as we inform it where they're defined. In this lesson, we're going to cover a few options you have when it comes to structuring your route definitions.

As we go through this lesson it's important to remember that keeping all your route definitions within the default routes.ts file is perfectly valid. In fact, that's what I do for most of my projects.

Routes Directory

One option we have is to group routes by topic and place them inside route-specific files inside a routes directory.

So, for a blog, we could have the following files within our routes directory.

  • /start/routes/auth.ts for all authentication routes

  • /start/routes/posts.ts for all post routes

  • /start/routes/topics.ts for all topic routes

We'd define the routes within these files the exact same as we would within our routes.ts file.

// start/routes/posts.ts

import Route from '@ioc:Adonis/Core/Route'

Route.get('posts', async ({ view }) => {
  const posts = [
    { title: 'Post 1', body: '...' },
    { title: 'Post 2', body: '...' }
  ]

  return view.render('posts/index')
})

Then, in order to inform Adonis about the routes defined within these files we'd just import them within our routes.ts file.

// start/routes.ts

import './routes/auth'
import './routes/posts'
import './routes/topics'

With that, all should be working! Of course, since we're importing them within routes.ts this means you can really organize them any way you wish so long as they're imported here.

App Modules

Another option we have is to create a Modules directory within our app directory. Then, inside this Modules directory, we'd create another directory for each topic we need for our application. So continuing with our blog example, we could have a structure like the below.

  • app/Modules/Auth/routes.ts for all authentication routes

  • app/Modules/Post/routes.ts for all post routes

  • app/Modules/Topic/routes.ts for all topic routes

Then, just the same as our previous example, you'd define your routes within their respective topic directory.

// app/Modules/Post/routes.ts

import Route from '@ioc:Adonis/Core/Route'

Route.get('posts', async ({ view }) => {
  const posts = [
    { title: 'Post 1', body: '...' },
    { title: 'Post 2', body: '...' }
  ]

  return view.render('posts/index')
})

Lastly, import the module's route file within your routes.ts file.

// start/routes.ts

import 'App/Modules/Auth/routes'
import 'App/Modules/Post/routes'
import 'App/Modules/Topic/routes'

The premise of this approach is that now we have a dedicated place within our project to put all things related to our topic. Some folks prefer this structure over the standard structure.

So, we haven't covered controllers, services, or events yet but you could place a file for each of these within your topic as well.

// Module / Topic Group Approach

app/
├─ Modules/
│  ├─ Auth/
│  │  ├─ controller.ts
│  │  ├─ events.ts
│  │  ├─ routes.ts
│  │  ├─ service.ts
│  ├─ Post/
│  │  ├─ controller.ts
│  │  ├─ events.ts
│  │  ├─ routes.ts
│  │  ├─ service.ts
│  ├─ Topic/
│  │  ├─ controller.ts
│  │  ├─ events.ts
│  │  ├─ routes.ts
│  │  ├─ service.ts
start/
├─ events.ts
├─ routes.ts

// Standard File-Type Approach

app/
├─ Controllers/
│  ├─ Http/
│  │  ├─ AuthController.ts
│  │  ├─ PostsController.ts
│  │  ├─ TopicsController.ts
├─ Services/
│  │  ├─ AuthService.ts
│  │  ├─ PostService.ts
│  │  ├─ TopicService.ts
│  │  ├─ service.ts
start/
├─ events.ts
├─ routes.ts

Move Routes Out Of Start

The last approach we'll be covering is how we can move our routes.ts outside of our start directory and place it anywhere we'd like. So, let's say we wanted to move our routes from /start/routes.ts to the root of our project at /routes.ts.

First, we'd go ahead and move the file form /start/routes.ts to /routes.ts so the file is directly off the root of our project (or move it to wherever you'd like). Next, we need to update the route path within our .adonisrc.json file to inform Adonis about the new location.

So, our routes are defined within the preloads array, you should see an item with the following value "./start/routes". All we need to do is update this to our new routes.ts file location, so to move it to the project root we'd update this to "./routes".

Next Up

We've covered a couple of ways we can go about organizing our route files within our application structure. In the next lesson, we'll be covering how we can organize our route definitions inside their respective file, using groups, to cut back on redundancies.

Comment

Prepared By

Tom Gobich

Burlington, KY

Owner of Adocasts, JavaScript developer, educator, PlayStation gamer, burrito eater.

Visit Website