Build a Trello Clone With Livewire
Playing
02. A fresh Laravel app

Episodes

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

Transcript

00:00
If you're new to Laravel Livewire, let's create out a fresh Laravel project with Livewire installed and we'll figure out the best way to do this. OK, so if you've got the Laravel installer,
00:10
we're going to go ahead and create out a new project called Livewire Trello. If you don't have the Laravel installer, you can go ahead and grab this with Composer. OK, let's run this and let's go ahead and choose the starter kit. Breezy is perfect for this because it's pretty lightweight, gives us authentication functionality, and we can go ahead and in the next step,
00:28
choose the stack that we want. Now, for us, we want Livewire. This gives us two options between the Vault class API and the Vault functional API. Now, we're not going to be using Laravel Vault. We're going to be building out our Livewire components in the standard way, but we can go ahead and choose the Vault class API and we can just carry on building components as we want.
00:49
So let's go ahead and say that we don't want to support dark mode and let's choose Pest as our testing framework and we won't initialize a Git repository. Let's just wait for everything to build up. OK, now that's done, we're going to go ahead and choose the database that we want to use. I'm going to use MySQL here and we want to go ahead and run the default migrations. And if you don't
01:09
already have the database created, this will give you a step to create a database as well. OK, there we go. Let's go ahead and wait for this to finish and then we'll go ahead and open up everything and just take a look around. So once that's finished, open the project in your editor and you should have a nice, fresh project ready to go. Before we do anything, we're going to head over to
01:28
the command line and we're going to run npm run dev. The npm install command will have already been run for us during the setup process. And depending on how you're serving your application, I'm using Laravel Herd, you should be able to access this at a certain domain. So as you can see, we've now got a fresh project set up. I'm going to go ahead and register an account straight away
01:48
just to make sure that our database migrations have been run and we're connected up properly. And yeah, it looks like we are. So if we head over to the database, you can see, sure enough, all of our migrations have been run. That user has now been registered and we are now signed in. So from here, we can just start to build any of the pages that we need.

Episode summary

In this episode, we're kicking things off by creating a brand new Laravel project that we'll use throughout the course. You'll see step-by-step how to spin up a fresh Laravel app, install Livewire, and get everything set up for smooth development.

We'll walk through using the Laravel installer (or Composer if you don't have it) and create a project called Livewire Trello. We use Laravel Breeze as our starter kit because it's lightweight and easy to use for authentication out of the box. During the setup, you'll see how to pick Livewire as the stack, and we touch on the option between the Volt class API and functional API—although for this project, we’ll stick with standard Livewire components.

Next, we finish configuring some preferences for our new project—choosing Pest as our testing framework, skipping dark mode, and not worrying about Git right now. We'll also set up MySQL as our database, run the default Laravel migrations, and make sure everything is connected by registering a new user.

Once that's all running, we check that migrations worked and the user is in the database. We'll finish up by making sure the frontend tools are built by running npm run dev, and verify our new app is up and running (I use Laravel Herd, but any method works!).

By the end of this video, you’ll have a fresh Laravel app with authentication and Livewire ready to go, so we’re all set to start building out new pages and components next. Perfect foundation work done!

Episode discussion

No comments, yet. Be the first!