JAVASCRIPT

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: 

screen shot 2017-02-14 at 4 57 25 am

NPM (https://www.npmjs.com/) is a package manager for Node.js. Verify the version installed like so:

screen shot 2017-02-14 at 5 00 36 am

# 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:

screen shot 2017-02-14 at 5 03 31 am

# 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

 

{% 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:

Refresh your browser and it should look like this:

screen shot 2017-02-14 at 5 06 19 am

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:

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:

Let’s modify our routes.js and specify the Controller and action for our index route like this: 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).

Olusegun Ayeni

About Olusegun Ayeni

I am a charismatic developer that's constantly in awe of modern technology changes and innovation and strives to follow these changes to build world class modern applications.