00:05
Using InertiaJS with AdonisJS is rather simplistic because AdonisJS has
00:09
a whole configuration step that allows it to
00:11
configure InertiaJS into any AdonisJS project.
00:14
So if you have a pre-existing project,
00:15
you can easily add InertiaJS to it at any point in time.
00:18
Just go ahead and CD into whatever that project is,
00:21
and then run node ace add at AdonisJS/inertia,
00:26
and that command will both install the InertiaJS package into
00:29
your project as well as configure it all in that one command.
00:33
So if I open the documentation up here,
00:35
all the steps provided here within
00:37
the C steps performed by the configuration command.
00:39
If you're looking for this inside of the AdonisJS documentation,
00:41
scroll down to the views and templates,
00:43
go into Inertia, and this is underneath the installation section.
00:46
So I've just expanded this little panel
00:48
out here and it walks through all the steps.
00:49
So it's going to configure the Inertia provider inside of
00:51
our providers array, add in the middleware,
00:53
create a configuration file for us,
00:55
the Inertia layout edge view,
00:57
the CSS as well as the JavaScript files needed to
01:00
instantiate your application on the client side,
01:02
a welcome page, error pages.
01:04
It's also going to update your V configuration to add
01:07
the InertiaJS plugin and add a test route to your start routes file.
01:11
We, however, don't have a project quite yet.
01:13
So we need to start with one of
01:15
the starter kits that comes with InertiaJS pre-configured.
01:18
So let's go ahead and hide our browser back away.
01:19
Let's clear that out and go back out
01:21
a directory so that we can create a brand new project.
01:24
So we'll just walk through the same flow that we would
01:26
whenever we're creating an AdonisJS project.
01:27
So npm init AdonisJS@latest,
01:31
and we'll define our project name.
01:33
So plot my course.
01:34
We'll hit "Enter" and it will walk us through
01:36
the steps needed to create a project.
01:37
First, it's going to ask us which starter kit we want to
01:39
use to make things simple on ourselves.
01:41
We're going to start with the Inertia starter kit
01:42
because that's what this series is all about.
01:44
Hit "Enter" there. For authentication,
01:47
we're going to be using sessions.
01:48
This stores the authentication state whenever we get to
01:50
that point inside of the session cookie so that we
01:52
don't really need to worry about it at all on the front end.
01:54
Everything's dealt with on the back end.
01:56
So we'll use session there.
01:57
I'm going to be using Postgres,
01:59
but if you have one of these other database drivers
02:01
already set up on your system, feel free to use it.
02:03
Lucid's pretty much going to normalize everything for us anyway,
02:07
so that won't make much of a difference.
02:08
So I'm going to be using Postgres.
02:10
Again, use whatever you'd like there.
02:12
Then you have the option to select your front-end adapter.
02:15
There's view three, react, felt,
02:17
solid, or you can skip this and configure it manually.
02:19
We're going to be working with view three throughout this series,
02:22
but for most things, especially the InertiaJS adapter-based things,
02:25
you're going to be able to reapply it to
02:27
whatever front-end it is that you would like to actually use.
02:30
So we'll be using view three throughout this series,
02:33
and it's going to ask you whether or not you want to set up server-side rendering.
02:36
Just after this lesson, we're going to have a lesson
02:37
specifically on what the difference is
02:39
between client-side and server-side rendering.
02:41
So we won't cover that right now in too much detail,
02:44
but server-side rendering does require
02:46
some additional steps that we need to worry about,
02:48
and it'd be great to be able to show that in this series.
02:51
So we're going to be going forward with server-side rendering,
02:53
even though it doesn't really benefit our project in any way.
02:56
More on that in the next lesson.
02:57
For now, let's just move forward with
02:58
server-side rendering for the application if you're following along.
03:01
Then it's going to go through and actually start with our project,
03:04
getting it all set up on our machine and configured.
03:07
Awesome. Looks like all of that completed successfully.
03:09
So we can go ahead and clear that out and CD into our application here.
03:13
We'll leave it there for now,
03:14
and we'll go ahead and open it up inside of our text editor here.
03:17
I'm using Visual Studio Code.
03:19
I'm going to go up to File, Open Folder,
03:21
go into Code.
03:22
I have this inside of a lessons directory,
03:24
and there it is right there.
03:25
Just hit "Open" and voila.
03:27
Now, as you'll see here within our output panel,
03:29
we are missing an environment variable for DB database.
03:32
Because we selected a database driver whenever we were setting up our project,
03:35
it's going to fill out our environment variable as such.
03:38
So we need to fill out those missing environment variable values.
03:41
So we can dive into our .emv.
03:43
Go ahead and just close out this output panel.
03:45
You can see the two that we're missing here are DB password and DB database.
03:49
If you are using Postgres,
03:50
you have installed locally on your system and you haven't changed any defaults,
03:53
then these are most likely going to be
03:55
your connection details for your host port and user.
03:57
That's exactly the case for me.
03:58
Furthermore, since I'm just on my local machine,
04:00
the actual password for my Postgres user is just password,
04:03
and then we have our DB database.
04:05
You want to go into whatever database it is that you're
04:07
using and create a brand new database for yourself.
04:09
I already have one created called PlotMyCourse.
04:11
We are good to go ahead and give this file a save,
04:14
close it out, and call that ready to go.
04:16
Let's go ahead and take a quick step through our project structure,
04:19
specifically the InertiaJS things.
04:21
First and foremost, you're probably going to notice that we have
04:23
a specific inertia directory here off the root of our project.
04:26
If we go ahead and expand this,
04:27
we'll see that we have a separate app, CSS,
04:29
pages, and a separate TS config file within here as well.
04:33
Pages is going to be exactly what you expect it to be.
04:36
It's going to be relatively similar to the resource pages if you were
04:39
to start with a basic EdgeJS rendered AdonisJS project.
04:43
It's going to have a homepage welcoming you to your project.
04:46
That's there to get you going.
04:47
It's also going to have error pages like not found and server error to render out
04:52
in production should either a 404 or 500 based error be thrown.
04:56
Then close those out.
04:58
The CSS directory is going to get us started with some app.css stylings.
05:02
For right now, we can go ahead and ignore that.
05:04
Then we have our app file with an app.ts as well as an ssr.ts file within it.
05:10
This ssr file is here only because we specified to
05:13
use server-side rendering whenever we were setting up our project.
05:16
Whenever we are using ssr,
05:18
InertiaJS is going to require one of each,
05:20
one for the server-side rendering and one for the client-side rendering.
05:23
We can start by taking a look at our client-side app.
05:25
You can see that we have some reference imports right there,
05:28
as well as some typical imports,
05:30
an app name that's coming from our metaenv or defaulting to AdonisJS.
05:35
This metaenv is really just our environment variables,
05:38
which if we take a look at that again,
05:39
we don't have that variable defined.
05:41
It will just default to AdonisJS for us here.
05:44
Then we get into instantiating our Inertia application.
05:47
As we send out requests with InertiaJS,
05:49
we'll have a little progress bar that goes across the top of our application.
05:52
This is where we can set the color of that bar,
05:55
and we'll just track the progress of that request as it goes out.
05:58
Then we have the ability to specify the title of the application.
06:02
This is what's displayed inside of the browser title,
06:04
and it will get injected into the head of our document.
06:07
Then we have resolve, which resolves the actual page components.
06:10
We'll see this in working later on,
06:12
but within our controllers,
06:13
we're able to specify a name of the page that we want to render out for any given route.
06:17
That name is provided into this resolve function,
06:20
and this resolve function is in charge of finding and
06:23
returning back the component that should be used to render out that page.
06:27
You'll see that for that,
06:28
we're looking inside of our pages directory and applying the name onto it.
06:32
So we're going to look inside of our pages directory for any page paths that we provide in.
06:36
Then it's just importing that component and resolving it and returning it back there.
06:40
Again, we'll work with this resolve method a little bit more later on.
06:43
For now, we'll scroll on down to our setup function,
06:46
which is where InertiaJS actually sets up our application.
06:49
I'm going to go ahead and save this file just to get rid of the red squigglies.
06:52
That's just a lint taking care of those issues automatically for me.
06:55
You can see setup is provided in an L.
06:57
This is the target element for our application route,
07:00
which is standard if you're working with any client-side application,
07:03
you'll have a mounting element and that's exactly what this is.
07:06
Then we have our Inertia application,
07:08
which is the app component that Inertia will wrap the actual page component with,
07:12
and that we need to provide into the render method for
07:15
the client-side library that we're using, in our case, we're using Vue.
07:19
Then we have the default props,
07:20
which are passed into the rendering of that component there as well.
07:24
Then Inertia also comes with a plugin that we need to instantiate on our app with.
07:28
Create SSR app comes from Vue.
07:30
So if we scroll up to our imports,
07:32
you can see it right here.
07:33
H also comes from Vue.
07:34
If you're not familiar with Vue,
07:36
H is the render function for Vue.
07:38
So it's just going to render out the Vue component.
07:40
Then the use methods, how we attach in plugins with Vue,
07:43
and then mount is how we actually mount the application so that it gets
07:46
started on the mount element that we specify,
07:49
which is again, that L that comes through from setup.
07:52
So before we close this file out,
07:53
let's go ahead and circle back to what these references are.
07:56
Now, our Inertia.js application uses a separate TS config from
08:00
our AdonisJS application right down here.
08:03
This is because AdonisJS uses some things that aren't applicable on the client side.
08:08
So whenever we actually get to our Vue,
08:09
React, Svelte, whatever application,
08:11
we need to have a separate TS config for that client-side application
08:15
separate from our AdonisJS TS config on our server.
08:19
So that's why we have two different TS configs going on within this project.
08:22
The one inside of our inertia directory will be used for our Inertia application,
08:26
and the one inside of our application root will be
08:28
used for the AdonisJS application,
08:31
and they are scoped as such.
08:32
So if we take a look at the AdonisJS one,
08:34
you can see that it's excluding our inertia path.
08:37
If we take a look at the inertia one,
08:38
it's including anything within this particular directory.
08:42
Back to our app.ts file,
08:44
specifically these references.
08:46
Since Inertia and AdonisJS application are using two separate TS configs,
08:50
if we ever want to share types from AdonisJS into our Inertia application,
08:54
whatever it might be on the front end,
08:56
these reference directives inside of our application give TypeScript a way to be able
09:00
to recognize what those types are from
09:02
AdonisJS application despite using that separate TS configuration.
09:06
Now, for the most part,
09:07
our SSR application will be
09:10
a more simplified version of our client-side application.
09:13
The main difference here is that our application isn't
09:15
actually going to be mounted to a mounting element,
09:18
but rather is going to be directly provided the page and
09:21
a method to be able to render that page to a string.
09:23
Rather than mounting the element and rendering on the client-side,
09:26
the HTML for the initial render is server-side rendered and then
09:30
kicked back with the actual document as HTML directly from our server.
09:34
Meaning that we don't need to mount it,
09:36
we just need to define our application and set it up in a way to where it can render
09:41
the same as our client-side application
09:44
would so that we don't get any hydration mismatches.
09:47
Now, a hydration mismatch happens whenever
09:49
the server-side rendering doesn't match the initial client-side rendering.
09:52
So we have the HTML come back directly from our server inside of our document.
09:56
The HTML for the application there needs to directly match
09:59
the HTML rendered out initially from our client as well,
10:03
whenever that mounts and takes over.
10:05
Otherwise, we'll get what's known as a hydration mismatch.
10:07
Now, these view and inertia applications are then mounted inside of
10:11
an EdgeJS layout called inertia layout instead of our resources views.
10:15
If we open this up, we'll see just like we
10:17
would with a typical AdonisJS application.
10:18
We have our Vite call right there for our script mounting points.
10:22
The page component chunk is then also passed in so that it is
10:25
readily available for us.
10:26
Then we have our inertia head,
10:28
which takes care of metadata that we're able to
10:30
set directly from our inertia application,
10:32
and our inertia body,
10:34
which takes care of the mounting element,
10:35
the initial state, and the like.
10:37
So hopefully, you're a little bit comfortable with what's going on here.
10:40
We'll dig into this in much more depth as we get going with the series.
10:43
For now, the main thing that you need to know is that we have
10:45
an inertia directory that holds our actual inertia application
10:48
with whatever client-side library it is that we're using.
10:50
It has its own application mounting points for both app,
10:53
and if you're using SSR,
10:54
we'll have a separate one for SSR.
10:56
As you add plugins and global components,
10:58
you want to add them to both of these because the output from
11:01
both needs to match otherwise you'll
11:03
get what's known as a hydration mismatch.
11:05
We have CSS for our inertia-specific CSS,
11:08
and pages that are the mounting point for
11:10
actual pages that we want to render out inside of our application.
11:13
Then of course, both the inertia application and
11:17
our AdonisJS application have their own TS configurations,
11:20
because there's some things that AdonisJS needs that
11:22
our inertia application doesn't and vice versa.
Join The Discussion! (8 Comments)
Please sign in or sign up for free to join in on the dicussion.
thenial
Hi, what is the reason for having the inertia directory in the root instead of in the resources folder? According to the docs, in the vite section, Adonisjs recommends having frontend assets in the resources folder.
Please sign in or sign up for free to reply
tomgobich
Hi Thenial! I don't know the exact reason, this is a change that was made in v1.0.0-19 pre-release. I believe it was done for cleanliness reasons. Since, you can have Inertia and non-Inertia pages, mix-and-matching both with them all within
resourcescan lead to things being a little difficult to sift through. Having them completely separated does ease that a bit.I would add an asterisks next to that section of the docs specifically for Inertia assets. 😉
Please sign in or sign up for free to reply
thenial
Hi, thanks for the reply! and that makes sense. If I choose to have everything inside the resources folder, would that affect the build in any way?
Please sign in or sign up for free to reply
tomgobich
Anytime! Nope, I haven't tried it, but it should be perfectly fine! Just be sure to update the entry points within the below.
config/inertia.tsresources/views/inertia_layout.edgevite.config.tsIn your
config/inertia.ts, there's a property calledentrypointyou'll want to add to the base of the config that points to wherever you're client-side entrypoint is. Then, if you're using SSR, you'll also want to update the one nested inside thessrproperty of the config.I'd reckon it'd look something like:
Please sign in or sign up for free to reply
thenial
Works perfectly, Thanks!
Please sign in or sign up for free to reply
tomgobich
Awesome!! Anytime!
Please sign in or sign up for free to reply
tigerwolf974
Hello , There's a problem with the subtitles. It doesn't match what you're saying.
Please sign in or sign up for free to reply
tomgobich
Hi tigerwolf974! I'm so sorry about that. It looks like I accidentally uploaded the previous lesson's subtitles to this lesson. They should be all fixed up now. Thank you very much for the heads-up!!
Please sign in or sign up for free to reply