Adonis JS is another framework that we will deal with this week. This is now in version 5.0.
Basics
AdonisJS was started in 2015 as an Open Source project and was intended to serve as an alternative framework for the Node.js ecosystem. The advantage of Adonis is that it brings various basic functions with it. Therefore, you do not have to use different libraries to use these functions.
This includes, for example, an SQL ORM, including Query Builder, migrations and models. Also included are different HTTP Routing features, form validation, and Health Checks modules, which can be used with Kubernetes.
Project structure
With the introduction of version 5.0, new projects are now created directly via npm init
or yarn create
. The use of TypeScript is also new.
When creating a new project, you have the option of choosing between the two project structures API Server or Web Application. If you opt for a full-fledged server-side web application, an AdonisJS template engine, the session module and the module for web security & CSRF protection are also installed in addition to the core functions.
However, if you decide to use the API server, only the most essential things that are required for a JSON API server are installed here.
Authentication
An authentication system is provided to you directly via the Adonis Framework. This enables you to protect your web application without great effort in combination with a database. The focus here is not on styling, but Adonis would like to make this function available to other systems via the various APIs.
Databases
AdonisJS is one of the few frameworks that provides direct support for SQL databases. A wide variety of tools are made available via the database layer Lucid in order to create data-based applications quickly and easily.
Query Builder
With the help of the API, simple queries and complex join queries can be created quickly and easily.
|
|
Data Models
Data models each represent a table in a database, this makes it easier for you to use data from them. For example, if you have a User table, create a model with the same name. This allows you to use the table directly in your code, as you can see in the example below. This also makes your application a lot clearer.
|
|
Schema migrations
Schema migrations are fundamentally there so that you can create and edit database tables. The great advantage of doing this via the program code is, among other things, that you can also bind the changes to deployment workflows and thus save yourself manual adjustments.
Seeds & Factories
During the development of your application you usually have the problem that you need sample data.
This can be awkward depending on how you handle this.
With Seeds
& Factories
you can simplify this process. A seeder is used to fill the database with the data that you have specified manually or with data that you have automatically generated via a Factorie
.
Views & Templates
In this framework, Edge is used as the template engine. Like most engines, it supports things like: conditionals, loops, components, runtime debugging and stack traces.
preparation
To use Adonis JS version 5.0 you need:
-
Node.js> = 14.5.0
-
npm> = 6.0.0
PostgresSQL DB
To be able to carry out this tutorial you first need a PostgreSQL DB. If you have not yet installed Postgres, you can do this using, for example, brew
if you are using a Mac.
|
|
Once the installation is complete, you can verify this using the command postgres -V
from the terminal
To be able to continue now you have to start the PostgreSQL service.
|
|
You should then create a new user with restricted rights. To do this, first connect to the postgres
DB.
Then you can execute the Create command and decide on a user name and a desired password.
You will need this access data later within the web application. When you have executed the command, you can display all users with \du
and thus check whether your newly created user is there.
|
|
Now that you have a new user, you can log in with the user and create the DB that you will need later for the DB entries.
|
|
You can then display all databases with \l. Now you can also log out with \q and log in to your new DB.
|
|
With \dt you can also display all schemas, this will help you later to check whether all data was created correctly.
The application
The setup
To create a new project, you have to enter the following command via the terminal. The last parameter determines the name.
|
|
As soon as you have executed this command, you have to decide between the two project structures API Server and Web Application. In our tutorial we will create a web application. You can also change the project name again in this step and decide whether the setup for ESLit and Prettier should be carried out. The installation of the dependencies then starts.
Now you can switch to the directory of your app and open VS Code with code .
.
The use of the database
As you have already seen in the preparation, a PostgreSQL database is used for the todo list in this tutorial. Therefore, you now have to install Lucid via the terminal.
|
|
Once this is done, the setup for Lucid still needs to be done. You have the option of selecting your desired DB (PostgreSQL). You start this process with the following command:
|
|
This will create the default configuration files and register @adonisjs/lucid
within the providers
array.
In addition, you have to add the following variables to the env.ts
file in this step:
|
|
Another adjustment must be made in the file .env
so that your web application can or can access the DB.
|
|
In order to really be able to use the database with Node, it is necessary to install the appropriate driver.
|
|
Migration
Next, you’ll create the schema for the tables you want for your database. Since this app is a todo list, a table is definitely required for the todo entries. You can have the file for this created via node and then add the desired attributes.
|
|
If this worked you will get the message:
|
|
We complete the function up
with the attributes content
and complete
:
|
|
Before you can actually carry out the migration, the project must first be rebuilt. You can do this by starting the server:
|
|
As soon as the server is up and running, you can start the migration. If this process has been successfully completed, you will also receive a confirmation directly.
|
|
In your terminal for the Postgres DB you can now connect to the database adonistodo
and display the list of relations with \dt
. You will now see todos
there. This way you can be sure that everything worked.
Models
Now we switch back to the terminal for the actual application and create a model for the todo items. There is also a command for this directly from node.
|
|
In this file we also determine the two attributes content
and complete
, with the associated data types.
|
|
Seeder
In order to fill the database with sample data, there is the possibility to create different seeders under AdonisJs.
|
|
You can now specify the required sample data in the newly created file.
|
|
In order to fill the DB with it, you first have to install Luxon for the DateTime format.
|
|
Now you can really fill the DB:
|
|
As soon as you switch to your database within your terminal, you can now see your data.
|
|
The controllers
Now that you have data and a server that can be started without problems, it is now a matter of the actual functions that your server or your application should have. In our case, you only need a controller that contains the business login. This can also be created automatically via the terminal.
|
|
Within this controller you need the method index
to start with, which simply queries all existing to-do items from the database. The view list
is called as the return value and the previously queried to-do items are transferred as data.
And another method is show
, which returns a certain todo item from the DB. This calls the view todo_item
and transfers the item found as data.
|
|
Routes
Within the file routes.ts
, create the different URLs. At the same time, you can decide which controllers and methods can be called within this page.
For the beginning the function index is used under the url http://127.0.0.1:3333/todos. The second URL http://127.0.0.1:3333/list/[todo item id] uses the show function and uses the ID in the link to display the corresponding item.
|
|
Views
In order to be able to use the views that have been specified within the controller, you must of course create them.
|
|
To get started, you can now simply display all existing todo items using a foreach loop.
|
|
You can call up the specified address in your browser so that you can see your items: http://127.0.0.1:3333/todos.
The second template todo_item
is created for the second view.
|
|
For the beginning we only want to display the text of the item there.
|
|
You can also use the URL http://127.0.0.1:3333/list/1 to call up the todo item with the ID “1”.
Adding items
Now we come to the first basic function of a todo list, adding new entries. To do this, you first need a new function within the TodoController that performs this task.
First a new todo object is created for this. The ID is determined based on the current time so that it remains unique.
The content is queried from the input field with the name content
via the parameter request
.
The complete status is set to 0 by default. The item can then be saved in the DB. As soon as this is done, you will be directed to the page on which the individual item is displayed.
|
|
You must also define new routes for this range of functions. If the url is called with /add, you will be redirected to the start page. If a post is carried out, the function add
is called from the TodosController.
|
|
As a last step for the functionality you need an input field and a button within the template list.edge
|
|
Now you can create your own new items.
Deleting items
Of course, you also want to be able to delete items. Again, three steps are necessary here. First you create a function within the TodosController. With the ID that is transferred, the corresponding item is searched for and deleted immediately. As soon as this is successful, you will be redirected to the Todos page.
|
|
In addition, the structure of the two routes is the same, with the difference that it is the Delete function.
|
|
To delete an item, you still need a button, which you can click to delete an item.
|
|
Checking todo entries
And last but not least, the same process a third time. The method done
is created here, which first searches for the item using the ID taken from the Request parameter.
If a matching todo item is found, the status is reversed. This differentiates whether the item is done or is still outstanding.
|
|
Then two new routes have to be created.
|
|
And so that something changes in the styling, we have to add status-dependent stylings. We also have to add a button that changes the status.
|
|
You have now managed to create a web application with the Adonis JS framework. Our other ToDo tutorials that we have already created with Angular, React & Vue.js could also be of interest to you. If you are interested, this is the perfect opportunity to learn about the differences between the frameworks.
This text was automatically translated with our golang markdown translator.