Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

02. Getting set up

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

We're starting out here with a completely fresh Laravel installation. So if you're following along, however, you create a new Laravel project,

00:07

go ahead and do that first. I've not modified anything about this just yet. So the first thing that we're going to do is head over to our EMV file and go ahead and switch over our database connection settings.

00:18

So I'm going to switch mine over to Postgres. That's what I'm using here. And we'll keep the Inertia forum name here. I've already created that database, and I'll just go ahead and add my username in.

00:30

So once we've done that, we're going to go ahead and install Laravel Breeze. So let's go to the installation section here and just pull in the dependency for this, first of all. And while that's finishing, let's head down to the Breeze and React view section.

00:45

We're going to install this for view. Now, really importantly, we actually want to include server side rendering here. So we're going to go ahead and give in the SSR flag when we install this. That's going to create everything that we need to get server side rendering set up,

01:01

which we're going to be looking at as we go. Next thing we need to do is just migrate, do an npm install and do an npm run dev. So let's head over and do that once this is finished. OK, so first thing is a migration.

01:13

I've already created the database just here. Let's run php artisan migrate and let's run npm install and npm run dev at the same time that will install all of our dependencies and get us set up with a nice server.

01:26

So I'm using Valet so I can just use the name of the app here. But really, it doesn't matter how you're serving your app. The first thing I'm going to do is go ahead and register an account really quickly just to check everything's working.

01:37

And then we can go ahead and delete that account because we're going to need to modify the registration flow to include a username. That's really important. OK, it looks like all of this is working nicely.

01:47

So we're going to go ahead and modify the template that Laravel Breeze uses by default, because by default, what you see here is only for authenticated users. Let's have a quick look around and see what that looks like.

02:01

So if we head over to our web routes, first of all, and let's go down to that dashboard page, you can see it's rendering out this dashboard component. Our dashboard component lives over in resources, JS and pages.

02:13

And you can see that it's pulling in this authenticated layout. Ideally, what we want is a forum home controller that anyone can see without having to register first. It would be pretty pointless building a forum

02:24

that people couldn't browse without having to register an account. Although you can keep it like that if you want to. So let's go ahead and build this up and then we'll see what happens when we get to the point where we try and use that authenticated layout

02:36

for non-authenticated users. So I'm going to switch this route over to just a forward slash because we're not going to go ahead and need a dashboard in our case. And let's go ahead and give the name here as home.

02:47

And we're going to get rid of this closure and we're going to instead use a forum index controller. So let's create out a controller in here. And we'll call that forum index controller.

02:59

And it's going to look pretty much what we've just seen there look like the same. So forum index controller. And if we open up our controller and we head down and create an invoke magic method, we're just going to go ahead and use the inertia function helper here.

03:14

Or you can use the inertia facade to render out a homepage. So we'll put this in a forum directory and we'll call it index. And let's just do that forward slash. Let's go over to our pages section.

03:27

Should live under resources, JS and pages. And let's create out a new forum folder with index dot view inside of that. So I'm going to create out a template in here and we can actually copy the dashboard. So let's just grab the whole of the dashboard template here

03:43

and just put that in here. And let's get rid of you are logged in and we can actually get rid of the header in our case, because we're not going to be using headers in this.

03:51

So let's change this over to forum or home, whatever you want to say. And that's pretty much it, to be honest. So if we now are signed out and we try and access the homepage, you would expect that a user would be able to see this still.

04:05

Now, if we just take a look at this and see what's going on here. So dashboard is not in the root list. OK, so that's our first job. I'm going to head over to the authenticated layout

04:16

and if we look for dashboard that no longer exists. So we're going to switch that over to home. Let's go ahead and search for that further. We're going to switch this over to home.

04:26

This is just the link in the top menu that we saw earlier. And let's do another little look for this. And we'll switch this out to home as well and this to home. Or you could call it forum.

04:37

So let's actually label that as forum in there. And we'll do the same for that one as well. OK, so let's go over and there we go. So it works nicely.

04:45

We've got our page here. Now, if we're signed out and yeah, so already we see an error here because when we try and land on this page, you can see that cannot read properties of null, null being the authenticated user.

04:58

So what we're going to do with this authenticated layout is just modify it so anyone can be signed out to see this or in. And we just show different links at the top that we saw over here. So instead of our user dropdown, we want to show the login and register links.

05:13

So we're going to go and look for these settings dropdown. This is what we want to hide if the user is not authenticated. So I'm going to go ahead and add in an if statement in here to check page, props, auth and user.

05:25

Now, if you're new to Inertia, where does this come from? When we set Inertia up, which is done for us in this case, we have this handle Inertia requests middleware. This contains, if we scroll all the way down here, share.

05:38

What this is doing is it's sharing the currently authenticated user with all of our pages, which are just few components. They'll get passed in as props and we can go ahead and access them. So that's pretty much what we're doing here.

05:50

We're asking the current page props in that auth object and that user object. So we're basically with this check, just checking that a user is signed in. Now, that's still not quite going to work because we have other instances of where we're referencing the user.

06:05

So we can just say auth user and just check where this is. We've covered this. Let's look for this elsewhere. And we've got this responsive settings option.

06:14

So we'll do the same thing in here. And we'll say page props, auth and user. And if we head over now, that's working. So we can now be signed out to actually see this page, which is what we want.

06:26

Now, what we're going to do is we're going to add some login and register links just at the top here. We're not going to make this responsive. We can do that a little bit later.

06:34

But for now, at least we just want the correct links in there. But you can add these to the responsive settings options a little bit later. So we want to go back to the settings drop down here. And if the user is not signed out, so down here, we're going to create another div

06:49

with a V else, then these are the links we want to show to prompt the user to log in and register. Now, it doesn't look great at the moment, but that's fine. We can just go ahead and modify this.

06:59

Let's add in a nav link component, first of all, which exists already on this page. It's the same component as this one here. And we'll go and set the href to this. We already have our login and register routes already within Breeze.

07:13

So we can just reference this as login. And we're going to go ahead and set the active state on this to check whether the route current is login. OK, so let's go ahead and just unselfclose that.

07:29

And we'll just add a login in there and let's have a look. OK, so we've got a login link now, which we can click and go through to the login page. If you've not worked with Breeze before, by the way, if we head over to the web routes here, you can see that we've got this auth include down here

07:43

that just exists alongside of the routes. If we open this up, all of the route registrations are in here. So if you need to reference any of these other pages, you can find the names for them in here as well.

07:54

OK, so now that we've got this login link, it doesn't look great at the moment. So we're just going to add a couple of modifications to the outer container here. So we're going to go ahead and make these hidden by default. That's just on a mobile view.

08:09

We're going to set the space on the X axis to eight because we want these spaced out nicely on a small viewport. We're going to set the minus margin on the Y axis to a pixel like so. And we're going to go ahead and on a small viewport and upwards

08:27

set the margin on the left 10 and then on a small viewport. We're going to set flex so that actually displays it. And we're going to set a manual height here of 16. So these are just styles that already exist in here for this component here.

08:40

But now you can see it looks a little bit nicer. We've now got that same hover effect. It's the correct height and everything is nicely lined up. OK, so the second one is going to be to register.

08:50

This is really simple. Now we can just go ahead and modify this to go over to the register page. And if we head over, there we go. We can click on register to register an account

08:59

and we can click log in to log in if we need to. And of course, if we are logged in, that's now going to completely change. So let's go ahead and sign in. And yeah, this is an interesting problem.

09:10

We'll get to this in just a second. But now you can see we've got that drop down. Now, the issue we just saw when we logged in there, if we just go ahead and try that once more,

09:19

is this is trying to go over to a page that's predefined in our root service provider for the general home page. Now, this sets it as dashboard, because when we sign in, our home page is technically the dashboard.

09:34

We're just going to go ahead and set that to the home page like so. And that just means now when we go ahead and sign in again. We should be forwarded over to the correct page. So a little bit boring, but that pretty much wraps up our base template

09:47

by modifying that authenticated layout so we can use it for all of our forum pages whether or not the user is signed in. The last thing that we're going to do just before we go anywhere is install Laravel debug bar so we can keep an eye on our queries

10:00

and the speed of our app as we go. This is incredibly easy to install and works just straight out the box with inertia. And we're going to go ahead and pull this in and we'll see this working instantly.

10:11

Let's just wait for that to finish. And if we head over here and give that a refresh, we now have the debug bar open and we're going to be keeping an eye on this, particularly the query section, just to make sure we're not running

10:22

into any N plus one problems and just to keep an eye on our page load request duration as well. OK, so now that we've done that, we are ready to move over to the next episode where we're going to modify our registration to accept usernames.

62 episodes•6 hrs 54 mins•1 year ago

Overview

Ready to build a forum with Inertia and Laravel?

Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.

So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.