Installing Inertia from scratch: Build a Starter Kit With Inertia and Fortify

00:12

And by the end of this episode, we're going to be able to render out an Inertia page. So we'll just choose something simple like the home page. So I haven't done anything here.

00:21

So the first thing I'm going to do is go ahead and run my migrations just to get them in the database. I've already got this created here and we're not going to modify these just yet. We're going to be adding to these as we go.

00:32

So the second thing to do is hop straight over to the Inertia docs so we can get everything we need installed. So if we come down to the server side section here, we are going to go ahead and install the Inertia Laravel dependency.

00:45

So we'll pull that in first of all. And let's check out what else we need to do. So we need to define a root template where all of our JavaScript will be injected into.

00:53

So let's go over to our app and choose where we're going to place this. Probably best to go in Resources and Views. And let's create app.blade.php in here. And we'll go ahead and create out some basic markup.

01:05

So for the title, we don't need this because Inertia will inject this head in for us with all of the other head content we need. So in here, we can just go ahead and define out the Inertia head directive. That's pretty much what we need to do there.

01:19

So inside of the body, this is where all of our content is going to be injected. So we are going to just use the Inertia directive. And while we're here, we need our scripts and our styles included here with Vite. So we're going to go ahead and use the Vite directive and we're going to give

01:33

the location to our JavaScript and our CSS. So that is under Resources and CSS and app.css. And also of course, for our JavaScript. So Resources, JavaScript and app.js.

01:46

So that's pretty much all we need for our base template. Okay. So the next thing we need to do is go ahead and install the Inertia middleware. Let's go ahead and just do that.

01:55

And then we need to register this middleware over in our kernel. So if we head over to app and HTTP and come down to our web section, we can go ahead and introduce our handle Inertia requests middleware directly into here. Now let's just take a look at this middleware.

02:11

If you are new to Inertia, we don't really need to do too much inside of here. If you need to change the root view that we literally just created, you can do that directly here. The majority of the time we spend in this file is going to be under this share section.

02:24

So we're going to be sharing data that we need to use within our entire app with all of our components and all of our pages. So this is a tricky one because we don't want to share too much data, but we're going to share the essential things in here, like the currently authenticated

02:38

user, so we can access them wherever we need to. Okay. So if we hop back over to the docs now, we've registered that middleware and all that's left to do is create a response.

02:47

Now let's go ahead and do that. And then obviously we're going to see an error on the page because we don't have any client side set up, but then we'll go ahead and set the client side up as well. So if we head over to our web routes, at the moment, we just have this homepage here.

03:01

I'm going to go ahead and create out a new controller. So let's go ahead and make a controller. And of course, we'll just create out a home controller here and let's replace this closure with that home controller.

03:12

And we'll give this a name as well. We'll get to client side naming routes as well a little bit later, but we'll call this home. Okay. So if we head over to the home controller, we're going to go ahead and just introduce

03:24

an invoke magic method and let's return a response and just see what we get on the page. So we'll go ahead and use either the inertia facade or the function. It doesn't really matter which one you use. And we're just going to use render here to render out a homepage.

03:38

Now we need to choose a place where all of our view pages or components are going to live for our pages. So let's go ahead and do that now and build up this home component. So these are probably going to go under JavaScript and we could just create out

03:51

a pages directory here and then just add any of these pages in here. So let's create out that homepage. We'll go ahead and create this out as a normal view component. And we'll just say home and let's just leave it at that for now.

04:03

So at the moment we've installed the backend stuff for inertia. We've gone ahead and created a controller, which is going to render a response and inertia response using this component we've just created. Let's see what happens when we go to the browser.

04:15

So if we head over here and give this a refresh, yeah, sure enough. The first thing we need to do is install our dependencies if they've not already been installed and also run npm run dev. So let's do that first of all.

04:27

So we're going to say npm install and npm run dev. Okay. Now that's running, let's open up a new tab here so we can continue to use anything we need to.

04:37

Give this a refresh. And as you'd imagine, it's just not working at the moment. So if we bring up our console, give this a refresh, nothing is happening at the moment.

04:45

Okay. So if we head over to the client side installation instructions in inertia, if you've never set up inertia from scratch before, this is a little bit more complex, but it's not too bad.

04:57

So the first thing that we need is. Of course, inertia and the view three package. So let's go ahead and use an npm installed to pull that in. And then we need to initialize our inertia app.

05:07

Now we can pretty much copy and paste this, but we're going to make a couple of changes as we go. And I'll explain what's happening here in case you're interested in freshly setting up an inertia project and how everything actually works.

05:18

So let's go over to our app JS file. And we're literally just going to paste this in here. We can kind of ignore the bootstrap file that's pulled in from Laravel by default.

05:28

Okay. So what's happening here? Let's go through this and then we'll make some changes. So create inertia app is the overall function that we use to create an inertia

05:37

app. And this takes several arguments or things that we can pass into this options object. Now, the first thing that you see here is really important. This is how we resolve pages.

05:47

That's what we've just created. That home dot view component is a page. So what this will do is it will resolve this when we request this using the render function just here, method just here, this name is going to come through

06:01

into here when we try and render that page out. So what that will do is it will allow us to find that page within this pages directory that we've just created. You can call that anything and you can modify this here if you want to.

06:13

And then it's just going to return that page to us with the name dot view. So in our case, it will be home and then we'll get home dot view placed into here. Now we can kind of demonstrate this by console logging out the name in here. So if you want to do that, you'll see home come through.

06:27

That will be put into that. So the next thing I'm really important. It's actually creating a view app because inertia runs either on view, react or spell.

06:36

And in this case, we are creating a view application just here. This is specific view functionality. You can see it's imported from view up here and then we tell how to render this. So this is H for HTML and that will just render that out that page out in HTML.

06:53

Now the really important part of this is the props. So the props will get passed down into our inertia components. So for example, over in our home controller, if we start to pass data down here that we want to use, these will need to be accessible inside of our home view

07:08

component. So they will get passed down into here. Now the use part of here uses just a way within view to use a plugin and the plugin that we get through here is the inertia specific plugin.

07:21

So we'll have inertia specific functionality throughout all of our components. And then the last thing is just mounting this to the element that's defined over in our app.play.php file, which is output using this inertia directive. So with all of this done, everything's starting to come together.

07:37

And then when we do request a page, it's going to find the page and then it's going to render it on the page where we need it. Okay. So now that we've done this, let's save this out and let's just see what happens

07:48

when we go over to our app. So let's give this a refresh. So the first thing that you can see is we need to include this view plugin here. This Vite view plugin.

07:56

So let's go ahead and first of all, do an install on this. Now this isn't just going to work. So if we just head over and give this a refresh, you can see it's still not working. Well, what do we need to do?

08:07

Well, we need to go over to our Vite config file. And at the moment we've got this Laravel plugin defined. That's fine. We can leave that in there, but we also need to use this view plugin directly in

08:17

here with any options that we need. So let's head over and import this first of all. So let's go ahead and import view from that Vite JS plugin and plugin view. And then we just register the plugin in here and we can pass several

08:33

options to this as well if we need to. So if we come over now, you can see that this is working. So we have successfully from scratch installed Inertia. Now there's a couple of other things that we could probably improve on here.

08:46

For example, we need page titles. So this is going to be a really important part of everything that we create. So I'm just going to go ahead and re-indent everything in here. And let's go ahead and provide this title option here, which is actually a

08:59

callback, which gives us the title of the page. So for now, I'm just going to go ahead and output code course in here and let's just see what happens to our homepage. And you can see that sure enough with that Inertia head directive and everything

09:12

being injected in, that's injected the page title into here for us. Now, the next thing that we need to do is make this a little bit more dynamic. So for example, we could go ahead and grab the actual title of the page that we define per page and then just use a hyphen and then the brand name in here.

09:29

So if we head over now, you can see that we've got that, but because we've not defined a title on our homepage, of course, that's not showing. So a good thing to do at this point would be to come over to our homepage and see how we do this.

09:41

So we'll go ahead and put in our script tag at the top. And this is going to be a script setup type. We're going to import the head component from Inertia. So let's pull that in from Inertia view three and then anywhere within this

09:55

template, we can just define this head component out. Now this can get pretty advanced. You can not have this as a self-closing tag and then you can define metadata in here if you need to.

10:05

But in its most basic form, we can just use head and then pass the title prop down to name this page. So in this case, we're just going to say home. So with this in here now, that's then going to transfer over, get

10:16

injected into our Inertia script, and then we'll have access to it just here. And sure enough, you can see that home is now in here. That's great. Now, another thing we might want to do with this home, this title is go ahead

10:30

and have the brand name come from our config. So if you've ever used Laravel before, you'll know that we have this app name just in here. Now, how do we get access to this on our client side?

10:41

By default, all of our EMV files are not accessible client side. That would be really silly because then we could grab pretty much any secret key in here or any other private data. So we prefix these with Vite if we want them to be available on the client side.

10:56

Now, this is already done for you. If you just head down here at the bottom, you can see that we've got Vite app name and that references the app name variable that we have inside of here. So we can basically just take Vite app name and we can just add it into here.

11:10

So let's go ahead and define out a constant up here called app name. And to access this client side, we just use import meta and then EMV, which will be available in our environment file, and then we have the Vite app name. So we can now take this app name and simply place it in here.

11:25

And now whatever our app name is will be transferred to the client side. So I'm going to go ahead and change this over to something else. And sure enough, once that is recompiled everything, you can see that it's changed.

11:37

OK, so I think that's pretty much everything for setting up Inertia now. We at least can see the pages that we are rendering out. We might make a couple of tweaks later, but for now, at least we have our pages being rendered.

Episodes

Transcript

Episode summary

Episode discussion