Discover AdonisJS (MVC framework for Node)

Follow me on Twitter: Follow @justericchapman

What is AdonisJS?

In summary, this is the Node.js version of PHP Laravel. AdonisJS is a framework that contrasts with other Node.js frameworks. AdonisJS is a batteries included framework that is highly focused on developer ergonomics, stability and speed.

In this series we will discover AdonisJS by creating a first web app step by step.

Requirement

To create a Adonis project the only requirement is to have Node.js install on your machine. Since Node is use a lot in dev world, good chance you already have it.

Type this command in the terminal to check your installed Node version:

node --version

If version >= 12.0.0 you are ok. If not go to nodejs.org and install the last version. (https://nodejs.org/en/download/)

Create your first Adonis Project!

To create a new Adonis web app we run in the terminal:

npm init adonis-ts-app blog

Once the project is created. Follow the on screen instruction:

cd blog
node ace serve --watch

This last command will start the server on http://127.0.0.1:3333 and watch and refresh if any change.

You can then open your browser to the specified address:

Now let's take a look at the created project. Open the newly created folder with your favorite code editor.

Project scaffolding

Adonis is a batteries included framework that is made to save you time. The framework create for you the project structure and boiler plate code that allow you to save ton of times doing it by yourself.

We now have only to concentrate on the fun part... Start coding our solution :-)

Since it's your first time with Adonis we will discover together the folder structure:

The list could look overwhelming but don't be afraid it is way more simple than it look at first sight. Here a list of main folder location:

Your First Step into Adonis

When we first open the new app in our browser the framework show us a default welcome page:

How does the framework show that page? How can I replace that page with my custom page?

First let's find how that default page is display.

When searching for a specific page, it's a good idea to start in the routes file. So open your app routes file located in start/routes.ts

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

Route.on('/').render('welcome')

That code is a good AdonisJS code example: simple and clean.
So when the browser hit root path '/' render the 'welcome' view.

If we look into the view folder (under resources/views) we would see a file name welcome.edge:

This file is an Edge Template. Edge is the powerful templating engine use by Adonis to render views.

You can change whatever you want on the page and your modifications will be render to the browser. (If your server is still running)

Create our own page with data

That welcome page is cute but a real web app will often have data query from a database and render on a page. Let's do that step by step.

First to use a database we need to install the Adonis database module.

Install Adonis database module

Installing that module is easy. Here the CLI commands to install and run first config:

npm i @adonisjs/lucid@alpha
node ace invoke @adonisjs/lucid

The invoke command will ask for the Database type. For this project choose SQLite.

Project CLI commands

Adonis is allergic to boiler plate. Creating base config for a new element can be time consuming (and boring).

That why Adonis have a CLI tool call ace. ace CLI will scaffold element for you. For example if we want to create a migrations there is a command for that. Same for models and controller.

Here a list of main CLI commands:

We will use those commands to create our database model.

End of part 1, tomorrow part 2

That's it for today. Stay tune for part 2 tomorrow. We will create our database and query data to a page view.

The best way to miss nothing is to follow me on Twitter: Follow @justericchapman