In this episode, we kick things off by setting up our environment for building with Livewire. If you're totally new to Livewire or even fairly new to Laravel, don't worry—we walk through all the basics step by step.
We start by creating a fresh Laravel project using the Laravel installer and set it up with the Breeze starter kit, opting for Blade and Alpine (but not Volt). We breeze through the options and settle on using MySQL for our database. Once that's set, we migrate our database and load up our app in the browser to make sure everything is running smoothly. We even register a test account to have access to the dashboard, which is where we'll be working.
Before diving into Livewire, we tidy up our Blade dashboard by reducing its width (to give our forms some breathing space) and make sure our assets are compiled with npm run dev. Then, there's one crucial gotcha we address: since Livewire bundles Alpine.js, we make sure to remove any import of Alpine we already have in our app.js file to avoid double loading issues.
From there, we go ahead and install Livewire via Composer, and after setup, we create a super basic Livewire component called 'example' just to check that everything's working. We drop it into our dashboard to see it in action. For anyone scratching their head about how Livewire components work, there's a quick overview of the files created and where your logic/template code lives.
Finally, we talk through the structure we'll use going forward: using a wrapper Livewire component with individual components for each step of our multi-step form. By the end of the video, your environment should be ready to start building out the real features in the next episodes!