Playing
02. Server-side setup with Laravel
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
The first thing to cover is the server-side setup. So we're going to install Inertia within a fresh Laravel app.
00:07
I've already created this app out, and I've gone ahead and switched over my database credentials here, and I've gone ahead and migrated. That's pretty much all I've done here so far. So the first thing to do is go ahead and use Composer to require in Inertia. So Inertia.js, and we are going to put in the Inertia Laravel package.
00:27
Let's go ahead and run that and just wait for that to finish. OK, now that's finished, let's just head over to the browser here, and you can see that we've got the default welcome page that Laravel gives us. Over in our routes, that's just defined out here as a get route for the home page,
00:41
and it just returns this welcome view. Now we're going to go ahead and get rid of this. I'm going to talk a little bit about how Inertia works in terms of injecting content into the page. Now, if we look under the Resources tab under Views,
00:54
we've got this welcome.blade.php file here. I'm actually going to go ahead and delete that. What we need inside of the Views template is a base app layout. So I'm going to call this app.blade.php, and we're going to go ahead and just fill this in with some basic
01:10
HTML markup like we'd see in any app. Now, what's going to happen here is every time we render a page within Inertia, it's going to use this app.blade.php file by default, and we want to inject the content into the body.
01:25
How do we do that? Well, what we need to do is go ahead and just use the Inertia directive. Inertia will handle injecting all of our content into here by default, and we're good to go.
01:36
So we're going to go ahead and just modify the title here. Let's just set this to Laravel. We'll look at how we can change this over a little bit later, but that's pretty much all we need now to get started and make this work.
01:47
So now any page we create within view in the next section will be injected into here, and all of the template will be rendered out within this page. OK, so I'm going to close that off,
01:57
and the next thing that we want to do with Inertia is generate out the middleware, which we will have a quick look at, but then we'll come back to later when we can look at some other things we can do with this.
02:07
So we're going to go ahead and just run the Inertia middleware command, and that's going to generate this out, this handle Inertia requests file for us. Let's just open this up real quick.
02:17
So handle Inertia requests, and let's just have a look at what we've got in here. So we've got the root view here, which will be app, which we've just created.
02:26
So you can customize that if you need to. We've also got the version, which is to do with asset versioning. Because Inertia works as a single page application, if you deploy your app and any of your assets change,
02:39
you're going to need some way to be able to handle Inertia or tell Inertia to refresh all of your assets. By default, this just uses a very basic versioning, but if you have anything specific in here,
02:52
you can add it in here. If we come down to the next method, we've got this share method, which allows us to globally share any data with our entire application.
03:00
And we'll be coming back to this a little bit later to have a look at. OK, so we need to go ahead and actually register this middleware. So we're going to come over to app HTTP and kernel, and we're going to register this under the web section just here.
03:13
So let's go ahead and pull in the handle Inertia requests middleware, like so. And we should be good. And of course, you're going to want to pull this in at the top as well. OK, so we're pretty much done with our server side setup.
03:25
I'm going to head back over to our roots here. I'm going to look at rendering out a page within Inertia. Of course, this isn't quite going to work just yet because we haven't installed the client side stuff.
03:35
Let's look at how the workflow changes here. So we're going to go ahead and use the Inertia helper or the Inertia facade. So we can do it like this. We're going to use the render method to render out a view template.
03:48
Now, I prefer to use the helper here. I find it a little bit easier to work with. So I'm going to go ahead and switch that over. Now, the render method here takes in the component that we want to render
03:59
and any props that we want to pass down to that component. This is going to be a view file. Let's go ahead and just recreate over in our JS section here a page under a pages directory that's similar to the welcome view that we deleted earlier.
04:15
So let's call this welcome.view because we're now working with a view template. And let's go ahead and just render out a template inside of here. And we can just say welcome, for example, or homepage, whatever we want to say. So in here, we now want to render out the welcome page
04:31
and we can pass some data down to that later. Now, at the moment, we're just going to go ahead and run npm run dev or npm install if we haven't already, and then npm run dev just to compile all of our front end assets.
04:44
But of course, because we haven't installed anything like view yet, this is just not going to work. But we're just going to go through the workflow. So in the next section, this will end up working.
04:53
OK, so if we come over to the browser and just give this a refresh and we open up our console here. So let's just get rid of this and pull this down here. Let's have a look and see what we got.
05:04
So there's nothing here at the moment. So let's head over to the next episode, where we're going to look at the client side setup and see this page rendered in our app.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.