DEV Community

Cover image for AdonisJS [Part 2] - Installation
M. Akbar Nugroho
M. Akbar Nugroho

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

or

npm i -g @adonisjs/cli
Enter fullscreen mode Exit fullscreen mode

Confirm your installation

adonis --version
4.0.12
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

cd mymiaw
adonis serve --dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
...
Enter fullscreen mode Exit fullscreen mode

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
...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

or

http://127.0.0.1:9999
Enter fullscreen mode Exit fullscreen mode

Let's wait awhile...
Alt Text
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 :

Thanks for reading!

Sampai Jumpa 👋

Top comments (0)

Read next

borisfmmkgr2 profile image

How to Use Redis with Cricket API to Fetch Leagues by Date? 🏏

Boris -

codegirl0101 profile image

Introducing Best JSON Viewer Tool for Developers - All-in-one Solution

codegirl -

palongo profile image

Background Fire bubble Animation

Palongo -

imnotleo profile image

heap minchild

Leo -