This episode is for members only
Sign up to access "Installing Inertia from Scratch" right now.
Get started
Already a member? Sign in to continue
Playing
10. Setting up Posts
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
So in this last section, we're going to go ahead and build a really simple post app that's going to bring everything that we've already done together so we can see Inertia working nicely within Laravel. So the first thing that we're going to do is just do a little bit of setup. The first thing is just to get rid of the two routes that we already registered. We kind of
00:18
want them out of the way. And obviously, that means that when we head over to the home page here, nothing's found. But we're going to build out a separate controller for that to work. We're going to run npm run dev because, of course, we are working in a development environment to build this. And we'll go ahead and start with just making out a post model. So let's go ahead
00:36
and create a post model with a migration and just very easily set this up. Now, we already have migrated our database. If you didn't do that earlier, go ahead and do that now. And we will go and set this up. So let's head over to the create posts table migration. Now, we're not doing this with user authentication. We're just going to go ahead and add in here some text. And
00:58
that's going to be the body of our post. So we can go ahead and migrate this. And that's just going to be an incredibly simple post here. All of these posts are going to be anonymous. So if we head over to the post model that we've created, let's just make sure we add in that the body is fillable. So let's add the body into there. And we should be good. Lastly, we're just going to go ahead and
01:20
create out a landing page for our posts. So let's make out a post index controller. And we'll go ahead and create out a route for this. And that will just live on the home page. So let's just say post index controller. And we should be good. We can give that a name if we want, but we're not going to have much navigation inside of here. So within our controller, let's create out an invoke
01:44
magic method. We'll go ahead and use the inertia helper to render out a view component. And we could categorize these. So just because we have this structure with pages doesn't mean we couldn't create a posts directory inside of here and then have index.view, for example, if that is how you want to structure this out. So we could just say in here posts. And if we go into post slash index,
02:11
remember, we don't need that view extension. That's going to work in exactly the same way. OK, so we've got this over on the home page. And if we head there now, we should just see the posts text output. So we've got everything pretty much set up and ready to go in terms of our structure. Let's just add some real quick styles to this index page. So this outer div here, we're just
02:32
going to add some tailwind styles in. We'll go ahead and set a max width to this of 3xl. We'll set the width to full and we'll set the margin on the x-axis to auto. What that's going to do is just give us a nice little container in here that we can pull in. We would just set a background color on that. You can see that that's just sitting in the middle there. So we'll go ahead
02:53
and set some padding on the y-axis and we'll set the spacing between any of the elements within here of 10. And that's just going to separate out things nicely for us. So that's a very, very basic structure for our page. We're now going to head over to the next episode where we're going to build the form and actually post through to our backend.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.