Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
02. Getting set up with 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 our first question is, how do we get an inertia app set up with Laravel and Vue? Well, there are a couple of different ways that you can do this. You can either do this yourself by creating a new Laravel project, going ahead and installing Vue and then installing inertia and hooking everything up yourself.
00:19
Now, this is great and we do have a course on how to do this. But if you're learning inertia, you kind of just want to get started with inertia specific functionality. So we're going to go ahead and use a starter kit from Laravel. There are two options here, both of which support inertia.
00:38
We've got Laravel Breeze and Laravel Jetstream. You might have already used either of these before. We're going to go ahead and use Laravel Breeze, get this installed. And I'm not going to leave you there. We're going to take a look around this
00:49
just to see how inertia has been set up, just so we can get a really high level overview of how this is working. So the first thing that we're going to do is head over and install a new Breeze project. So we need a new Laravel project.
01:03
First of all, let's go ahead and just say Laravel new learn inertia. So we're starting completely from scratch here. And once we've installed this and open this up, let's go ahead and pull Laravel Breeze in.
01:15
And now we want to go ahead and scaffold out a new project. So we can do this with just blade. But of course, that is not what we're covering here. We are using Vue.
01:24
So we can also use React here. We're going to go ahead and run this command to install the Vue template for Laravel Breeze, which actually uses inertia. So again, there are a couple of options here.
01:36
We can do this or we can go ahead and use the server side rendering flag to pull server side rendering in. We're not going to do that just now. Let's just focus on the easiest starting point here.
01:48
So let's go ahead and run php artisan Breeze install and give that Vue option. So now that that is all pulled in, this has automatically built up everything for us. It's installed our dependencies.
02:00
And really, all we need to do is just go ahead and serve this application. So how are we going to do this? Well, rather than use something like php artisan serve or running this through Valet or anything else you're running,
02:12
we're going to go ahead and run npm run dev. And then on top of that, use something like Laravel Valet. So you can see that I've got a URL here to learn inertia.test. If we go ahead and open that up in the browser,
02:25
you can see, sure enough, this is now just working like a normal application. We can click around to the register page that we would normally get with Breeze. But this is now running on inertia. So we now have an inertia application.
02:38
So none of this that you see here are blade templates. This is all within Vue. Now, before we go any further, let's go ahead and hook up our database and just run our migration.
02:49
So we can go ahead and register and take a look around here. So I'm going to come down to my database connection and just configure this. And if you're following along, you'll want to go ahead and configure that as well. And I already have a database created here called Learn Inertia.
03:04
So much like a normal Laravel application, I'm just going to go ahead and run php artisan migrate. OK, so over here now, I can just go ahead and register an account like we normally would within Breeze.
03:15
But once again, all of the form submissions here and the redirects are happening within inertia. Now, we're not going to spend too much time within this application just yet, because we're going to be building that up with that comment wall throughout the course.
03:27
Let's just take a look at how the structure of this project looks now that we're using inertia. So a really good place to start is over in the roots file. And if we just scroll down here, you can see that we've got the home page.
03:41
So it looks a lot different to a standard Laravel application when we're using blade. Instead, what we're doing here is we're rendering out a page with inertia. Now, we've already spoken about how inertia works, so we can assume that this welcome page here is actually a view component.
03:58
Or in our case, we're going to just refer to them as pages, even though they are just view components. So where does this view component actually live? Well, let's go ahead and open up our file list here,
04:10
head over to resources under JavaScript, because, of course, a view component is a JavaScript file essentially. And if we come down here to pages, you can see that all of the pages that we would normally have to find out
04:23
in something like blade are actually now view components. So if we open up welcome.view, you can see we'll kind of ignore this for now, because we'll get to that a little bit later.
04:32
But you can see we're pretty much just using markup in here like we normally would for a component. So when we hit the welcome page, which we saw earlier, that is just rendering out all of the content
04:43
within the template section of a view component. And if you've worked with view before, this will be pretty familiar for you. Now, we'll notice that we've got some very specific things in here, which, of course, we're going to be covering throughout the course.
04:56
But that's pretty much what's happening here. And it's the same for our dashboard as well. So we're currently over on the dashboard page here. This is rendering out a dashboard component.
05:05
The middleware and the name of this route is defined exactly like we normally would within Laravel. There is no difference at all. And of course, the URL is exactly the same as well.
05:15
The only difference is that we now have a dashboard.view component, which, again, just renders everything out. We're still using a layout here. And everything pretty much looks the same
05:25
because, of course, we're just outputting markup. So now that we have seen an example of these two pages being hooked up or this route being hooked up to this page, let's have a look at how our overall application looks.
05:38
Now, we're going to go ahead and start in the view section. We still have this app.blade.php file, which is usually just the template to our entire application. And that's the case within Inertia as well.
05:51
So we have this overall structure to our page here. We've got the title in here as well. We have a Inertia head directive in here. And we have an Inertia directive in here.
06:04
Now, we'll focus on these a little bit later on in the course. But this here is pretty much now our wrapper where all of our page content is going to be injected. As we switch between pages in Inertia,
06:16
we know that there is technically no page refresh. We're not making an entirely new request to our application. What we're seeing is this content within here get injected in on the client side
06:30
based on which page we're being requested. And all of the data that we're sending down from our controllers is also being sent along from that request to be populated within each of the pages that we create.
06:42
So lastly, how is this application actually built up? When we run npm run dev, what is actually going on here behind the scenes? Well, in every application, when you build it with Laravel,
06:52
we have an app.js file, which usually just includes this bootstrap file, which doesn't contain anything Inertia-specific here. It's just things like Axios
07:02
that we can use to make HTTP requests. And we've got Laravel Echo here as well for real-time stuff. So that hasn't changed at all. But what has changed is the fact that in here,
07:13
we're creating an Inertia app. We're resolving so Inertia knows how to resolve our pages. And we know that all of our pages live in this pages directory here.
07:24
So this basically will pass through the name of, if we just head back over to our web routes, this here. So this will get passed into here so Inertia knows how to resolve each of our pages.
07:36
And then we have this setup method, which in this case is just rendering out a normal view application. The only difference is it's using the Inertia plugin.
07:46
So we have Inertia-specific functionality. So when we run npm run dev, we're creating an Inertia app. We know how to resolve page names.
07:56
We also know how to mount this as well. So the view app itself is being mounted to the element, which if we head back over to our app file lives here. So this is truly a single page application,
08:08
but it's just hooked up to Laravel in the way that we have already spoken about at the start of the course. So really that is all we need to know for now.
08:16
We know that the routes that we have in our web file are defined out exactly how we normally would. The only difference is we are rendering a page using Inertia and that is a view component.
08:28
So we're going to spend most of our time within the web routes. We're still going to create controllers in exactly the same way.
08:34
We're still going to apply middleware in exactly the same way. But the only difference is, instead of spending much time
08:40
inside of our views section just here, in fact, we're going to spend no time in there at all. We're instead going to spend our time in this JS folder, which contains now all of our pages
08:52
for this app that we're going to be building out. Now, for the rest of the course, we're going to try and stay away from anything that's included within Laravel Breeze,
09:00
just so we don't confuse ourselves. So we're going to just be creating pages in here, not really utilizing any of the components that Breeze comes with
09:09
because that's just very specific to Breeze. And if you want to use Inertia with another starter kit like Jetstream or you want to install Inertia from scratch,
09:19
then this isn't going to be relevant. So now that we have our app built up and we've taken a quick look around, we can move over to learning about Inertia.
28 episodes•2 hrs 20 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!