Installing Inertia from Scratch
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

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

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.

Episode summary

In this episode, we kick off the process of building a simple posts app to bring together everything we've learned so far about using Inertia with Laravel.

We start by cleaning up our routes to make way for our new posts functionality, then set up our development environment. Next, we generate a Post model with a migration, defining an anonymous 'body' field since we aren't worrying about user accounts just yet. After running the migration, we make sure the Post model is fillable for the 'body' attribute.

With the backend ready, we set up a posts controller that handles the main page for viewing posts. This involves wiring up a route and setting up a simple Inertia-powered view. We keep things tidy by creating a 'posts/index' Vue component, laying the groundwork for our interface.

To finish, we style the posts index page with some handy Tailwind classes, making it look neat and centered on the page. By the end of this episode, we’ve laid down the basic structure and are all set to start building out the form for actually creating posts in the next episode!

Episode discussion

No comments, yet. Be the first!