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
-
(intro music)
-
- So now that we have everything installed on our system
-
that we're gonna need throughout this series,
-
we're ready to go ahead
-
and create our first AdonisJS 6 project.
-
So in order to do this,
-
we're gonna need to jump into our terminal.
-
So let's go ahead and open that up.
-
Now for all of my code-based projects,
-
I like to put them all inside of a folder called code.
-
So I'm gonna CD into that folder.
-
If you have a place that you like to put your code
-
on your computer, go ahead and head into that directory now.
-
If you don't, maybe consider creating a folder called code.
-
You can create a folder by doing make dir or mkdir,
-
and then provide in the folder names.
-
So it'd be something like code.
-
And then after you run that command,
-
you could then CD into code to jump into that folder
-
like we are right here.
-
I'm already within a folder called code.
-
So I'm going to bypass running that command there.
-
And I'm gonna clear my terminal out.
-
So now let's actually create our project.
-
So we're gonna need to run a command against NPM.
-
So we'll do NPM init, and the command's called AdonisJS.
-
And then we'll wanna target the latest version of that.
-
And this command is gonna walk us through the process
-
of actually creating our AdonisJS project.
-
But before we actually run this command,
-
we're gonna wanna provide it a project name.
-
I'm gonna call mine let's learn AdonisJS 6.
-
Now we're ready to go ahead and hit enter to run it.
-
It's gonna ask us which starter kit we would like to use.
-
And it has three options.
-
We have the slim starter kit, the web starter kit,
-
and the API starter kit.
-
Now back in our first lesson,
-
we talked about batteries that AdonisJS can come with.
-
These starter kits determine how many batteries
-
we get included and what type of batteries
-
we get included for the particular purpose that we select.
-
For example, if we were to select the slim starter kit,
-
it would come with the bare bone number of batteries
-
that we would need to actually get our server up and running.
-
We could always add additional batteries on top of it
-
once we start with that slim starter kit,
-
but it's gonna be the leanest option that we have
-
to get started with AdonisJS.
-
The web starter kit is gonna include everything
-
that we need to start up a web server.
-
This is gonna include things like session support,
-
the edge template engine, and so on and so forth.
-
And then the API starter kit's gonna contain things
-
you need to create an API,
-
where you have your client side application
-
or what's running the browser completely separated
-
from your AdonisJS project.
-
So depending on what you need for your particular project,
-
you'll want to select the appropriate starter kit for that.
-
For us, that's gonna be the web starter kit.
-
So let's go ahead and select the web starter kit here.
-
It's gonna ask us whether or not
-
we want to install our dependencies.
-
It's gonna use npm to do so.
-
Whenever you installed Node.js,
-
npm installed alongside of that.
-
The two go hand in hand with one another.
-
So we're A-okay to go ahead
-
and have it install our dependencies for us.
-
These dependencies are gonna be all of the different
-
packages from AdonisJS and other package creators
-
to actually run our underlying server.
-
So these are things AdonisJS created themselves,
-
as well as packages that they rely on
-
to get to the underlying Adonis server.
-
So let's go ahead and install those.
-
So it's gonna install those packages
-
like it's doing right now.
-
And it's gonna prepare our application,
-
which it already has done.
-
And now it's configuring AdonisJS Lucid,
-
and now it's done.
-
So let's go ahead and scroll back up a little bit
-
and finish running through what exactly it did.
-
So first it downloaded the web starter kit
-
from their GitHub repository.
-
The starter kit is essentially all of the code
-
that we're gonna start with
-
whenever we actually dive into our code base.
-
So if we were to compare our starter code
-
with the web starter kit that they have on their repository,
-
it would be a match.
-
Then it's gonna install the packages
-
specifically for that web starter kit,
-
since we told it to right up here.
-
Then it's gonna start preparing our application
-
and to do so it's going to install and configure Lucid.
-
By default, it's going to have it set
-
to the SQLite database.
-
Now, as we covered in our last lesson,
-
we're gonna be using Postgres as our database driver.
-
However, whatever database driver you use
-
doesn't really matter too much
-
because Lucid is going to abstract that away
-
for the most part.
-
So if you already have SQLite installed
-
or if you have MySQL or MSSQL, that's a-okay.
-
You can go ahead and use those drivers.
-
Whenever we install our Postgres driver for Lucid,
-
just go ahead and select the driver that you need.
-
If you're using SQLite, then you're already set.
-
And if none of that made sense, don't worry,
-
we're gonna walk through it.
-
And then lastly, it's gonna configure authentication
-
and it's gonna specifically do so with the session guard.
-
The session guard essentially is just going to
-
use browser sessions in order to maintain
-
the statefulness of our authentication.
-
Cool.
-
So all of those different actions get us down
-
to our starting AdonisJS project.
-
So we can go ahead and CD into our project now
-
by running CD.
-
Let's learn AdonisJS 6.
-
We can run npm run dev to actually boot the server up.
-
So let's do npm run dev.
-
And there we go.
-
So now our server address is ready
-
at 127.0.0.1 colon 3333.
-
The HTTP 127.0.0.1 is our host name.
-
And then the colon separates our host name from the port.
-
3333 is then our port.
-
The 127.0.0.1 specifies that the server's running
-
on our machine.
-
And then the port is kind of like the street address.
-
It's the specific address on our machine
-
that the server's running.
-
So if we go ahead and open this particular address
-
up in our browser, we can command or control click
-
directly on this and it will open it up within our browser
-
just like so, and we'll see it works.
-
Now in other places, you may also see 127.0.0.1
-
replaced with localhost.
-
Localhost is just a human friendly string
-
that means 127.0.0.1.
-
So they are interchangeable.
-
So if we go ahead and hit enter here,
-
you see we get the exact same thing.
-
Cool, so let's go ahead and hide our browser away here
-
for a second.
-
And let's finish walking through what this command states.
-
So you'll see it also mentions that the file system watcher
-
is enabled.
-
Essentially the AdonisJS server has started
-
in development mode.
-
And since it knows that it's in development mode,
-
it knows that we're gonna make frequent changes to it.
-
To help us out with that,
-
it's going to watch our file system for those changes.
-
And whenever it recognizes any of those changes,
-
it will automatically apply it to our running server
-
so that we can just see it immediately within our browser,
-
which is pretty nice and convenient.
-
All right, so now let's go ahead and open up our project
-
within our text editor.
-
So here's Visual Studio Code.
-
We can go ahead and hit open here.
-
Let's head into the directory that we installed
-
our application within.
-
So mine's within code.
-
I'm gonna wanna scroll down a little bit
-
to the Let's Learn AdonisJS 6.
-
Just select the folder right here and then hit open.
-
That's gonna open up all of the files and folders
-
that we have within that folder that make up our project.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 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 7s
-
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
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!