Playing
02. API and Client setup
Episodes
01. Introduction
02. Realtime Basics with Nuxt and Laravel
03. Private channels
04. Broadcasting to others
Transcript
00:00
OK, let's go ahead and set up both of our projects. The API, obviously, within Laravel and the client with Nuxt. So I've already created a folder here just to house both of these projects. Let's go ahead and get started first with the Laravel project.
00:13
We're going to call this real time Nuxt Laravel. We're going to give the client a slightly different name, but we're going to change over the domain within Nuxt to hook this up so they share the same domain.
00:24
That's going to be really important when we start to look at authenticating and looking at private channels. OK, let's create this Laravel project out. We don't need a starter kit here because we're just using this as an API.
00:36
We can use any testing framework and we'll just wait for that to run through and choose our database. OK, let's go ahead and choose MySQL as our database. And let's go ahead and run the default migrations and create that out.
00:48
OK, so now that's done, let's go into that directory. So real time Nuxt Laravel. And let's go ahead and open this up in our editor. OK, now that's open.
00:57
There's not really much we need to do here. We're not even going to be spending much time in the API. Let's go ahead and create out our client project now. So to do this, we're going to use NPX Nuxty latest
01:07
and we're going to initialize a project called real time Nuxt Laravel client. Like I said, we're going to change the domain. Let's go through the steps to create this and we'll get this in our editor as well. So we can choose any package manager here.
01:18
It doesn't really matter. And let's just wait for them dependencies to install. OK, we're going to get a couple more questions here. We don't necessarily want to initialize a Git repository
01:27
and we are pretty much ready to go. So let's go ahead and open this client up in our editor as well. And then we'll merge these two projects together. So let's go ahead and merge these projects.
01:38
And now we've got two projects that we can nicely switch between. OK, so a little bit of housekeeping with the client. Let's go ahead and first of all, run npm run dev to get this booted up. So if we head over to the browser, sure enough, we have got our Nuxt app
01:52
working on localhost port 3000. We've got our API running on real time. Nuxt Laravel test. I'm using Laravel herd here, but it shouldn't really matter what you're using.
02:02
The key thing here is that we want the domain for Nuxt to match up with our API. The reason being is that when we get to authenticating on private channels, we're going to need some sort of authentication functionality within our app. And for Sanctum, Laravel Sanctum to work, we're going to need the domains to match.
02:20
And we'll cover that a little bit later. But the important thing for now is getting this domain to match up. So how do we do this? Well, within our client, we can go ahead and open up the Nuxt config file
02:31
and we can choose the dev server options. So let's go ahead and pull this in and let's go ahead and choose the host here. So we just want this to match up with what we have over here. So we'll grab the entire domain that we have here
02:43
and we'll go ahead and paste that in. That's pretty much all we need to do. So if we go over to our application now, we should be able to access this. At the domain that we've just specified on port 3000,
02:54
we're going to have to go ahead and close off npm run dev and rerun it to get this working. You can see that domain is now active. If we come back over, there we go. OK, let's finish up by doing a little bit of tidying up within this Nuxt app.
03:06
We're going to keep things pretty plain. So let's go over and work on app.view. We're going to get rid of the Nuxt root announcer and the Nuxt welcome. And let's just put some text inside of here.
03:17
And if we head over, there we go. We've got a nice plain app. What you can also do if you want to, we're not really going to be using it is you can go ahead and disable the dev tools here. Go ahead and enable it if you need to at any point.
03:28
But now we have a nice, fresh Nuxt app. We have an API that we can make requests to. Obviously, we're not going to be opening that up in the browser, but we are ready to go with both of our projects now.
12 episodes•1 hr 2 mins•2 months ago
Overview
Using Reverb and Laravel Echo, let’s add real-time broadcasting to a Nuxt SPA, driven by Laravel.
We’ll start with the basics of public channels without authorization. Once we’re set up and able to broadcast to all clients perfectly, we’ll dive into authentication and authorizing private channels by modifying how Laravel Echo authorizes with our API.
By the end of the course, you’ll have everything you need to start adding real-time broadcasting to your Nuxt/Laravel applications.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!