Learn Inertia
Playing
01. So, what's Inertia?

Episodes

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

Transcript

00:00
So welcome to this course where I'm going to be teaching you everything you need to know to be able to build apps with Inertia.
00:05
Now Inertia might seem pretty confusing at first, so what we're going to do first is clear up how Inertia works with a very high level overview. And once you are done with this course, which is going to cover pretty much every single concept you need to get started, everything will start to come together and you'll pretty much have a whole new way of building applications. So before we talk about how Inertia works, let's have a look at the app that we're going to be building together while we learn Inertia.
00:33
So by the end of this course, we'll have built up this comment wall application that covers the vast majority of what you need to know to build applications on Inertia. So I've crammed all of the Inertia concepts you need into this application. And if you're like me, you learn best by building something. So let's go ahead and look at how this works.
00:52
I'm just going to go ahead and just post a comment here. You can see that a few things happen. We got a confirmation here that added to the timeline just down here, and there was absolutely no page refresh at all. So effectively, what we're building here with Inertia is a single page application that's driven directly by your back end, but within one application.
01:11
And you can see this in the code. If we just head over to the controller that drives this comment index, you can see that we're actually just passing down data. But we're passing this down to a index component. So if we just go ahead and open that up quickly, we're accepting them posts in directly to a view component, which is one of our pages.
01:30
And then we're just doing stuff with that data. We can submit that form directly to our controllers as well. And all of this works really nicely to create everything you need just inside of one big application. So before we go on, let's just take a really quick look at a traditional Laravel app, which would be our API and our view app, which will be the client.
01:51
So within our Laravel app, we've got loads of stuff inside of here, but mainly the data comes from our routes and our controllers that are kind of glued together. And our app from our pages or from any other JavaScript within this separate app will request data from our API, and then it will show it on the page. We can submit forms this way. That's pretty much how this works.
02:12
You may have even built applications like this before. Let's take a really quick look at how a Laravel app works with Inertia installed. And we refer to this as a monolith because it's just everything in one. So we have our routes and controllers.
02:26
We have our pages, which are view components, all within the Laravel app. But Inertia kind of sits in the middle as a router, which allows us to show pages. So our routes and our controllers go ahead and show these pages. And our pages via the router make requests to our routes and controllers.
02:44
And of course, everything else down here can request things via Inertia, but mainly you'll be dealing with sending data down to your components and requesting data directly from your controllers. So with Inertia, you can build a normal route and controller within a framework, but then the views you return instead of being blade templates are actually view components. And Inertia replaces your entire view layer and uses client-side routing to fetch these pages like a single-page app. So although it might sound a little bit more complex, the overall concept of Inertia is actually very simple.
03:20
It connects a server-side framework to a client-side framework within one app. In this case, if you're already familiar with Laravel and View, you're more than halfway there. All you'll need to do is learn the Inertia specifics to glue everything together and get the most benefit from building your apps in this way. And that's exactly what we're going to do throughout this course.

Episode summary

Welcome to the course! This first episode gives you a big picture look at Inertia and sets the stage for what we'll be learning.

We kick things off by clarifying what Inertia actually is and why it might seem confusing at first. To make everything concrete, we see the kind of application we'll build together—a comment wall app that has all the major features to show off Inertia in action. You’ll see how adding comments works smoothly, without page reloads, thanks to how Inertia connects your backend (like Laravel) with your frontend (like Vue or React) in a seamless, single-page experience.

We also compare the traditional approach—where your Laravel backend is separate from your frontend SPA or client—and show how Inertia merges things together into a monolithic app. Instead of writing separate API endpoints and having a totally distinct JavaScript app, you get to write regular controllers and routes, but the views you return are frontend components.

What’s really cool is that you get the feel of a modern SPA, but you’re mostly working in the tools you’re already comfortable with. The only new bit is learning how Inertia glues everything together. That’s exactly what we’re going to focus on throughout this course!

So, by the end of this episode, you’ll have a clear idea of what Inertia is, why it’s helpful, and see exactly what you’ll build as we move forward.

Episode discussion

No comments, yet. Be the first!