Bootstrap a Laravel Application and Install Reverb — Transcript

Transcript of the free Vue.js lesson Bootstrap a Laravel Application and Install Reverbwatch the video lesson.

In this lesson, let's set up a new Laravel project. I'm going to do this with the official Laravel installer. In the terminal, let's type Laravel new and then the name of the project. I'll call it Laravel Reverb Course, but you feel free to name it whatever you'd like.

After I hit enter, we're presented with a prompt. Would you like to install a starter kit? Yes, in order to get started with Laravel and Vue most quickly, we should install Laravel Breeze. vue files in place for our pages.

Plus, this also bootstraps things like the authentication system with the login and registration pages. Next, we want our Breeze stack to include Vue with inertia. So Breeze can support other setups as well. Of course, we want to use Vue.

Finally, would we like any optional features? Sure, let's go for dark mode. And really, I don't want to mess with any of the others. So this will work fine.

Finally, which testing framework do we prefer? I'll go with Pest, but we won't be doing any testing during this course. Oh, and one more question here. Do we want to initialize a GitHub repository?

You don't have to, but I certainly will. Now, while that's installing, Let me just say that if you don't already have the Laravel CLI tool available, you could install it globally with Composer. You'll know that immediately if you try to run the command like I did and got a command not found error. I've left a link to more info for this in the description below.

Now, we'll just need an SQLite application, as we really won't be working with much data persisted to a database. Now that the project's set up, let's open it up in VS Code. by typing code and then the name of the project. Now it's time to install Laravel Reverb.

I'll open the terminal inside of my project here and type php artisan install colon broadcasting. This creates a broadcasting configuration file and a channels route file. We'll look at those closer in just a moment. For now though, we need to answer the question, would you like to install Laravel Reverb?

Remember, you can do real-time data in Laravel without reverb. However, the easiest way nowadays is just to use this first-party solution. So I'll choose yes. After all, that's what this course is about.

Behind the scenes, some things get installed for us, and now we would like to install and build the node dependencies required for broadcasting. This just gets the JavaScript side of things set up for us. Now I'm going to close out my terminal and let's take a look in the source control for my project to see what all of this command actually changed. loc file.

These changes just record the actual dependency changes. So nothing really exciting there. json2. php.

Here we have a channels file where we can register all of our channels included into the project. These channels allow you to group various events together and provide rules in one place to who has access to those events. php file, you'll notice that we have an example channel set up for us. user and a variable ID.

The callback function determines who all receives the event and the browser. We'll talk about this more later on in the course. php, we have all the various configuration options for broadcasting set up, and they are all set to use the reverb stuff out of the box. php configuration file.

This allows us to set up all things reverb. emv variables. emv file, these variables have actually been added for us as well when we ran the command. So nothing new for us to do there.

You can of course change these to fit your exact needs. but the defaults work for our situation and will probably work for you in production as well. Finally, we have a couple of JavaScript files that have been changed. js file here just includes some dependencies on the window for our view application to use.

It has imported Echo at the bottom. And right here, you can find Laravel Echo being set up as well as Pusher and assigned to the window. Echo is the way that we're going to listen for these server-side events in our Vue application. Since this is automatically written for us during installation time, there's really nothing left for us to do except use Echo to listen to the events.

And that's it. Now I can add all of my changes, commit them to my repository, and I'm ready to start working with Layer Valve Reverb.