Cleaning Up Routes with Controllers

Hi Jean!

The standard import for controllers will work just fine, for example

import MoviesController from '#controllers/movies_controller'

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

However, mine changed to lazy style imports on save within the video due to the ESLint I set up and configured code actions for within VS Code in lesson 1.4 of this series.

Below is an example of the ESLint rule error that's auto-fixed by my code action configuration when I save my routes.ts file.

ESLint is completely optional! It essentially is a style guide for your code, and anything not matching the style guide will display an ESLint error.

If you'd like to use it, you can install the ESLint extension within VS Code. Then, you can have it auto-fix ESLint errors by adding the below within your VS Code settings.json

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"
} 

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Hey frp! When a route calls a controller's method as its handler the HttpContext is automatically provided as their first parameter, so you shouldn't need to inject the context into a controller.

That said, somewhere Harminder Virk explained this well, but I can't seem to find it. The error though is because the HttpContext can't be bound in this context. If you were to bind it to a service, and then bind the service to your controller, all would work.

export default class MoviesController {
  async index(ctx: HttpContext) { // <--
    return ctx.view.render('pages/home')
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Here's an example of binding the HttpContext to a service and then the service to a controller.

import { HttpContext } from '@adonisjs/core/http'
import { inject } from '@adonisjs/core'

@inject()
export default class MovieService {
  constructor(public ctx: HttpContext) {}
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
app
services
movie_service.ts

import type { HttpContext } from '@adonisjs/core/http'
import Movie from '#models/movie'
import { inject } from '@adonisjs/core'
import MovieService from '../services/movie_service.js'

@inject()
export default class MoviesController {
  constructor(protected movieService: MovieService) {}

  async index({ request, view }: HttpContext) {
    console.log(request.url())
    console.log(this.movieService.ctx.request.url())
    return view.render('pages/home')
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
app
controllers
movies_controller.ts

Hi Gabriel! Unfortunately, there isn't a straightforward answer here with the given information. Are your API requests being sent from inside your application or via a REST client? It sounds like your application works a-okay, your environment is just having issues connecting to it. This could be due to firewall settings or even WSL vs Non-WSL, if you're on Windows. Or, you may just need to use 0.0.0.0 instead of localhost if you're using a REST client.