Winging A Laravel Comment System
Playing
01. Fresh project and setup

Episodes

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

Transcript

00:00
Obviously, the first thing that we want to do is actually create a project, but then we're just going to go through some housekeeping tasks.
00:06
We're going to get some packages installed that I know we're going to use along the way already. We're going to add some configuration for our models, like unguarding them. We're going to bring Tailwind in. We're just going to get everything set up in a way that we can just start to build this out. We'll also go ahead and create a sort of base layout for our application as well.
00:25
And we'll just style everything as we go. You don't need to use Tailwind. You don't need to pull in these packages. But this is generally what I do when I start up a completely fresh Laravel project. So first things first, we actually need the project itself. So we're going to use the Laravel installer to create our project.
00:42
I'm just going to call this comments. For the starter kit, we're not going to use any. We're just going to do this completely from scratch here. So I'm just going to choose none. And we're going to wait for the preliminary installation. And it's going to ask us about our database once that is done. So we'll just wait for this.
00:57
And there we go. So we're going to choose MySQL here. Of course, you can choose anything you want. And we do want to run the default migrations, which require the database to be created as it isn't already. So we're going to go ahead and say that we want to create that database. We don't need to run NPM install and NPM run build right now.
01:14
We can do that once we're in our editor, but that's now our project created. So I'm going to go and cd into comments and I'm going to open this up with PhpStorm. And of course, open it up with whichever editor you're using. OK, so once this opens up in PhpStorm, I am now going to go ahead and run NPM install just to pull in all of our dependencies.
01:36
And then we're just going to come over to the browser and just make sure that we can actually see this in the browser. And yeah, sure enough, we can. So first thing, let's just do a little bit of tidying up. So if we head over to our web routes, of course, we have this welcome view, which we're not going to use. So I'm actually going to go ahead and delete that as well. So if we go into views and welcome, we'll get rid of that.
01:59
CSS and app.css already has Tailwind pulled in, so we don't actually need to install that. So that's already good to go. So let's go ahead and just return a view here. And I know I could have just sort of replaced that out, but I'm going to create out a view here called home just to keep things simple and render that. That's just going to be a basically an empty page.
02:25
And let's go over to home.play.php and just make sure that Tailwind is all good and all working. So let's just say bgblue500 and let's just say home just as a test. And of course, I'm going to run npm run dev to compile everything as we go. And I'll create out a separate tab for any of the other commands that we want to run.
02:45
So if I just give that a refresh at the moment, this isn't working. So this is where we've already got Tailwind pulled in, but we're not actually pulling in our Vite compiled assets. So to do this, we need a sort of general layout to our application. So the easiest way to do this is to create out a Laravel component.
03:02
This is always what I like to do on pretty simple projects. So we're going to go ahead and run the make component command with Laravel Artisan and we're going to call this layout. So let's put this in a layouts directory and let's call this app. Now we're going to pass in the view flag because we don't need an associated class to this component.
03:27
We might do later, but for now, at least we just want this to be a simple blade component without a class associated with it. So now that we've got that, where is that going to be created? Let's go over to resources and under views and under components. And you can see that it's directly in here.
03:44
So what we can do with this now is we can make this our overall layout. I can just auto generate this in here. We can add a title, which we'll change over a little bit later, depending on which page we're on. But really importantly now in the body, this is where we can inject this content in.
04:00
So I'm just going to inject in the slot variable, which will be whatever we put inside of this component tag whenever we create it. So let's go over back to our home page. And what we're now going to do is wrap this in X. And this is just how we start blade component layouts dot app.
04:17
Because remember, our app layout is within this layouts directory. So that's why we do a dot. We just separate that out with dot notation. Now we put this inside.
04:28
And now this is going to get injected inside of that app layout. Now, nothing is really different at the moment. Tailwind is still not pulled in, but you can see that the title has taken effect. So we do know now that this has actually injected this content in properly.
04:42
So what do we do now to get Tailwind actually working? Well, we come over to our template here and we use the beat directive within Blade. And we are going to be using JavaScript at some point. I'm going to pull both of these resources in.
04:56
But we're going to go into resources, CSS app dot CSS. And we're going to go into resources, JS app dot JS. And we're going to put both of them in. That will pull them in and basically create them as like link elements within the page.
05:08
And when we give this a refresh, you can see that that is now taking effect. And you can see these just in here. We've got a script in here. We've got a link with a relative style sheet.
05:16
Everything that you would expect. But that is now being injected in. And we now have Tailwind installed. So over in the home page, let's go ahead and just get rid of this.
05:24
And I am just going to write home in here. That's all we really need to do for now. Okay, so a couple of other things that we're going to do. I'm going to come over to app service provider.
05:33
And under boot, I'm going to go ahead and unguard all models. So we're going to say model, unguard. There's a couple of ways that you can do this. You can do like a general database complete tweak or an application reset for any of the models that we're working with.
05:49
We're not going to go too deep. We're just going to say model, unguard. That just means that we don't need to go into individual models and set the fillable parts of this. So we can actually get rid of this inside of here.
06:00
I always do this just because when I'm building something, I don't really want to add fillable fields. I trust, particularly when we write tests, that we're going to be filling these in. Same with hidden as well. Because we're not going to be returning any sort of JSON responses here, we can get rid of hidden.
06:17
Casts, we can still use. That's really important. But we're just sort of tidying stuff up here and creating sensible defaults. You do not need to do this, though, if you prefer to add fillable fields.
06:27
Okay, let's just think about what else we need to do here. The other thing I'm going to do is I'm going to do a composer require on Laravel debug bar. I'm going to want to monitor that as we go, both memory usage, database queries, and that will give us a really nice little dropdown here.
06:44
And, of course, there's a couple of other configuration, a couple of things that we can configure as well. So over in EMV. So let's just take a look here. So we've got app debug true, app name I'm going to set to comments,
06:55
and we'll come back to the title in our app layout in just a second. What else can we do here? So let's just take a look at some of these defaults. The database is good.
07:03
We set that up. Session driver is set to database. Now, that's absolutely fine. It would be best to sort of Redis, but we'll leave that as it is for now.
07:11
We've got our broadcasting, which we're probably not going to be using. File system and queues, which we're probably not going to be using. And same for the cache as well. So we could change these over, but I think for now, to be honest, we'll leave these out.
07:23
We are going to be introducing possibly email a little bit later when we get to notifications, but we'll see. OK, so I think that's it for the general configuration, but we do want tests up and running. So I'm going to go ahead and get pest installed. Now, if we come over to the pest installation instructions, the first thing that we want to do is remove PHP unit.
07:44
So let's go over and run that first of all, just to get rid of that. And the next thing is to go ahead and requiring pest with dependencies. So we can go ahead and run that as well. Let's just wait for that to finish.
07:58
The next thing we want to do here is make sure that we initialize pest so we can run the vendor bin pest command. For me, I can just run pest in it, but it depends on how you've got your aliases set up and you can show love by starring it. I'm not going to at the moment. OK, so now to run the test, we just run pest.
08:15
We're not going to do that just yet. The other thing I want to do here is look for the Laravel plugin. So let's just find the Laravel plugin here. It's going to allow us to create tests a lot more easily from the command line.
08:27
So I'm going to go ahead and pull that in. And that's pretty much what we need to do to get pest up and running. But let's just take a look at the directory structure of this in case you're new to testing, just so we can see. So we've got our database factories, migrations and seeders.
08:42
And under our test directory, we've got our feature and we've got our unit directory. Let's just take a look at these tests. These are written in PHP unit style. So I'm going to get rid of that and I'm going to get rid of that.
08:54
We do have now a pest.php file, which is sort of like the root of our testing stuff. We're going to uncomment refresh database within our feature test because we do want to go ahead and re-run our migrations every single time. It's pretty much all we need to do in there. So we're going to create out an example feature test.
09:16
So let's just create a test for the homepage. We might as well in this episode, just to make sure we've got everything running. We'll write a test to make sure that we can hit the homepage and we get a successful status back. So we're going to go ahead and say make.
09:29
We're going to say make test or we're going to say pest test. We're going to say pest test. And we are going to put this in a controllers directory. We don't have a controller at the moment, but we'll refactor at the end of this episode.
09:43
And we're going to say home controller test. So it's just going to be a really basic smoke test just to make sure that this is working. And just to keep that unit directory sort of open, I'm going to create a example test and I'm going to flag it as unit. So that will make sure that that fills in there.
10:00
So expect true to be true. And for our home controller test, we can probably fill this in in just a second. OK, so let's actually do that now. So let's just say it shows the homepage, whatever you want to say.
10:14
And we are going to just make this a little bit cleaner. So you can do this response here and assign this. But I'm going to go ahead and say get. And then I'm going to get the homepage and I'm going to say assert.
10:28
OK, so let's go and get rid of that. Let's say get slash and that should be it. Now for this get function just here, we need to make sure we pull that in from pest. Get and we should be good.
10:42
OK, so just before we run our tests, we're going to come over to PHP unit XML. And we're going to make sure really, really importantly that DB connection is set to SQLite and DB database is set to memory. If this is set to MySQL or this is commented out, what we're going to end up doing is completely wiping and resetting our main database every time we run our tests.
11:04
That's not what we want to do. OK, so let's go ahead and run pest and we should get two past tests. That example test and the home controller test. So that is all good.
11:14
OK, let's do a quick refactor and I think then we're done. So the refactor here is going to be to set up a home controller. So let's say PHP artisan make controller home controller. OK, and let's go over to our web routes.
11:31
Let's get rid of this and let's swap this out for the home controller. And we'll just make this invocable just to keep things really simple. And we're going to give this a name as well. Actually, I think that kind of makes sense. So name home.
11:45
And let's go over to our home controller. And this is invocable since we've not defined out a specific method that we're calling here. So we're just going to return the home page in here. And let's just update our test really quickly.
11:59
So let's go over to our home controller test and we're going to say get. Now the home page is pretty much always going to be slashed. But I always like to reference the root name in our tests. Let's run our test. That looks good. And let's go over and refresh this.
12:14
And that looks good as well. OK, so we're probably going to tweak some other things along the way. That's a really good starting fresh template, if you like, for our application. And of course, we could do better with the survival layout, but we'll do that as we go.

Episode summary

In this kick-off episode, we're starting a fresh Laravel project from scratch, so you get to see every step involved in setting up a solid foundation for development. We start by creating a new Laravel app called comments using the Laravel installer, and walk through basic setup like choosing MySQL for our database, running migrations, and opening the project in an editor (use whatever editor you're comfortable with!).

We handle some housekeeping, like removing the default welcome view, setting up Tailwind CSS for styling, and organizing our base app layout using Laravel Blade components. If you're a fan of clean starts, you'll appreciate how we tidy up model configuration (like unguarding models for convenience while building) and set some sensible defaults in our .env file.

We also bring in a few handy development helpers, like Laravel Debugbar for monitoring performance, and we swap PHPUnit for Pest as our testing framework to keep testing nice and smooth. I show you how to set up Pest, initialize it, and write a basic test to make sure our homepage loads as expected. Along the way, we make sure our test DB is set up to use SQLite in-memory (so we never accidentally wipe our main database!).

To wrap up, we refactor our route setup to use an invokable HomeController, making our routing cleaner and more maintainable, and we update our test accordingly. With a quick check in the browser (and a passing test run to finish), our base project setup is complete and ready for future development.

If you're looking for a repeatable, sensible Laravel project setup—this episode covers all the essential steps to help you hit the ground running!

Episode discussion

No comments, yet. Be the first!