This season, we'll take a look at Inertia.js, and it should be enjoyable, because other than understanding the basic concept, I have no experience with Inertia. So we will be learning this together, which is the whole point of a series like this. Now, for the uninitiated, Inertia lets us build SPAs using classic server-side routing and controllers and middleware and policies and authorization. You can think of it sort of like the glue that connects a backend framework like Laravel to a client-side framework like Vue. So notice, this is a Laravel controller. Here's an action. We fetch some data.

Here's an action. We fetch some data. And the only difference is, rather than returning a Vue, we return this call to Inertia::render. This would be the name of, potentially, a Vue component, and this would be the props that are passed to that Vue component. It's kind of cool. Okay, so we're not going to be inspecting the Inertia source code itself. Instead, we're going to learn from the demo app. I think this will be a better way to get up and running. Okay, so real quick, we have basic authentication.

I think this will be a better way to get up and running. Okay, so real quick, we have basic authentication. There's no API here. These are standard pages. And in fact, if I come on back, it has this option to quickly view what happens when an error is thrown. And it shows up in a nice modal, which I like. But also, if I scroll on down, notice these are standard server-side routes that you would declare, in this case, in your routes file. There's no client-side routing here.

declare, in this case, in your routes file. There's no client-side routing here. However, if I do click from page to page, yeah, notice that we're not getting a full page refresh. So what happens is, Inertia will intercept this click, and it will submit an AJAX request to your server. So have a look here. This is something I understand about Inertia, because a number of tools have used it in the past. But anyways, if I click on this, yeah, it doesn't perform a traditional postback to

the past. But anyways, if I click on this, yeah, it doesn't perform a traditional postback to the server. Instead, it makes an AJAX request, where it receives the response. And notice, as part of that response, we have, in this example, the view component we want, organization/index, and then all the prop data that should be passed to that view component. So Inertia will then swap that out dynamically, and your page will magically update. It's very cool, isn't it? Here's reports.

Sometimes those things can be tricky. Where exactly do you put that information? Where for each page, you swap out the underlying title? Because if you think about it, you could do it with portals. If you're using Vue, you could do it with portals. You could set some kind of global state that you read from your layout.blade.php file. There's many different ways to do it. So I'd like to see what Ping does there. I'd like to know how Ping works with routing on the client side.

So I'd like to see what Ping does there. I'd like to know how Ping works with routing on the client side. When you're working with Blade files, well, you have access to all of those Laravel-specific helper functions, right? Like the route function, the URL function. But you lose all of that on the client side. So how does Ping deal with that? I'm also curious about shared data. Things like even who is currently signed in. Where would that be stored?

These are all the intricacies of building an app that you often don't think about. But you've got to figure out how do we deal with those? So with that in mind, why don't we go ahead and install this? Let's go to GitHub. And I'm just going to clone it. We'll call it Ping. All right, so if I list the files, yeah, this is a Laravel app. So let's see what kind of installation steps we have here. And then we'll get started learning. So we've cloned it.

And then we'll get started learning. So we've cloned it. We then need to install our Composer and NPM dependencies. We can do that now. And then npm install. And then finally, build our dependencies. And this will go through Webpack. It'll create your bundle. OK, next, set up our configuration, all right? Generate our application key.

OK, next, set up our configuration, all right? Generate our application key. This is all basic Laravel setup. Create a test database. We're going to use SQLite. And let me see, does he already have that configured to use SQLite? It's going up. Database connection, yeah, that's already configured for SQLite. Then migrate our database. I saw that we seed it.

Then migrate our database. I saw that we seed it. And then finally, boot up a server. In my case, I'm already using Valet. So that means I can go to ping.test. And there we go. So it looks like he already has a sample User for us. Yeah, and now we have this running locally. All right, in the next episode, let's have a look around.