Learn Livewire
Playing
02. Installing Livewire

Episodes

0%
Your progress
  • Total: 2h 52m
  • Played: 0m
  • Remaining: 2h 52m
Join or sign in to track your progress

Transcript

00:00
Okay, so the obvious first step is to get a Laravel project set up and install Livewire. So we're going to go ahead and use the Laravel installer for this and we are going to call this Learn Livewire and once we've hit that let's go and choose the Breeze starter kit.
00:16
Now it doesn't matter if you don't want to use a starter kit but this gives us a nice base that we can just start to build stuff on. So when we choose a stack here we are going to choose Blade with Alpine. We're doing this because we're going to be manually installing Livewire and creating
00:31
out components. We also have a couple of other options here like Livewire with the Vault class API. Vault is a functional API for Livewire which we're not covering in this course but we do have courses on that. So we're going to choose Blade with Alpine and if you're not sure what Alpine is we will go ahead and discuss that as well. So we'll run through the rest of these options and
00:49
just choose whatever we prefer here and of course just wait for this project to be created. Okay so our application is created we are first of all going to go ahead and run our migrations so you'll either need to create a database or when it prompts you have that created and I have that open just here because obviously we're going to be working with the database here and creating
01:09
these books out. So we've got our application up and running here if we just give this a refresh we can go ahead and register an account and we'll do that just so we can get onto the dashboard of our site which is where we're going to pretty much be building out all of our components. So the next step is obviously get Livewire actually installed. So let's head over to the quick start
01:30
guide under Livewire and we only really need to do one thing here which just do a composer require on Livewire slash Livewire. So let's head over to our editor and go ahead and paste that in and that is Livewire installed. That's all we need to do here. Okay so let's go and look at creating out a very simple example component and see what we can do. So I'm going to head over to
01:54
Alpine very quickly just to talk about what this is. So Alpine is from the authors of Livewire. It's a javascript framework. Now once we get into the details of how Livewire actually works the reason for Alpine being bundled with Livewire will make a lot more sense but Alpine is bundled in with Livewire. So the basics of Livewire is that we write out a component which renders out
02:21
a blade view but that component is responsible for rehydrating data so it kind of feels like you're writing javascript. Let's take a look at that really quickly now. So we're going to go ahead and run php artisan Livewire and I'm just going to run that Livewire command. That's going to give us all of the commands now that Livewire has registered for us. So let's look at the ones
02:44
that we're going to use the most here. We've got Livewire make. This will create out a Livewire component for us and we'll see that in action in just a second and to be honest that's pretty much it. The majority of the time you're just going to be using make to create components out but we've also got things like delete form which we are going to be looking at to create out a
03:02
Livewire form class. So the majority of the time we're just going to run php artisan Livewire make and then we're going to create a component now. So let's create a very simple example component here. We're just going to call this example and let's take a look at what's happened here. So we've got a class created here so we've got a php file and then we've got a view created here
03:23
which is a php file but this is responsible for outputting our views. So let's go and take a look at each of these before we go ahead and actually get this on the page. So our component here is very very simple. All this does by default is give you a render method that hooks up to the view that has just been created. So it references the view that blade file that we've created. So kind
03:48
of like you'd normally do in a Livewire application when you return a view and you see the blade file being rendered on the page. So if we open up the example.blade.php file it won't come as a surprise that this is just html. So I'm going to go ahead and stick something in here. Let's just write example out in here and what we want to do now is get this rendered out on the page somewhere and
04:10
we're going to do that just in our dashboard where we currently see you are logged in. So let's head over to our dashboard.blade.php file. Now because Livewire uses blade but makes updates with javascript we can just include the Livewire component within any of our blade files. We can also include Livewire components within other Livewire components because of course they are
04:33
just using blade files. So let's go ahead and swap this you are logged in text out for our Livewire component. Now there's a couple of ways to do this. The most used way is to go ahead and create a Livewire tag and then in here we give the name after a colon of the component. So in this case our component is called example. We can have more nested components and then this will slightly
04:57
change but we'll see that throughout the course. So that is pretty much it. We've got our Livewire component on the page and if we give this a refresh sure enough we see example. Now at this point it's probably a good idea to go ahead and run npm run dev just so all of our assets get compiled and just open up a new terminal in here so we can run any other commands. So that will just
05:18
automatically update your page for you without you having to do anything. So congratulations that is your first Livewire component. It doesn't do much at the moment but in the next episode we're going to be looking at building out a more interactive component that actually does something so we can see have a look at our network tab and inspect what is actually happening and actually see this
05:40
rehydrate despite the fact that this at the moment just feels like a normal blade file. Okay great so that is pretty much what we've done. I'm just going to take a look at the structure of our app just so we can get a real good feel for where these things are created. You can see under our main app directory we've now got a Livewire folder. That is where all of our Livewire classes go and if we
06:02
look inside no surprise our views we have a Livewire directory here which contains our blade files. So if you need to find anything that is where they are. Okay so we've got a fresh Laravel app installed. We have installed Livewire. We've created out a very simple static example component. Let's make this a little bit more interesting in the next episode.

Episode summary

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.

Episode discussion

No comments, yet. Be the first!