Creating A New AdonisJS 6 Project
In this lesson, we'll create our first AdonisJS 6 project and learn how we can boot it up and open it within VS Code.
- Author
- Tom Gobich
- Published
- Jan 24
- Duration
- 5m 55s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Creating A New AdonisJS 6 Project
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 24s
-
2.1Rendering a View for a Route6m 30s
-
2.2Linking Between Routes7m 52s
-
2.3Loading A Movie Using Route Parameters9m 18s
-
2.4Validating Route Parameters6m 7s
-
2.5Vite and Our Assets6m 39s
-
2.6Setting Up Tailwind CSS7m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 8s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
7.0The Flow of Middleware7m 49s
-
7.1Authenticating A Newly Registered User4m 14s
-
7.2Checking For and Populating an Authenticated User2m 10s
-
7.3Logging Out An Authenticated User2m 24s
-
7.4Logging In An Existing User6m 54s
-
7.5Remembering A User's Authenticated Session6m 55s
-
7.6Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
-
8.0Creating A Movie List Page3m 43s
-
8.1Filtering A Query By Pattern Likeness7m 9s
-
8.2Filtering Our List by Movie Status5m 47s
-
8.3How To Apply A Dynamic Sort Filter To Your Query7m 12s
-
8.4Joining SQL Tables To Order By A Related Column4m 49s
-
8.5Validating Query String Filter Values7m 24s
-
8.6How To Paginate Filtered Query Results9m 15s
-
8.7Pagination First, Last, Next, and Previous Buttons4m 3s
-
-
User Watchlist
-
9.0An Alternative Approach to Many-To-Many Relationships4m 56s
-
9.1Toggling A Movie in an Authenticated User's Watchlist9m 56s
-
9.2Listing and Filtering User Watchlist Items7m 31s
-
9.3Allowing Users To Toggle A Movie As Watched4m 44s
-
9.4Filtering By User's Watched Status6m 7s
-
9.5Defining A Composite Unique Constraint4m 47s
-
9.6Persist Filters Easily with Lucid's Query String Method3m 58s
-
-
User Profiles
-
10.0How to Create and Fix Missing User Profiles in Your Application7m 37s
-
10.1Using Dependency Injection to Update A User's Profile9m 46s
-
10.2Saving All Or Nothing with Database Transactions5m 15s
-
10.3Uploading and Displaying User Avatars15m 29s
-
10.4Displaying A User's Profile6m 1s
-
10.5Filtering, Preloading, and Sorting By Relationship7m 6s
-
-
Admin Panel
-
11.0Creating An Admin Layout7m 14s
-
11.1Counting Stats for our Admin Dashboard5m 43s
-
11.2Paginated Admin Movie Table13m 2s
-
11.3Allowing Admins to Create Movies16m 39s
-
11.4Allowing Admins to Update Movies and Clear Values13m 27s
-
11.5How To Use One Form to Create or Edit Movies5m 32s
-
11.6Uploading Movie Cover Images in our Create or Edit Form10m 29s
-
11.7Using A Wildcard Route Param to Download Storage Images7m 57s
-
11.8Posting Objects, Arrays, and an Array of Objects in HTML Forms26m 26s
-
11.9Managed Transactions and Syncing Movie Cast Members15m 55s
-
11.10Allowing Admins to Delete Movies and their Relationships7m 42s
-
11.11Thank You for Watching!0m 31s
-
Join The Discussion! (17 Comments)
Please sign in or sign up for free to join in on the dicussion.
fadli-hidayatullah
I am new to adonis, I think we need to pay attention more to this than just the hyped who look for stability. Thankyou so much for the great work by making this tutorials.
Please sign in or sign up for free to reply
tomgobich
Thank you for watching, Fadli! I hope you find as much enjoyment in working with AdonisJS as I have! 😊
Please sign in or sign up for free to reply
mathius-kormasela
thanks for this tutorial, but I have an issue when running, npm run dev.
I got error like this
Error: Cannot find package 'luxon'
Please sign in or sign up for free to reply
tomgobich
Hi Mathius! Is this a brand new AdonisJS project? If so, make sure you're using at least version
20.6of NodeJS. If you are, can you please share the repo? I can take a look and see if anything stands out.Please sign in or sign up for free to reply
mathius-kormasela
yes, I'm using the latest node version 20.14.
this is my repo
https://github.com/mathiuskormasela12/hello-world
Please sign in or sign up for free to reply
tomgobich
Hmm… I just pulled down your repo, and ran
npm iand it booted up a-okay. I'm using Node v20.14 as well. Maybe try deleting yourpackage-lock.jsonandnode_modulesand rerunningnpm i? Might've been some issue with NPM cache.Please sign in or sign up for free to reply
mathius-kormasela
ok, thank you
Please sign in or sign up for free to reply
tomgobich
Anytime!!
Please sign in or sign up for free to reply
mathius-kormasela
works well after giving permission to npm to access .npm folder.
Please sign in or sign up for free to reply
tomgobich
Oh, good find! Happy to hear you were able to get it figured out!
Please sign in or sign up for free to reply
marley-apong
Hello / Good evening!
I'm trying to install Adonis ts but I'm stuck at the installation level. Need help please!
CUSTOMIZE PROJECT
> Select the project structure · api
> Enter the project name · hello-world
> Setup eslint? (y/N) · true
> Setup prettier? (y/N) · true
RUNNING TASKS
> Scaffold project 110 ms
> Install dependencies 39 ms
spawn EINVAL
> Configure installed packages
[ error ] Unable to create project. Cleaning up
node:fs:1215
binding.rmdir(pathModule.toNamespacedPath(path));
^
Please sign in or sign up for free to reply
tomgobich
Hi Marley! These steps don't seem in line with an AdonisJS 6 installation, what command did you use to try and install this project? Also, what NodeJS version are you using? Note, AdonisJS 6 requires NodeJS v20.6 or greater.
Please sign in or sign up for free to reply
marley-apong
Hello!
For installing AdonisJS, I used the command
npm init adonis-ts-app@latest hello-worldwith Node.js v20.16.0. At some point, I also used PNPM withpnpm create adonis-ts-app hello-world. I encountered the same error as you.Please sign in or sign up for free to reply
tomgobich
The command to create a new AdonisJS 6 project is
npm init adonisjs@latest, the same command shown in this lesson. Try giving that a go instead.Please sign in or sign up for free to reply
marley-apong
Ok thanks, it's fine !
Please sign in or sign up for free to reply
davide-zerrilli
Hi, thank you from Italy for this tutorial!! I have problem when I put http://localhost:3333 in my browser because it instantly switch to https and the site won't support it. I've just found this solution: https://weblog.west-wind.com/posts/2022/Oct/24/Fix-automatic-rerouting-of-http-to-https-on-localhost-in-Web-Browsers
Do you have any suggestions about?
Please sign in or sign up for free to reply
tomgobich
Hi Davide! Rick Strahl's blog is a fantastic resource, especially for .NET devs! If you don't have any localhost projects making use of HSTS, you should be able to just clear out your browser's HSTS cache to get things working again. You can find AdonisJS' HSTS config within
config/shield.ts.If however, you'd like to work with or need to work with HTTPS locally, you may have luck giving Caddy a try! I've never worked with it, but it automatically comes with and renews TLS certs for HTTPS and works on localhost.
Please sign in or sign up for free to reply