Tue Dec 19 2023
AdonisJS is a Node.js web framework written in Typescript that comes with many features out of the box such as User authentication, a SQL ORM, and Request Validation. Since discovering it, I’ve built and launched a handful of projects with it including Manchester Trams and Huddersfield Jobs.
In this article, I’ll cover how I setup an Adonis web project including database setup, adding a CSS Framework and organising my resources/view folder.
Firstly, I create a new Adonis project using npm init adonis-ts-app@latest [project-name] and select “web” project. I also select the option to install Webpack Encore to bundle frontend assets.
Next, I setup Lucid which is Adonis’ own SQL ORM. Once installed, I configure it and usually choose either MySQL or PostgreSQL.
npm i @adonisjs/lucid
node ace configure @adonisjs/lucid
The configure command will open either the browser or a text file with schema settings you’ll need to copy into Env.ts.
Again, Adonis comes with a package for handling authentication.
npm i @adonisjs/auth
node ace configure @adonisjs/auth
When configuring the auth package, I select Session which uses cookies to authenticate users.
Installing Tailwind isn’t actually included on Adonis’ website, but there’s a guide on Tailwind’s own website on how to install it with AdonisJS. To get started, install the following and generate a tailwind config file.
npm install -D tailwindcss postcss postcss-loader autoprefixer
npx tailwindcss init -p
In the newly created Tailwind.config.ts file, add the following to the content property.
content: [
"./resources/**/*.{edge,js,ts,jsx,tsx,vue}",
],
Then inside Webpack.config.ts, enable the PostCssLoader by uncommenting line 172.
Encore.enablePostCssLoader();
Finally, add the tailwind directives to resources/css/app.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
When dealing with forms, you’ll want to install Adonis’ security package, Shield, which “protect your web applications from common web attacks like CSRF, XSS, content sniffing”.
npm i @adonisjs/shield
node ace configure @adonisjs/shield
Then add the following line to start/kernel.ts
Server.middleware.register([
() => import('@ioc:Adonis/Core/BodyParser'),
() => import('@ioc:Adonis/Addons/Shield')
])
Additionally, to avoid you running into CORS issues, go to config/cors.ts and change line 23 to true.
As I build web applications with Adonis, I reorganise the resources/views folder and add a layouts and partials folder. To keep it short for this article, I’ve included layouts/main.edge and an updated welcome.edge. Though you’re free to setup the views folder however you like.
resources/views/layouts/main.edge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>undefined</title>
<script src="https://unpkg.com/alpinejs@3.11.1/dist/cdn.min.js"></script>
<link rel="stylesheet" href="/assets/app.71de4554.css" />
<script src="/assets/app.31d6cfe0.js" defer></script>
</head>
<body class="bg-gray-100">
</body>
</html>
resources/views/welcome.edge
<main>
<div>
<h1 class="title text-4xl"> It Works! </h1>
<p class="subtitle">
Congratulations, you have just created your first AdonisJS app.
</p>
<ul>
<li>
The route for this page is defined inside <code>start/routes.ts</code> file
</li>
<li>
You can update this page by editing <code>resources/views/welcome.edge</code> file
</li>
<li>
If you run into problems, you can reach us on <a href="https://discord.gg/vDcEjq6?">Discord</a> or the <a
href="https://forum.adonisjs.com/">Forum</a>.
</li>
</ul>
</div>
</main>
That concludes this week’s article, and a straight forward guide to getting started building web applications with AdonisJS. If you liked the article, feel free to let me know on Twitter and happy coding 😄
https://docs.adonisjs.com/guides/installation
https://docs.adonisjs.com/guides/database/introduction
https://docs.adonisjs.com/guides/auth/introduction