{"id":21452,"date":"2016-12-28T13:31:29","date_gmt":"2016-12-28T13:31:29","guid":{"rendered":"http:\/\/how_to_build_a_cms_with_adonis_a_laravel_like_mvc_framework_for_node_part_1"},"modified":"2016-12-28T13:31:29","modified_gmt":"2016-12-28T13:31:29","slug":"how_to_build_a_cms_with_adonis_a_laravel_like_mvc_framework_for_node_part_1","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_build_a_cms_with_adonis_a_laravel_like_mvc_framework_for_node_part_1","title":{"rendered":"How to build a CMS with Adonis: A Laravel-like MVC framework for Node – Part 1"},"content":{"rendered":"

Even though Node is fun, easy and cheap to work with, we spend a lot of time writing boilerplate codes because structure and organization is missing.<\/p>\n

What happened to Convention Over Configuration<\/a>?<\/p>\n

While Node is simple, it requires you to make a lot of decisions, which ultimately causes confusion because it leaves you with several options. Languages like PHP, Ruby, C# and Python have one or more Molde-View-Controller (MVC)<\/a> frameworks, such as Laravel, Rails, ASP.Net and Django. These help developers to achieve structure and write maintainable code with these languages. That was not the case for Node until AdonisJs was introduced.<\/p>\n

AdonisJs<\/a> can help with these challenges. AdonisJs is an MVC framework for Node that is modeled after the popular PHP\u2019s Laravel<\/a> framework with a few concepts from Rails as well.<\/p>\n

Now, let\u2019s look at how you can use Adonis to create a simple content management system (CMS) performing CRUD (create, read, update and delete) operations.<\/p>\n

Adonis Setup<\/h2>\n

Before we write example code, we need to get Adonis on our machines and review a typical Adonis application files structure.<\/p>\n

Adonis Installation & New Projects<\/h3>\n

Adonis has a command-line interface (CLI) that makes most utility tasks easy. We can use npm to install the CLI globally:<\/p>\n

$ npm install -g adonis-cli\n<\/code><\/pre>\n
Node v4.0.0 and npm are the only requirements for installing Adonis to your computer.<\/em><\/p>\n
With Adonis installed and the Adonis command available, we can use it to create a new project:<\/p>\n
$ adonis new simple-blog\n$ cd simple-blog\n$ npm start\n<\/code><\/pre>\n
The new<\/code> command creates a new Adonis project with all the necessary files and content to get us started. It also installs the npm<\/code> dependencies into the node_modules<\/code> folder, so there is no need to run npm install<\/code>.<\/p>\n
You can create an Adonis project without using the CLI command. This option is considered manual and can be achieved by getting the boilerplate from GitHub and installing the dependencies:<\/p>\n
$ git clone https:\/\/github.com\/adonisjs\/adonis-app simple-blog\n\n$ cd simple-blog\n\n$ npm install\n\n$ npm start\n<\/code><\/pre>\n
The purple screen at localhost:3333<\/code> indicates that a new app was successfully created:\n\"Successfully<\/p>\n
Directory Structure<\/h3>\n
The directory structure of an Adonis project can be intimidating at first. But, that\u2019s the case with any framework that implements the MVC architecture. With time, you will understand how to navigate it. Here\u2019s a top-level overview for your reference:<\/p>\n
\u251c\u2500\u2500 app # Your code's home\n\u2502   \u251c\u2500\u2500 Commands # Ace Commands\n\u2502   \u251c\u2500\u2500 Http # Controllers and Routes\n\u2502   \u251c\u2500\u2500 Listeners # Event Listeners\n\u2502   \u251c\u2500\u2500 Model # Database Models\n\u251c\u2500\u2500 bootstrap # Application setup logistics \n\u251c\u2500\u2500 config # All Configuration lives here\n\u251c\u2500\u2500 database\n\u2502   \u251c\u2500\u2500 migrations # Database Migrations\n\u2502   \u2514\u2500\u2500 seeds # Dummy data\n\u251c\u2500\u2500 providers # Service Providers\n\u251c\u2500\u2500 public # Client files\n\u251c\u2500\u2500 resources\n\u2502   \u2514\u2500\u2500 views # Application views\n\u251c\u2500\u2500 storage # Temporary Logs and Sessions\n<\/code><\/pre>\n
Database & Migrations<\/h2>\n
The Sqlite<\/code> database is a good choice for development purposes and very small scale applications. We can make use of it by installing via npm and telling Adonis to use it as our default database via the database config.<\/p>\n
npm i --save sqlite3\n<\/code><\/pre>\n
The above command runs the installation process for sqlite3<\/code>. Now we must tell Adonis to make use of the database we just installed. Conveniently, Adonis already uses sqlite3<\/code> as the default database:<\/p>\n
\/\/ .\/config\/database.js<\/span>\nmodule<\/span>.exports = {\n    \/\/ Use Connection defined in .env file or<\/span>\n    \/\/ sqlite if none<\/span>\n    connection<\/span>: Env.get('DB_CONNECTION'<\/span>, 'sqlite'<\/span>),\n    \/\/ sqlite configuration<\/span>\n    sqlite<\/span>: {\n      client<\/span>: 'sqlite3'<\/span>,\n      connection<\/span>: {\n        filename<\/span>: Helpers.databasePath('development.sqlite'<\/span>)\n      },\n      useNullAsDefault<\/span>: true<\/span>\n    },\n    ...\n }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Migration is not a core MVC architecture concept, but it makes it easy to share schemas in a declarative manner. Rather than defining the schema in our databases directly, we define them in a file. This file can then be shared among team members.<\/p>\n
To create a posts<\/code> migration, run:<\/p>\n
.\/ace make:migration posts --create=posts\n<\/code><\/pre>\n
The command will create a migration class file named [TIMESTAMP]_posts.js<\/code> in database\/migrations<\/code>.<\/p>\n
The class has an up<\/code> and down<\/code> method. up<\/code> is called when we run migrations to create the database table, while down<\/code> is called when we want to tear down the table.<\/p>\n
Currently, the schema is defined with nothing but methods that will create the primary key (increments())<\/code> and another to create timestamps (timestamps())<\/code>. Let\u2019s add something that a post should have:<\/p>\n
\/\/ .\/database\/migrations\/[TIMESTAMP]_posts.js<\/span>\n...\nup () {\n    this<\/span>.create('posts'<\/span>, (table) => {\n      table.increments();\n      table.timestamps();\n      \/\/ New columns' methods <\/span>\n      table.string('title'<\/span>);\n      table.string('body'<\/span>);\n      table.string('image'<\/span>);\n    })\n  }\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We are calling the string<\/code> method on the table<\/code>, which was passed in to the create<\/code> closure. This method will create a column<\/code> of string type (or varchar<\/code>, as the case may be) and the column will be named after whatever value  was passed in.<\/p>\n
You can then execute the migration run command to begin migration:<\/p>\n
.\/ace migration:run\n<\/code><\/pre>\n
After a successful migration, you should get a message in the console saying so:<\/p>\n
\u2714 Database migrated successfully in 120 ms\n<\/code><\/pre>\n
Database Models<\/h2>\n
Now let\u2019s focus on the M<\/code> in MVC, which stands for Models. Models are stored in the app\/Model<\/code> folder and can be created using the ace command as well:<\/p>\n
.\/ace make:model Post\n<\/code><\/pre>\n
Note<\/strong>: Convention over configuration is a software engineering paradigm in which developers are not required to make too many decisions. Each Model needs to be mapped to a migration. Adonis uses this paradigm, so rather than defining it manually, it helps you make the decision. A Post will map to a posts migration, which is a plural lowercase. We are never compelled to define a config of what model maps to what migration.<\/p>\n
Here\u2019s what our model looks like:<\/p>\n
\/\/ .\/app\/Model\/Post.js<\/span>\nconst<\/span> Lucid = use('Lucid'<\/span>)\n\nclass<\/span> Post<\/span> extends<\/span> Lucid<\/span> <\/span>{\n\n}\n\nmodule<\/span>.exports = Post\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Lucid<\/code> is the library that Adonis uses to manage Models.<\/p>\n
The above Post<\/code> model might seem empty. However, because it will eventually be mapped to our posts<\/code> migration, we still gain access to the table\u2019s columns. We will discuss this later in the article.<\/p>\n
Creating Posts<\/h2>\n
Now that Migrations and Models have been taken care of, we have a store. Henceforth, we will be playing with HTTP requests and responses using routes, controllers and views.<\/p>\n
Our first two routes are going to handle creating new posts:<\/p>\n
\/\/ .\/app\/Http\/routes.js<\/span>\n\n\/\/GET route to send the new post form<\/span>\nRoute.get('\/new'<\/span>, 'PostController.new'<\/span>);\n\/\/POST route to send form data to the server<\/span>\nRoute.post('\/create'<\/span>, 'PostController.create'<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The route method takes two arguments \u2013 the route URL and the controller actions. We now need to create the controllers with the new and create action methods:<\/p>\n
\/\/ Import Model<\/span>\nconst<\/span> Post = use('App\/Model\/Post'<\/span>);\n\nclass<\/span> PostController<\/span> <\/span>{\n    \/\/ New action method<\/span>\n    * new<\/span>(request, response) {\n        \/\/ Send a view<\/span>\n        yield<\/span> response.sendView('post\/new'<\/span>); \/\/ .\/resources\/views\/post\/new.njk<\/span>\n    }\n\n    \/\/ Create Action method<\/span>\n    * create(request, response) {\n        \/\/ Filter relevant post data<\/span>\n        const<\/span> postData = request.only('title'<\/span>, 'body'<\/span>);\n        \/\/ Create and store post<\/span>\n        yield<\/span> Post.create(postData);\n        \/\/ Redirect to home page<\/span>\n        response.redirect('\/'<\/span>);\n    }\n}\n\nmodule<\/span>.exports = PostController\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n