AdonisJS 5 has released its stable version. I plan this post to be a tutorial about AdonisJS 5. In this article, I will do the basic setups for the AdonisJS application and integrate it with the Tailwind CSS library. If you are interested in reactive front-end libraries, you can also read AdonisJS and SolidJS
However, I have been watching a few libraries that interested me for a while. Among them is AdonisJS.
AdonisJS has been migrated to the newer version 5. I previously failed because I tried to use it during this transition before. Fortunately, this time I got used to the concepts of Adonis.
AdonisJS is an opinionated, fully-featured web framework for Node.js.
Also, AdonisJS is one of the few Node.js frameworks (if not the only one) that has first-class support for SQL databases. It has Lucid ORM. This is maybe one of the most important factors for me to try AdonisJS. Because Django is a batteries-included framework and it has a nice ORM.
Installation of AdonisJS
There are two ways to install it. My choice would be using yarn. However, it doesn't work in my case. It throws an error. Therefore, I'll use the way of
Choosing Project Type and Initial Customization
You can customize your settings like below.
Change your directory to the newly created one and start the development server.
Open a new tab in your browser and visit
http://127.0.0.1:3333/. You'll see a welcoming message like this.
Database and Lucid ORM Installation
I'll install the database and Lucid ORM. I'll choose to use SQLite.
After that, let Adonis make database arrangements for you.
SPACE to select SQLite, then press
Choose browser for instructions. A new tab including setup instructions will be automatically open. However, You won't see proper SQLite instructions.
You can also check Wave Snippets for this kind of presentation
You'll find SQLite settings in the
config/database.ts file. I'll change my database filepath.
Also, don't forget to install the SQLite driver.
Also, in order to create an SQLite database via the graphical user interface, you should install DB Browser for SQLite
Install and create a database file located at
The final code of
app/Models/User.ts is below:
Now, We'll create a database migration for the model.
First, create migration file node ace make:migration user. This will create a migration file that looks like this:
Now, add the new lines and change the migration file. The final form should look like this :
Now, the following command will make the migration:
You can open DB for SQLite app and check if it is true.
Adonis uses Edge template engine, which I really like. First, create a master layout file which is a blueprint of our front-end.
Now, we can add some code to the file. You'll notice that
@!section('content') part. The
master.edge file will be used by another template.
Add the lines below to the
Let's create a file that will be used as a route view.
Also, add these codes to the
The Adonis router automatically look in
resources/views folder for the view.
Open your route file and change it according to this:
Now, we can create reusable components. I'll first create a navigation bar. In Edge, we can do this by the partial templates. Partials are used on many pages and views. I'll also use Devdojo Tail's demo components.
Add the codes to the
navbar component will be on every page, we should inform the master layout. We insert the partial template by putting this
@include('partials/navbar') in the proper place.
Adding Tailwind to Adonis
On your project directory, install the dependencies:
Also, make tailwind configs as follow. (Note: I'm also exploring Tailwind and the code below includes my settings)
We should also tell the webpack that we will use Postcss. Fortunately, the webpack settings are already done for us. We just need to uncomment the line:
We should create a separate CSS file for tailwinds. On your project's root directory, create the file.
app.css file. Only add this single line to the top of the file.
We'll finish adding Tailwind to the Adonis5 app with this final single-line modification. Open your
master.edge file, and add this single line to the head part:
The final form of the
master.edge should look like this.
If you open your app, you'll see that Tailwind is successfully integrated with the AdonisJS app.
SolidJS: First Impressions - Reactive Primitives
SolidJS is a true reactive library that allows you to use JSX for your frontend projects. In this blog post, I’ll share my first impressions.