AdonisJS [Part 2] - Installation

Hi, everyone 👋

Welcome back to the series of how to learn AdonisJS 🥳.

Today we will learn how to install AdonisJS to our computer and doing some initial setup configuration to our project as I mentioned in part 1 😎.

Before we start, let's check out the requirements to install AdonisJS. But if you have installed all of the requirements on your computer, you can skip this step 😉.

Ok, let's check this out!

Requirements

Node.js

Since AdonisJS is a JavaScript server-side framework, the first thing you have to install is Node.js. We will use Node.js as an engine to run our AdonisJS app.

I assume you have understood with Node.js. But if you don't, please learn Node.js first then go back here again 😉.

To check Node.js is installed or not, you can simply open the terminal (for Linux and macOS users) and CMD (for Windows users) then run the following command:

node -v
v12.14.1

If Node.js is already installed, the return of the command above is the installed Node.js version on your computer. But if the return is an error, you must install Node.js first.

In this series, I'm using Node.js with version v12.14.1 LTS. It is the recommended version of Node.js from its official website 😎.

If your computer has Node.js installed, but the version is not v12.14.1 it doesn't matter. Because AdonisJS lets you use the Node.js with a minimal version of V8.0.0 or higher 😁.

We will not learn how to install Node.js on your computer if you don't have it. You can visit the Node.js official website and read the installation guide.

NPM

The second thing that must be installed on your computer is NPM. Generally, NPM is included automatically when you install Node.js. So, you don't have to confuse how to install it.

AdonisJS lets you use NPM with a minimal version of 3.0.0 or higher.

To check our NPM version, run the following command:

npm -v
6.13.7

The return command above will show you the version of NPM that is installed on your computer.

Next...

Git

The third thing you must installed on your computer is git. If you use Linux such as Debian, Ubuntu, Linux Mint, Arch or Manjaro you have Git already installed on your computer.

If you use Windows, you must install it manually because Windows doesn't come with pre-installed git. That's the limitation of Windows 😢.

To install Git on your Windows, you can follow the Git official website and read the installation guide.

To check the git is installed or not, you can easily run this command:

git --version
git version 2.17.1

As you can see, my git version is 2.17.1 and it's mean I already have git installed on my computer.

FYI
In this series, I'm using Tealinux OS. This is one of several Linux distributions from Indonesia. You can download or find any information about this OS here 😉.

Installation

Now, if you have installed all of the things we need to learn AdonisJS, it's time to install it and create a new app on our computer 🥳.

Let's do it now!

First, we need to install AdonisJS globally with npm. You can simply run this command on your command line:

Don't forget to use sudo privilege if you use Linux or the installation will failed.

npm install -g @adonisjs/cli

or

npm i -g @adonisjs/cli

Confirm your installation

adonis --version
4.0.12

Congratulations! You have just successfully installed AdonisJS! 🥳

And now it's time to create a new app 😎.

Create A New Project

From the part 1 I promised you to make this series is learning by doing, right?.

We will carry out basic CRUD operations, but always doing the same thing is very boring. Therefore, let's make it more interesting 😁.

So, we will create a simple website to store the names and photos of cats you have met and show others how cute they are 😺.

It's a simple website with the whole of cats photos... like diary books but, you only tell your experience when met a cat.

If you're not a cat person, you can change it with your favorite animals, foods or anything you like. This is up to you!

To create a new AdonisJS app, we can use adonis command on our command line. Let's take a look at the command below :

adonis new [app-name]

You can replace [app-name] with your actual app name. In this series, I'll give it the name mymiaw 😁.

Run this command on your command line:

adonis new mymiaw

When the process successfully finished cd to your project and run the following command:

cd mymiaw
adonis serve --dev

If you see an error like this, don't worry and be calm. You didn't make any mistakes. Therefore let's take a look at the next section... 😉

 SERVER STARTED 
> Watching files for changes...

info: serving app on http://127.0.0.1:3333
events.js:200
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use 127.0.0.1:3333
    at Server.setupListenHandle [as _listen2] (net.js:1306:16)
    at listenInCluster (net.js:1354:12)
    at doListen (net.js:1493:7)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1333:8)
    at processTicksAndRejections (internal/process/task_queues.js:81:21) {
  code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '127.0.0.1',
  port: 3333
}
Application crashed, make sure to kill all related running process, fix the issue and re-run the app

On your root project, you can see a file called .env. Open it with any text editor and focus on the port configuration.

...
PORT=3333
...

The error that occurred above is caused because there is another process that works using port 3333. So, we just need to change the port to another port number. But, make sure the port is not used by other processes 🧐.

...
PORT=9999
...

As you can see, I have changed the port to 9999 and try to run the app again...

SERVER STARTED 
> Watching files for changes...

info: serving app on http://127.0.0.1:9999

Nice! the app is running!

But, wait... don't be feeling happy right now. Let's open it on the web browser.

In this series, I'm using Google Chrome as my web browser. You can use any web browser, but I recommend you to use Google Chrome or Firefox 🧐.

After opening the web browser, type this URL on the address bar and press enter.

http://localhost:9999

or

http://127.0.0.1:9999

Let's wait awhile...

Yay! We have successfully installed and run the app perfectly! 🥳

It's very easy, right?

What's next?

Stay tuned to this series and wait for another update soon! 😇

For the next part, we will learn and deep dive into the directory structure of AdonisJS. Yay! 🤩

Conclusion

To install AdonisJS it needs Node.js, NPM and Git installed on the computer. Then install it globally using npm by running npm install -g @adonijs/cli or npm i -g @adonisjs/cli command.

To create a new AdonisJS app is very easy. It just runs adonis new [app-name] command on the command line.

If you liked this post, you can give it love or unicorn 🥰.

Also, follow me on :

• twitter: @thexdev
• GitHub: @thexdev
• Instagram: @axeone.dev

Thanks for reading!

Sampai Jumpa 👋