This episode is for members only
Sign up to access "Build a Forum with Inertia and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
02. Getting set up
Episodes
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%
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•2 years 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!
Episode discussion
No comments, yet. Be the first!