Playing
02. Setting up
Episodes
01. Introduction
2m 53s
0%
02. Setting up
1m 38s
0%
03. Scaffolding chat rooms
6m 11s
0%
04. Building a chat textarea
8m 38s
0%
05. Seeding fake messages in order
4m 8s
0%
06. Creating a Pinia store
3m 48s
0%
07. Creating the messages endpoint
5m 9s
0%
08. Fetching messages into our store
4m 18s
0%
09. Ordering messages with flexbox
3m 59s
0%
10. Using the intersection observer API
5m 5s
0%
11. Fetching and pushing previous messages
3m 15s
0%
12. Storing and appending messages
6m 18s
0%
13. Setting up Reverb
3m
0%
14. Broadcasting new messages
9m 49s
0%
15. Handling broadcasted messages in our store
4m 54s
0%
16. Fetching online users
3m 6s
0%
17. Storing online user state
4m 46s
0%
18. Keeping online users in sync
5m 50s
0%
19. Detecting typing events
3m 56s
0%
20. Showing when a user is typing
8m 3s
0%
21. Better formatted dates
2m 44s
0%
Transcript
00:00
So let's go ahead and set up a fresh inertia project. If you've already done this and know how to do this, feel free to skip to the next episode. OK, so we're going to start with the Laravel installer.
00:09
Let's use Laravel new and we'll just give our project a name. I'm just going to call this inertia chat. Once we've done this, we want to choose the Laravel breeze starter kit, which gives us authentication.
00:19
And once we've hit that, we can choose any of these options here. We're, of course, going to use view with inertia. So let's hit that. OK, so we don't want any of these optional features.
00:29
Let's go with pest for our testing framework and we won't initialize a repository. OK, once that's done, let's go ahead and choose our database. I'm going to choose my SQL and we want to go ahead and run the default migrations here. So all of the users tables and everything like that gets created.
00:46
Once that's done, you should end up with a database with all of your tables in. Once we have done that, we can go and open this up in our editor, get npm run dev running and make sure everything is working. So let's go ahead and open this up in our editor.
01:00
Just wait for this to finish. And the first thing that we'll do is run npm run dev on the command line wherever you're using that. OK, so once that has done, we're going to head over to the browser.
01:12
Once again, depending on how you're hosting this, it might be different, but I'm using Laravel herd. So let's give that a refresh. And as you can see, our app is up and running.
01:22
Let's go over to register an account just to make sure that this is working nicely. So let's go ahead and enter all of the credentials we want to register with. Hit register and we should be in. So as long as you're at this point, you have a project set up with Inertia ready to go.
21 episodes•1 hr 41 mins•10 months ago
Overview
Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management.
We’ll cover:
- Using the Intersection Observer API to automatically load previous chat messages
- State management with Pinia
- Using presence channels to show online users for each room
- Client-to client communication to show who’s typing
- Using flexbox tricks to keep messages scrolled into view as they roll in
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!