Playing
02. Setting up

Transcript

00:00
So if you are new to Laravel or LiveWire, we're going to take this episode just to get a fresh Laravel project set up with Laravel Breeze,
00:06
which is a starter kit for Laravel. We're going to manually install LiveWire, and then we're going to do something really important, which is disable Alpine JS within that Breeze starter kit.
00:16
That's really important because LiveWire version 3 comes with Alpine already bundled, and that means we could potentially get a conflict. And a little bit later on when we look at our Intersection
00:27
Observer API using an Alpine plug-in is just not going to work. So we're going to go ahead and get started with a completely fresh project.
00:35
So let's go and use the Laravel installer here to create out a project called LiveWire Infinite Scroll. Now, we're going to use the Laravel Breeze starter kit
00:43
here. We can choose LiveWire with Alpine here, but we're going to do this manually just so we can see the steps.
00:49
And we don't really care about dark mode support, and we'll just choose any testing framework here and not initialize a Git repository. So we're going to wait for this to finish, and once it's done,
00:59
we'll get everything set up. We'll register. We'll get on our dashboard. We'll pull LiveWire in, and we will make sure it's working.
01:05
So the application our database is going to use is MySQL here. I already have a fresh database created called LiveWire Infinite Scroll. And let's just wait for this to finish, and we are good to go.
01:18
OK, we're done installing now. Let's head over to our browser, and you can see that our app is open. We're going to go ahead and migrate our database now.
01:25
If you need to make any changes, of course, come over to EMV and just update your connection settings. And of course, I already have this database created. So we're just going to go ahead and run
01:34
phpr to migrate here, and we should be good. OK, so I can go ahead and register an account now. The dashboard is where we want to be on, so we can put our LiveWire component
01:44
for our infinite scrolling in there. So we are now logged in on our dashboard and ready to go. So we can go ahead and install LiveWire now by just grabbing the Composer Require command for LiveWire.
01:57
Pretty straightforward. That's really all we need to do to get LiveWire version 3 installed. We don't need to add anything to our main app file.
02:06
We are good to go. So to test this, we're going to go ahead and create out an example component if you are new to LiveWire. So we're going to go ahead and say LiveWire Make,
02:15
and let's just call this Example. So if you are new to LiveWire, this has created two files, the class and the view. The view is, of course, where we render everything out and show
02:25
what we need to do, and the class contains all of the standard PHP stuff that you'd find. So we're going to go and just head over to our dashboard.blade.php file, and we're
02:36
going to go ahead and output this LiveWire component just inside here just to make sure everything is working. So if we head back over to our app here, give this a refresh, hopefully you don't see any errors, and we are good.
02:48
So now that we have our component in there, let's just go ahead and add a really simple example to this. So over in the Example.blade.php file under Resources, Views, and LiveWire, this is where our content goes,
03:04
and we have that Example.php class over in App and LiveWire where we can pass stuff down to our views. So let's just go ahead and create out a public property in here with a greeting.
03:14
So let's just say greeting, and we'll just say hello, and we'll go ahead and output this on here in the normal way that we do with Blade. OK, good.
03:28
So give that a refresh. We see hello. We pretty much know now that LiveWire is working. OK, so we're going to go and just take a look at our app.js
03:38
file over in here. I said before that when we install LiveWire v3, this automatically comes with Alpine because LiveWire uses Alpine behind the scenes.
03:48
So what we don't want to do is have two instances of Alpine running because this is going to cause problems a little bit later on. So we're going to go ahead and just get rid of this Alpine import, window.alpine assignment, and the Alpine start initializer,
04:03
and that's pretty much what we need to do. Now, we haven't even run npm install and npm run dev yet. Good idea to do that now just so everything builds and is working, and we can open up a new tab here to run any other commands.
04:16
So there we go. A fresh Laravel Breeze app with LiveWire installed and the inertia problem sorted out, which is going to be a problem later if we don't remove it.

Episode summary

In this episode, we start fresh and set up a new Laravel project from scratch, just in case you're new to Laravel or Livewire. We'll be walking through the whole installation process together so you won't feel lost, even if this is your first time.

We'll use Laravel Breeze as our starter kit for a super clean setup, but instead of letting Breeze handle everything automatically, we'll manually install Livewire ourselves. The reason? Breeze includes Alpine.js by default, but Livewire v3 already comes bundled with its own copy of Alpine. Having both could cause conflicts, especially with features we'll use later like the Intersection Observer API. So, we carefully disable Alpine in Breeze to keep things smooth and avoid future headaches.

We'll spin up a demo project, create the necessary database, and walk through creating a basic Livewire component to make sure everything works correctly. We even set up a quick property and rendering example, so you'll see Livewire in action right away.

Finally, we'll double-check the JavaScript setup, prune out any unnecessary Alpine imports from the build, and get npm scripts running so everything is up and ready. By the end of this episode, you'll have a brand new Laravel + Livewire project—with the tricky parts handled—and be set for the rest of the course!

Episode discussion

No comments, yet. Be the first!