In this episode, we kick things off by setting up a brand new Laravel project, which we'll use throughout the course. We're using the Laravel installer and, for convenience, adding the Breeze starter kit with the Blade + Alpine stack. While Breeze is optional, it gives us a nice base to work from, and the Blade with Alpine option pairs well with how we'll be installing and using Livewire.
Once the base app is ready, we run our migrations, make sure the database is set up, and register a user to access the dashboard where most of the action will take place. Then, we install Livewire itself using Composer—a super quick step!
Before jumping in too deep, there's a quick explanation of Alpine.js, which is a JavaScript framework from the same authors as Livewire. Alpine and Livewire often go hand-in-hand, and you’ll see why soon. For now, just know it’s bundled in and used behind the scenes to give our components interactivity without much hassle.
With everything set up, we use Artisan commands to create our first Livewire component called Example
. We look at what files are generated (a PHP class and a Blade view), hook this up in the dashboard, and see our new component rendered on the page. It's basic for now—just showing the word "example"—but this is a solid start.
Finally, we check out the new folder structure Livewire adds to our Laravel app, so you know where to find your components and their views. That's it for setup! In the next episode, we'll start making our component interactive and really see Livewire in action.