Playing
01. So, what's Inertia?
Episodes
01. So, what's Inertia?
3m 40s
0%
02. Getting set up with Inertia
9m 30s
0%
03. Creating pages
4m 3s
0%
04. Page titles and meta data
3m 19s
0%
05. Passing data to pages
6m 50s
0%
06. Swapping to API resources
5m 34s
0%
07. Form basics
4m 51s
0%
08. Submitting forms
6m 14s
0%
09. Resetting forms
3m 16s
0%
10. Validation and accessing form errors
4m 28s
0%
11. Clearing validation errors
2m 19s
0%
12. Preserving page scrolling
1m 46s
0%
13. Accessing form processing state
2m 49s
0%
14. Manual visits and partial reloads
6m 55s
0%
15. A recap, and Inertia links
9m 18s
0%
16. Partial visits (and more) with links
3m 45s
0%
17. Shared data
6m 40s
0%
18. Making use of Ziggy
5m 49s
0%
19. Lazy data
5m 2s
0%
20. Hooking back into forms for flash messages
3m 6s
0%
21. Revisiting shared data for better flash messages
5m 51s
0%
22. Hooking into Inertia’s router
5m 26s
0%
23. Shorthand routes
3m 4s
0%
24. Remembering form state
2m 10s
0%
25. Preserving state
2m 19s
0%
26. Basic authorization
5m 33s
0%
27. Customising Inertia error pages
14m 6s
0%
28. Dealing with expired Inertia requests
2m 52s
0%
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.
28 episodes•2 hrs 20 mins•1 year ago
Overview
Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.
Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.
To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.