AdonisJS [Part 3] - Directory Structure

Hi, everyone 👋

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

Today we will learn and deep dive into the AdonisJS directory structure 😎.

Oh, wait... Why we should learn this part? 🤔.
while we can easily learn something by creating an application based on study cases.

Well, that's a good question. Let me answer your question and give you some explanation about why you should learn this and of course, understand this part.

So, let's start it now! 😎

The abstraction

Imagine if you have a new house and very different from your previous house. Where all the location of the room is very different. The dining room, living room, kitchen, and bathroom are all placed in a place that you did not know before.

So, what would you do?

The answer is simple, right? You will walk around in every room in your new house and memorize all of its locations and most importantly you will remember every function of each room.

But, because you already know every function of the room of your house, so you no longer need to do that.

After you remember and get used to all the rooms in your house, one day you want to change your house to support the activities you want. Because you already understand the ins and outs of your house, so you are very easy to modify it without requiring the help of many people.

So, until here, can you imagine if the house was the AdonisJS framework and every room I mentioned earlier was part of the directory structure of the framework?.

And what happens if you master the ins and outs of this framework? Of course! You can be creative with this framework easily and save you time not to look for every error in the Google search engine or ask each group to get the answer 😮.

But the coolest thing is that this is one of the right steps if you want to be a participant of the AdonisJS open source project! 😎.

Let's start diving

.
├── app/
  ├── ...
├── config/
  ├── app.js
  ├── auth.js
  └── ...
├── database/
  ├── migrations/
  ├── seeds/
  └── factory.js
├── public/
├── resources/
  ├── ...
  └── views/
├── storage/
├── start/
  ├── app.js
  ├── kernel.js
  └── routes.js
├── test/
├── ace
├── server.js
└── package.json

Can you see that? Yes, the above structure is the standard directory structure of the AdonisJS framework when you first create a new project using the adonis new command.

There are lots of files and folders that you can find, but keep calm and focus on the MVC concept only because in general, the AdonisJS framework uses an MVC design pattern 😉.

In this explanation, our main concern is the Root Directories and app Directories. I will explain these two main concerns as clearly as possible, so you can understand them easily 😇.

So what are you waiting for? let's dive into the directory structure of AdonisJS! 🤩.

Root Directories

In the Root Directories, you can see there are 7 main directories and 2 main files where each folder and file has its purpose and function. Let's start with the app/ folder 😉.

app

The app directory is the home of your application logic. All of your models and controllers will be placed inside this directory. If you have already known about the middleware concept the middleware also placed inside this directory.

Let's look inside...

.
├── Middleware
│   └── ConvertEmptyStringsToNull.js
└── Models
    ├── Token.js
    ├── Traits
    │   └── NoTimestamp.js
    └── User.js

As you can see, there are several directories and files. These files are generated automatically when you created your project with adonis new command as I mentioned earlier. And if you make a controller and a model, then they will be in this directory.

In this section, I will not explain this directory in full. The full explanation is in the section after the Root Directories 😉.

config

The config directory is used to define the configuration of your application. AdonisJs ships with several config files. Let's see what's inside the config directory..

.
├── app.js
├── auth.js
├── bodyParser.js
├── cors.js
├── database.js
├── hash.js
├── session.js
└── shield.js

Each of the files above has its respective tasks. For example, the app.js file has the task of holding the basic configuration of your application.

In the next example, you can see the database.js file where this file is responsible for holding the configuration of the database you are using, such as the username and password of the database. And many other files, but this is all you need to know now so, you don't get confused 😉.

database

The database directory is used to store all database-related files. If you make a migration and factory, all files created will be placed in this directory.

.
├── factory.js
└── migrations
    ├── 1503248427885_user.js
    └── 1503248427886_token.js

You can see above that several files were created automatically when we created the project with the adonis new command.

don't worry and get confused if you don't know what migration and factory are. We will learn it soon... 😉

public

The public directory is used to serve static assets over HTTP. That means you will place all CSS, JS, and image files in this directory and other static files.

You can see below a CSS file and some images are placed in this directory...

.
├── logo.svg
├── pyramid.png
├── splash.png
├── style.css
└── title.svg

resources

Next, we have a resources directory.

The resources directory is used to store presentational files for your application like view templates, LESS/SASS files, uncompiled JavaScript, or even images.

Oh, if you didn't know before, AdonisJS uses a view template called Edge. This is very similar to Laravel's view template. So, if you have ever used Laravel, it's very easy to learn this feature 😉.

Below is the contents of the resources directory...

.
└── views
    └── welcome.edge

start

Last but not least...

The start directory is used to store files that are loaded at the boot of your application.

.
├── app.js
├── kernel.js
└── routes.js

As you can see above, there are three files with their respective functions. You do not need to be confused with the file because we only often use a file called routes.js 😉.

app Directories

Wow, looks like we've arrived at the app directory explanation 😮.

I know you are a little tired, so rest for a while. Drink a few glasses of water and stretch your body then back here again 😉.

Feel better?

...if yes, let's continue our adventure!

There are still many directories in the app directory, but by default, AdonisJS will not create the directory until we need it.

For example, you will not find a directory called controllers in the app directory. While we need a place to put all our controller files later.

So, to prove that, let's make a simple controller and see the results.

app/Controllers

To create a new controller all you have to do is to type this command in the terminal:

adonis make:controller [controller-name]

Now, I will make a controller with the name hello.

adonis make:controller hello

If you get an option like this, then just select 'For HTTP request'...

> Select controller type (Use arrow keys)
  For HTTP requests
  For Websocket channel

And don't forget to press the enter button 😝.

Now let's take look. What happen to our app directory...

.
├── Controllers
│   └── Http
│       └── HelloController.js
├── Middleware
│   └── ConvertEmptyStringsToNull.js
└── Models
    ├── Token.js
    ├── Traits
    │   └── NoTimestamp.js
    └── User.js

Can You see that?

AdonisJS has created a new directory called controllers and inside it, there's a directory called HTTP and in that directory, there's a controller that we just created. Cool!

app/Models

The app/Models directory is used to store all of our models.

As you can see AdonisJS ships with several defined models. The Token and User model. These models are used to store our user and token (for authentication purpose).

We also learn how to create a model in the next part 😉.

app/Middleware

The app/Middleware directory is used to store all of your middleware.

AdonisJS also ships with a defined middleware. That middleware has a task to check if our request data is an empty string then convert it to a null value.

We will also learn how to create a middle in the next part 😉.

Actually, there are several directory such Commands, Listeners and Validators, but in this series we will not using these features. Maybe i will write the explanation in the next series of AdonisJS 😉.

What's next?

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

For the next part, we will learn about routing in AdonisJS. Yay! 🤩

Conclusion

In general, the AdonisJS directory structure is separated by two main concerns.

The first is Root Directories. At this level you can find several sub directories that have tasks that match their respective names such configuration, uncompiled files, etc.

The second is app Directories. At this level you can find several sub directories that also have tasks that match their respective names such model, controller, middleware, etc.

If you like this post, you can give it love or unicorn.
You know? it is a magical power that keeps me writing for you all 🥰.

Also, follow me on :

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

Thanks for reading!

Sampai Jumpa 👋