We'll get our web project cloned down. Then, we'll get it configured by first creating our database and running our migrations and seeder. Lastly, we'll get a test SMTP email inbox set up through MailTrap.
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
Download or explore the source code for this lesson on GitHub
Although this project is already set up and out on GitHub, we're going to use this project's repository as an AdonisJS Starter Kit! This will truncate all of the past Git history, giving us a clean slated starting point.
npm init adonisjs@latest -- -K="adocasts/building-with-adonisjs-and-inertia"GitHub Repository for this series
NodeJS - be sure to have at least version 20 installed
MailTrap - email testing SMTP server
So the first step here is to get our project
cloned down onto our machine
and then fulfill all of its prerequisites.
So on GitHub, I have the project
that we're going to be starting from
at a repository called Building with AdonisJS and Inertia.
The main branch of this repository
holds what we ended our Building with AdonisJS
and Inertia series with.
To get this project added onto our machine
rather than cloning it down
as we would a typical repository upon GitHub,
instead we're going to use this project as a starter kit
whenever we create our new AdonisJS project.
That's going to clone this repository down,
excluding all of the additional branches and commits
that were added as part of the
Building with AdonisJS and Inertia series.
So I'm gonna go ahead and assume
that you have Node.js installed on your machine.
You're gonna need at least version 20
in order to use AdonisJS.
If you don't, then you're gonna wanna head over
to nodejs.org and download it from here,
or you can use a Node version manager,
NVM or FNM, Fast Node Manager,
to get that installed on your machine.
Once you have Node installed,
we can jump into our terminal
at the location that we want to clone this project into,
and we can use npm init adonisjs @latest,
and then provide hyphen hyphen
to dig into the options hyphen capital K
to specify a starter kit.
And we'll point this to the
Adacasts/BuildingWithAdonisJS and Inertia.
Hit Enter to run that.
It's gonna ask where it should create this project,
and I'm gonna call this plotMyCourse_API
so that I can easily keep this code base separate
from the previous series.
You could just call this plotMyCourse or whatever you wish.
This is just gonna be the name
of the directory housing our project on our machine.
So we'll hit Enter there,
and it's gonna go ahead and get it downloaded,
install the packages.
Okay, cool.
So now the project is on our machine.
We can go ahead and CD into it.
It'll be at whatever that directory name is
that you provided above.
So I'm gonna CD into plotMyCourse_API
and clear our terminal out.
Now for my text editor,
I'm gonna be using Visual Studio Code.
So I'm gonna right-click this new window,
and let's go ahead and have that fill the screen there
and close that dialog out.
Okay, let's hit Open, and let's find our project.
So mine's at series,
and then plotMyCourse_API.
There we go.
And you might get some output warnings.
You can go ahead and close that dialog out.
We'll fill that out here next.
So let's dig into our .env.
You'll see that we have some empty variables here.
First, let's tackle the database.
So this is the DB prefixed environment variables
that we have here.
This project was set up to use Postgres.
That's the database driver that I'm using on this machine,
but it may not be the one that you're using on yours.
You could also be using SQLite, MySQL,
any of those that are supported by AdonisJS and Lucid.
So let's go ahead and clear those out of our .env file,
give that a save,
and then we can jump up to our config directory
where we should have a database configuration.
We can take a look at that momentarily.
It's just gonna look like this.
Let's delete this file.
So let's right click and delete, move to trash.
Let's go ahead and dive into our start directory
where we have our env.ts.
Those same environment variables
that we've cleared out of our .env file,
let's go ahead and clear that out of here as well.
Okay, one last adjustment.
Let's go ahead and dive into our package.json file
and scroll on down to our dependencies
where we should see PG added in here.
This is Postgres.
So we can go ahead and remove that line
as if you're not going to be using Postgres
as your database driver,
and you don't need the package installed in your project.
All right, next let's dive back into our terminal
and let's reconfigure Lucid.
So let's do node ace configure@adonisjs/lucid.
We already have Lucid installed within our package.json.
So here we just need to configure it.
So we'll run that.
It's gonna ask us which database driver we want to use.
Now, again, I'm using Postgres,
so that's what I'm going to select here,
but you feel free to select whichever one it is
that you'll be using.
All right, so I'm gonna select Postgres,
and then it's gonna ask me
if I want to install the additional packages,
and I'm gonna hit yes.
This is going to include that PG
that I just removed out of the package.json.
Cool, so we can see that it's created our config.database,
which we've just deleted.
It's updated our adonisrc.ts file,
updated our .env, updated our startenv.ts,
and then it's gone ahead and installed types luxen,
which was already in our package.json,
luxen itself, which was the same,
and then it re-added PG,
which we removed in the previous step.
Okay, we can clear this out,
dive back into our text editor,
where we should now see, okay,
looks like we have our db host port password,
so on, so forth, added back into here, so that's good.
Should now see it inside of our .env as well,
and this will set us up with some defaults
known to the database driver that we're using,
most notably the host and port there.
If we take a look at our config,
we have our database configuration back into there,
and then we didn't need to really worry
about the adonisrc.ts file,
as all that this really added
was within the service providers,
there will be, one of these will be
the database provider there,
and then another one will be Lucid,
those aren't driver specific,
those are Lucid specific,
so that's why we didn't clear anything
out of here originally.
Okay, so what we now need to do
is actually fill out the database environment variables.
Now, let's say that you don't have
a database driver installed on your system yet,
the easiest way to get one installed
is to use db-engine.
This is from the same people who made TablePlus,
this is actually what I use
to get Postgres installed on this machine,
all you need to do is download it for your platform,
and then you can select the service that you need,
and start or stop it,
as well as get it to launch on login to your system.
So that's a no fluff way
to get various database drivers there installed,
and then you can also use TablePlus
as a GUI interactor for your database.
And I actually have TablePlus already installed
on my machine, and I'm gonna go ahead
and open it up here,
and use it to get a new database set up for this project,
so that we all have the same starting point,
and I'm not working with pre-existing data
from the last series.
So with this open,
let's go ahead and hit create connection down here,
and select the database driver that you're using,
I'm using Postgres,
so I'm gonna select that, and hit create.
That's gonna open this dialog up,
and we are creating a new database,
so all that we wanna do is connect.
So just like AdonisJS,
this is going to pre-fill the host and port
based off of the driver that we've selected,
so all we need to do
is fill out the username and password.
So for me, that's gonna be Postgres,
and then password for the password.
We can hit test to make sure that that's A-okay,
and since everything highlighted in green,
that means that it is.
Again, we're gonna be creating a database here,
so I'm just gonna hit connect,
which will open this up,
and make a connection not specific to a database.
We can select this little database icon right up here
to open a database.
This will show a list of all of the ones
that you have at this connection.
We're gonna hit new to create a brand new one,
and I'm gonna call this plot my course underscore API.
Hit okay to create it,
and then we can go ahead and select it, and hit open.
Presently, it's empty,
but if we had tables in it,
those would be listed over here on the left-hand side,
down here at the bottom,
we can see the actual SQL that was executed,
which created our database.
All right, so we have our database created.
I'm gonna go ahead and close out of this,
and then that went ahead
and saved our connection right here.
I'm gonna go ahead and right-click this, edit it,
and make this specific to this database.
So I'm gonna drag this back up here.
Let's call this plot my course API,
and let's fill out the database name for the same.
So plot my course API, and hit save.
Okay, so now anytime that we want to inspect our database
within a GUI, all that we need to do is come into TablePlus,
and double-click this to open that connection
up to the specific database.
All right, we can go ahead and hide that away.
Let's hide our browser away as well,
and let's use those same connection details
to fill out our .env now.
So the host and port are okay,
as we're using the defaults there.
Let's fill out our username,
which is Postgres for me,
and then password for the password.
And then for the database name,
that is now plot my course underscore API.
Let's give that a save.
Next, we have our SMTP details.
For that, we're gonna use the same service
that we used in the last series, which is called MailTrap.
So I'm gonna head over to there,
and if you don't have an account, I already have one here,
but if you don't, you can go ahead and create a new one.
There's a free tier to this
that allows you to have one testing inbox.
Once you've registered and everything,
you should be presented with a screen like this.
We can go ahead and hit start testing
to dive into our inboxes.
Currently, we don't have any, so let's add an inbox.
We can give this a name of plot my course, and hit save.
All right, let's click on that inbox to dive into it,
where we should see our connection details.
We can simply click on one of those values
to copy it into our clipboard,
jump back into our text editor now.
That was the host that I copied,
so I'm gonna plop that into the SMTP host.
Then we need to get the port.
Any one of these should do.
I'm gonna do 2525, paste that in there.
And for this, we also need an SMTP username,
as well as an SMTP password
in order to fulfill this connection.
So let's grab those as well.
We'll grab the username there, plop that in there.
And then lastly, the password, and that goes right there.
All right, we can give that a save.
This project should already have the SMTP username
and password set up within the env.ts right there,
as well as in the config within the mail configuration
right here underneath auth.
So all of that is a-okay now.
All right, so one last .env that we need to add in
is app_url.
This is used within the emails
that are sent inside of this application.
And we just need to set this to host, import like so,
and we'll be good to go.
All right, now our .env is all set up,
so we should be able to jump back into our terminal here.
Before we boot our server up,
let's go ahead and do node.asemigrationrun
to get all of our tables created
inside of that brand new database that we set up.
All right, and then let's do node.asdbseed,
which just sets up our simple roles and initial seeder data.
All right, let's clear that out now.
And we should be able to npm run dev
to boot our application up.
And if all goes according to plan,
we should see our server URL right here,
which we can command click on
to open it up inside of our browser.
Okay, cool.
So now our application's all set up on our machine
and ready to go.
In the next lesson,
we will actually familiarize ourselves
with what we already have inside of this application,
and we'll go from there.
One last thing, mail trap.
We set up a test inbox within here.
So if we jump back into here real quick,
the way that this works, if you're unfamiliar,
is any emails that we send with this connection,
since this is a test inbox,
will only go to this inbox.
It won't actually send emails out
to whatever email it is that we enter in,
like a traditional SMTP connection would.
Instead, it's going to gobble all of those emails up
that we send with this application
and send them directly to this inbox here for us
to easily see, just to kind of be able to test
to make sure that everything's actually working
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!