Installing Inertia from Scratch
Playing
02. Server-side setup with Laravel

Episodes

0%
Your progress
  • Total: 1h 7m
  • Played: 0m
  • Remaining: 1h 7m
Join or sign in to track your progress

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.

Episode summary

In this episode, we walk through the process of setting up the server side of a Laravel application to use Inertia.js. Starting with a fresh Laravel install, we tweak our database credentials and run migrations. Then, it's time to pull in the Inertia Laravel package using Composer.

Once that's done, we look at the default Laravel welcome page and quickly wipe it out so we can replace it with our Inertia-powered setup. We delete the old Blade view and create a new app.blade.php layout, adding some basic HTML and the Inertia directive, which is where all our Inertia-managed frontend components will get injected.

Next up, we generate and configure the Inertia middleware (HandleInertiaRequests). We do a quick walk-through of key parts of this file—including settings for the root view (pointing to our new layout), asset versioning to handle updates after deployments, and the handy share() method for passing global data to all Inertia pages.

We register the middleware in Laravel's HTTP kernel, making sure everything's wired up correctly on the server side. Then, we show how to render an Inertia page from a route using the Inertia helper, prepping for the frontend we'll build later. We also set up a sample Vue component in the right place (even though we haven't hooked up Vue just yet), and show the workflow for compiling frontend assets.

By the end, everything's ready on the backend for us to move onto the client side. In the next episode, we'll tackle the frontend setup—and finally bring our pages to life!

Episode discussion

No comments, yet. Be the first!