Setting up: Build a Livewire Comment System

Build a Livewire Comment System

Sign in Get started

Playing

02. Setting up

Transcript

00:00

Let's do a little bit of setup. So we're ready to drop our comment component into somewhere on something that we can comment on. So we're going to start things out in a completely fresh Laravel project

00:11

with Livewire already installed with creating out an article page. Let's go ahead and do that now. So let's make out a model here and we'll call that article. With the migration alongside of it, let's go ahead and open up that

00:23

create articles table migration. And we'll just fill in the very basic data about this. So let's just say we've got a title in here and let's also add in a slug and we'll make that unique.

00:37

I think that's just about enough to prove what we need to do here. So let's go ahead and run our migrations. We're then going to immediately create out a Livewire component. So let's go and make an article show component and let's go ahead and

00:51

register this directly as a route. So if we open up our web routes here, let's just grab any of these and we'll say articles slash. And then we'll use article for route model binding.

01:02

Let's make this a get request and we will directly hook it up to that article show in here. So over in the database, let's go ahead and create a fake article in here. We'll just call it an article and let's provide a slug for this as well.

01:19

And we should be good. Let's just take a look here. Okay. So I'm going to head over to the browser.

01:23

Let's go over to articles and an article. And yeah, sure enough, the full page component that we've just created, can't find a layout. So if we head back over to the editor and open up the article show component,

01:34

what we can do here is use the layout attribute, and then we can just point it to the layout that we want. So we just take a look at where that is. It's in layouts and app.

01:44

So we just need to say, say layouts.app and we should be good. And yeah, there we go. So the only issue that we've got here is that the layout that comes with Laravel breeze by default needs you to be signed in to have the menu at the top.

01:59

So we're just going to make a quick modification to this, just so we can see what we're doing. So if we go over to layouts and app.blade.php, and we look for anywhere that the user is being referenced.

02:11

So let's just say auth and, and I think it's in the navigation partial here. Yeah. So the navigation is used with this. Let's go and look for wherever the user is being used and you can see

02:23

we've got this settings dropdown just here. So what I'm going to do is just wrap this in an auth check and use this auth directive. So let's end out there and we'll look again because we should have a responsive settings option and we'll do the same for this as well.

02:39

So we're basically just getting rid of that if the user is not signed in. Okay. If we head back over to the browse now and give that a refresh, there we go. So anything up there that would have tried to show the authenticated

02:49

user is now no longer there. Okay. So we're going to go ahead and grab the dashboard template. So if we go over to the dashboard that we get by default with breeze, let's copy

02:59

all of this over minus the app layout, and we'll put that into our article show live by a template. So let's paste all of this in and get rid of the app layout because we've already defined that as a full page and let's hop back over, give that

03:14

a refresh, and there we go. So what we're going to do from here is just go ahead and change this to the article title, which we don't have just yet. We'll fill that in and then I'm just going to modify this slightly.

03:25

So let's just make this a little bit smaller and we'll also make sure that we're running NPM run dev as well. And let's check this out. And yeah, that looks just about right to me.

03:35

So we can add the article content inside of here, and then we could create another wrapper down here that will be all of our comments. So just a really basic layout to get us going and we could space this out a little bit as well, I guess.

03:49

So let's do a space Y of let's say eight on there and yeah, we'll bump it down. Great. So we've now got a nice layout that we can use. Let's go ahead and fetch this article under article show and

04:02

actually pass it down to the page. So to do this with root model binding, we just define this as a property inside of a live by a component. So we're just going to say article and we expect an article to be passed into here.

04:16

And that's pretty much what we need to do. This is now available inside of our article show template. So if we open this up for the article title, we can now just replace this out with our article title.

04:27

And sure enough, we're not doing this by slug. So last thing we just want to go ahead and make sure we're pulling that in by the slug and there we go. We have our article and our comments section.

04:40

So let's just change this copy over and we'll come over to our article show component here and just change this to the article body. That's what we'd want to replace out and we can start to build out our comments component now.

Episode summary

In this episode, we're starting from scratch by setting up a fresh Laravel project (with Livewire already installed) so we can prepare a place to drop in our comment component later on. First things first, we create an Article model and migration, keeping it simple by just adding a title and a unique slug.

After running the migration, we build an ArticleShow Livewire component and register a route for it that uses route model binding by slug. We seed the database with a fake article so we have something to display.

As we wire things up and visit our new article page, we bump into a missing layout error, so we fix that by specifying the layout in our Livewire component. There's also a quick fix needed with the Breeze layout: since it expects a logged-in user, we tweak the navigation so it doesn’t blow up if no one is signed in.

We then borrow the dashboard template from Breeze, strip out the unnecessary layout stuff, and customize it a bit—plugging in the article title and making the layout cleaner and more focused. We add a section for the article content and designate another spot for the future comments section.

To wrap things up, we use Livewire's props to pass the current article to the component and make sure we’re pulling articles by slug in our route. Now we have a nice, basic article page with a comments section ready for building out next!

Episode discussion

No comments, yet. Be the first!