Get Started with AdonisJS; An MVC framework for Node.js
Looking for a Node.js MVC framework that looks like Laravel (PHP framework), Django (a python framework ), is well structured and very easy to understand. Then I think you are looking for AdonisJS.
In this tutorial, we will look at the following:
- Installing Node.js and NPM
- Installing AdonisJS CLI
- Creating a new project in AdonisJS
- Creating views and controllers
So, let’s do this. 🤓🤓
# Installing Node.js and NPM
AdonisJS requires Node.js with version 4.0.0 or greater. You can download the Node.js set-up for your OS from here (https://nodejs.org/en/download/). You can verify the version of Node.js that was installed like so:
NPM (https://www.npmjs.com/) is a package manager for Node.js. Verify the version installed like so:
# Installing AdonisJS-CLI
AdonisJS-CLI is a command line tool that helps us in automating various tasks (like scaffolding controllers) in AdonisJS. Use NPM to install this globally on your system.
➜ ~ npm install -g adonisJS-cli
# Creating a new project in AdonisJS
Creating a new project in AdonisJS can be done in two ways:
- Adonis command
- Using a seed project.
Adonis command: You can do something like;
- adonis new hello-world
- cd hello-world
- npm run serve:dev
Seed Project: You can do something like;
- git clone https://github.com/adonisjs/adonis-app.git hello-world
- cd hello-world
- npm install
- npm run serve:dev
Regardless of the option you choose, open your web browser and visit http://localhost:3333 Your application should look like this:
# Creating Views and Controllers in AdonisJS
In AdonisJS, Views are strongly backed by a templating library called nunjucks.
If you check the “resources/views” directory, you should see master.njk and welcome.njk. To create a view, add a file with a .njk extension in “resources/views” directory. For example, create index.njk in “resources/views” directory.
Index.njk
1 2 3 4 5 6 7 |
{% extends 'master' %} {% block content %} <H1>Hello, Welcome to adonisJS</H1> {% endblock %} |
{% extends %} tag is used when inheriting from the base template, while dynamic content is inserted in {% block <name> %} {% endblock %}
Let’s go to routes.js in “app/Http” directory. Replace it’s content with:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
'use strict' /* |-------------------------------------------------------------------------- | Router |-------------------------------------------------------------------------- | | AdonisJs Router helps you in defining urls and their actions. It supports | all major HTTP conventions to keep your routes file descriptive and | clean. | | @example | Route.get('/user', 'UserController.index') | Route.post('/user', 'UserController.store') | Route.resource('user', 'UserController') */ const Route = use('Route') Route.on('/').render('index') |
Refresh your browser and it should look like this:
Nice. 🤓
Controllers in AdonisJS reside in “app/Http/Controllers” directory. To create a controller, you can run the “make:controller” command like this:
➜ ./ace make:controller HomeController
OR
Create a file called HomeController.js in “app/Http/Controllers” directory yourself.
Another option is to run the “make:controller” command to create the HomeController. With that, the controller will look like this:
1 2 3 4 5 6 7 8 9 |
'use strict' class HomeController { } module.exports = HomeController |
PS: if you create your controller manually, add the above code
Now, let’s write a function that will display our “index.njk” view like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
'use strict' class HomeController { * index(request, response){ yield response.sendView('index') } } module.exports = HomeController |
Let’s modify our routes.js and specify the Controller and action for our index route like this: Route.get(‘/’, ‘HomeController.index’).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
'use strict' /* |-------------------------------------------------------------------------- | Router |-------------------------------------------------------------------------- | | AdonisJs Router helps you in defining urls and their actions. It supports | all major HTTP conventions to keep your routes file descriptive and | clean. | | @example | Route.get('/user', 'UserController.index') | Route.post('/user', 'UserController.store') | Route.resource('user', 'UserController') */ const Route = use('Route') Route.get('/', 'HomeController.index') |
Refresh your browser. I believe you will get the easier result.
# Conclusion
Congratulations on getting started with your first AdonisJS web application. AdonisJS is a great MVC framework. I hope you will enjoy using it. Now go out there and be awesome. For more information, please read the documentation(http://adonisjs.com/docs/installation).
- Get Started with AdonisJS; An MVC framework for Node.js - February 14, 2017