UPDATED:
A basic setup for AdonisJS 5 with TailwindCSS. In this tutorial post, I will create a simple starter application boilerplate for AdonisJS.
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
My only back-end experience is with Python Django. I have been thinking of using Node for a long time. But I just couldn't get used to Node frameworks. I think Django has a big impact on this. I like to use Django with JavaScript.
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.
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 npm init.
The list of best blogging platforms for your creative works. The list includes free and paid platforms.
Choose project.
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.
I'll install the database and Lucid ORM. I'll choose to use SQLite.
After that, let Adonis make database arrangements for you.
Use SPACE to select SQLite, then press ENTER.
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 database/db.sqlite.
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 resources/views/layouts/master.edge file.
Let's create a file that will be used as a route view.
Also, add these codes to the resources/views/index.edge file:
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 resources/partials/navbar.edge file.
Because 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.
On your project directory, install the dependencies:
Set the postcss.config.js.
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.
Import tailwind.css to app.css. Open 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 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.