AdonisJS : a full-featured node framework for modern web servers

In the following chapter, we will create an endpoint to manage tasks.First, let’s setup the project so it uses sqlite :adonis install sqlite3Then create the Task SQL table :adonis make:migration tasks# select "create table"adonis migration:runNote that every time you want to edit your database, you will have to create a migration.Migrations will allow you to save every modification you are doing to your models, and will update data to follow the new formats and rules you are implementing.It is possible to define a “up” method, and a “down” method, depending if you want to switch to go to a newer or older version.Then, create the model and controller related to this table :adonis make:model Taskadonis make:controller TaskController# select "For HTTP requests"You now have set up you database, created a table, a model, and a controller..The source code for the model and the controller is present on the app folder.You might have noticed that as you entered the last commands, the server automatically detected that your project changed, and took care of reloading the new setup.Now we can add some content to our model..By creating another migration.adonis make:migration tasksNow edit the new file under database/migrationsAnd run this migrationadonis migration:runNow, you tasks models have a title, description, and done properties.Creating a page displaying contentNow let’s create a page that displays a list of tasks.//Route.on(‘/’).render(‘welcome’)Route.get('/', 'TaskController.home')Then, on your TaskController, add the code handling the “/” route.And add the template of the page in “resources/views/tasklist.edge”In the “public/style.css”, delete all the css rules, to put :This will display an empty list of tasks on “localhost:3000/” (so basically, nothing at the moment !)It is currently empty because there is no tasks at the moment on the database..Let’s fix this!Creating tasks in your databaseFor the sake of this tutorial, we will create our first tasks on the TaskController method we already defined:Load the tasklist once to insert your tasks in the database, then erase or comment those methods.You should now see your tasks on the page.Creating new tasksOnce this working, we would like to add new content via a new task form.On your task controller, enter the task creation logic :The task creation form in your tasklist template :And the post route in “start/routes.js”‘/task/create’, ‘TaskController.create’)Now you can add tasks from the form displayed in your task list.Deleting TasksTo delete tasks, the implementation is pretty much the same as the one we did to create tasks :Add a delete method in the controllerAdapt the templateCreate the DELETE routeTaskController :“resources/views/tasklist.edge”“start/routes.js”Route.get(‘/task/delete/:id’, ‘TaskController.delete’)A bit of templatingOur application is going to grow..In order to reuse some parts of the html, we are going to define a main layout, and include the specific code of each page into it.Create a “layout_main.edge” file into “resources/views”..This file will include the base of our page, and will be used by each page we create.Now you can refactor tasklist.edgeAuthenticationYou have probably already seen that there are some files to manage users in your project (“app/Models/User.js”)First, let’s add a UserController :#Choose "For HTTP requests"adonis make:controller UserControllerGo to the router (“start/routes.js”) and some routes :two routes for the login and register process, displaying the templates with the formstwo routes for receiving login and register data and handling user creation and loginOne route for the logout processRoute.on('/register').render('register')Route.on('/login').render('login')'/register', 'UserController.create')'/login', 'UserController.login')Route.get('/logout', 'UserController.logout')Then, add the templates :“resources/views/login.edge”“resources/views/register.edge”“Controllers/http/UserController.js”You can also modify the tasklist template to add the register and login links, and a logout link if the user is logged in.You can also include the create task form into the loggedIn conditionnal, in order to prevent anonymous users to create tasks.More featuresWe now have seen what a basic and naive approach to build a web app can look like..You might have thought about a lot of other features to include in the project..Here is a quick list of other things Adonis can provide to you :Relations between modelsYou want the tasks to be owned by users, you can create relations between models with the following syntax :You can also use hasOne, belongsTo, belongsToMany and manyThrough.See the docs for more details can use validators to check is the data flowing into your controllers has the right format, and emit messages (via session.flash for instance) when some errors occurs.Validators are a 3rd party npm module : websocket instead of HTTP requestsAs you might have seen when creating controllers, you can also generate controllers that are designed to use websockets.More info here : full guide to make you app multilanguage is available on the Adonis docs as well : is a great choice for those who need a full-featured web server framework, and who need to keep control over your implementation.This framework could be of a great use if you want to kickstart a project, if you want to follow usual guidelines and concepts..It will help you to implement data migrations, keep your code clean, handle data validation…However, integrating exotic libraries can be painful..Adonis extensions need to be specifically built for this framework..This would be perfect for Adonis and it’s users if the framework would be in a monopoly situation, which is not the case.This guide was just covering the basics of Adonis, and there is still a lot to write about..If you enjoyed this guide, I encourage you to go to see the official Adonis website.https://adonisjs.comI personally think that this framework can provide a really nice way to deal with a lot of problems that can appear while developing a big project.. More details

Leave a Reply