DEV Community 👩‍💻👨‍💻

Cover image for Become a coding Adonis with AdonisJs
Cullen Kirkpatrick
Cullen Kirkpatrick

Posted on

Become a coding Adonis with AdonisJs

A few months back while I was scouring the web for some new tech to check out, I stumbled upon a Node.js framework called AdonisJs. Most of my development experience comes in the form of JS/TS so I was instantly interested in what Adonis could bring to the table. Putting it simply, Adonis is an emerging Nodejs framework that puts stability at the forefront. Similar to Nest.js and other Node frameworks, it aims to enhance experience and simplify development. A few key takeaways and differentiators with Adonis is that it does not have anywhere close to the amount of overhead code that Nest.js does. Adonis manages to still provide a lot of simplified functionality to help streamline development of API's and server-side logic despite being leaner than most other frameworks. After a few days of hacking around with it I was hooked and am already using it on some of my newer projects. Let's dive in and check out how to get up and running with Adonis!

Getting Started

If you're familiar with Node and JavaScript, getting Adonis up and running will be a breeze.

Step 1. First thing we'll do is download the Adonis CLI (cause everyone needs to have a CLI tool).

  npm i -g @adonisjs/cli
Enter fullscreen mode Exit fullscreen mode

Step 2. Next, we'll create our project. This creates the project in your current working directory, so make sure to navigate to the desired location.

  adonis new hello-adonis
Enter fullscreen mode Exit fullscreen mode

We used "hello-adonis" as our project name here, but you can replace it with whatever you want to call the project.

Step 3. Now we're ready to start up the server.

  adonis serve --dev
Enter fullscreen mode Exit fullscreen mode

Boom, we've got an Adonis project up and running! Just navigate over to localhost:3333 in your browser to see your project in action.

I definitely encourage you to poke around the code, and check out what comes out of the box with your project.

Building your first API endpoint.

This is where the magic really starts to happen and where I was really sold on the whole Adonis thing. Stick with me here.

Step 4. Let's create a resource.

Let's create our first real resource by opening up the start/routes.js file of our project. You'll see an existing route in there that serves up the welcome page, feel free to leave that in there and add this line below it.

Route.resource('developers', 'DeveloperController').formats(['json'])
Enter fullscreen mode Exit fullscreen mode

This single line handles the logic for up to 8 DIFFERENT ENDPOITNS!! Possible endpoints include GET, POST, PUT, PATCH, DELETE, as well as endpoints like GET by ID endpoint (/:id). Pretty rad, right?!

Step 5. Create a Controller for our new resource.

Using the Route.resource method automagically maps the respective HTTP verbs to named functions within your controller, so make sure you're following along closely here!

To create the new controller where we'll put our logic, run this command from the root of the project.

adonis make:controller Developer --type http
Enter fullscreen mode Exit fullscreen mode

We can accomplish the same thing by manually creating a file, but this does a little scaffolding for us to make our lives easier.

You should now have the file app/Controllers/Http/DeveloperController.js

Step 6. Add some logic to an endpoint.

For the sake of brevity, we're just going to have our endpoint return a static JSON response. Once you're familiar with the basics, I definitely encourage you to check out the Database section of the Adonis docs to see how you can pull actual data.

In our new DeveloperController.js file, lets add some code inside the class to bring it to life.

// DeveloperController.js
...
class DeveloperController {
  async index ({ request, response, params }) {
    return { status: 'GREAT SUCCESS!' };
  }
}
...
Enter fullscreen mode Exit fullscreen mode

The index function will automagically be referenced by the GET /developers endpoint behind the scenes. This can seem a little weird at first, but trust me, it grows on you. To check out the other functions that are linked to the resource, head over to the Adonis Routing Docs.

Sit back and admire your awesome API.

You can now test you new API by navigating to localhost:3333/developers in your browser.

You should see the [{ status: 'GREAT SUCCESS!' }] response that we set as the return value.

Sit Back

Summary

I hope this quick tutorial helps show how easy getting an API up and running can be with AdonisJs. For more info on the topics we covered, head over to the Adonis Docs. They're a currently in beta for v5.0, which I'm sure will be packed with even more awesome features.

Share your thoughts and feedback in the comments. I'd love to hear about other's experience with Adonis or other Node frameworks!

HAPPY CODING!!

I'm in no way affiliated with the AdonisJs company, so all opinions expressed in this post are based solely on my experience with the framework.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await