در حال بارگذاری ...

Laravel Front-End Defaults0:00

Out of the box, when it comes to the front end, Laravel makes a handful of assumptions or recommendations. For example, it assumes your directory structure will be like this. It assumes, or recommends, that you pull in these dependencies. And then further, if we go to our assets directory, it gives you some beginning boilerplate. Well, you might want to pull in this font, you might want Bootstrap, you might want to create a variables file. And the same thing is going to be true for your JavaScript. Now, this will ask you to get up and running very quickly, but the reality is some people aren't using Vue.

Exploring Built-In Presets0:30

Now, this will ask you to get up and running very quickly, but the reality is some people aren't using Vue. Some people prefer less, or generic CSS. So in those situations, Laravel does ship with a handful of presets. Let's look at the help for that. Out of the box, it ships with four. Bootstrap. This is standard Twitter Bootstrap preset. One optimized for Vue, one optimized for React, and then one called None, which is almost like a reset.

One optimized for Vue, one optimized for React, and then one called None, which is almost like a reset. Just get rid of all of it. So let me initialize Git, and I'll do a quick work in progress commit. That way I can undo all of the changes. So for example, if I were to say preset None, all right, let's take a look. Well, you'll notice our JavaScript file is way simpler. And the same thing will be true for our Sass. It's now empty. Now, if we go to package.json, you can also see that a number of the dependencies from

It's now empty. Now, if we go to package.json, you can also see that a number of the dependencies from earlier have been removed. So let me do None, and as a quick note, None is an alias I use that will do a git reset --hard and then clean any unstaged files. So it's a nice way for me to undo any changes I've made. Okay, so now if we come back to what we had before, here's all of the files that were included before. And once again, here's the amp.js file. All right, now there's other ones you could do.

And once again, here's the amp.js file. All right, now there's other ones you could do. For example, if we said preset React, well, this will now remove any Vue base that we had earlier. So you'll notice it now includes a React example component rather than Vue. Okay, so this is all very useful, but it's very possible that you have your own way of doing things. So if you find yourself creating lots of projects, yeah, you might want to create your own custom preset. On the other hand, if you very rarely do laravel new from the command line, that's probably

Scaffolding a Custom Preset2:11

preset. On the other hand, if you very rarely do laravel new from the command line, that's probably overkill. You can manually tweak it how you need to. But if you're in the first group and you do want to set up a base for your project, in this series I'll show you how. To start, let's create a directory here. Now we'll later extract this to a dedicated plugin that you can pull in anywhere, but to begin, let's keep it simple. So I'm going to create a directory called laracast, and within here I'll have a src

to begin, let's keep it simple. So I'm going to create a directory called laracast, and within here I'll have a source folder. Now within there, I'm going to create a ServiceProvider. So with that in mind, let me quickly whip up a provider, and we'll call it LaracastServiceProvider. As far as the name, anything you want there. So we'll run that. Now I'm not sure if there's a way to set the destination directory, so I'm just going to steal it from here and move it over.

Hooking Into PresetCommand2:55

Now I'm not sure if there's a way to set the destination directory, so I'm just going to steal it from here and move it over. LaracastServiceProvider. Okay. We're creating a provider here so that we can hook into the preset console command. Let me show you. There should be a class called PresetCommand. So when you run php artisan preset react, you're actually hitting this command here. Now I want you to scroll down here. In the second line, we're checking, is the argument type within this array?

Now I want you to scroll down here. In the second line, we're checking, is the argument type within this array? So it's basically saying, well, if you didn't do one that we're familiar with, we're going to throw an InvalidArgumentException. However, if you scroll up, you can see it's checking to see if we have a macro for that argument type, which means in this example here, we're checking to see, well, is there a method that's been added after the fact to this class? If so, we will call that function. So let me show you here. In the boot method, we'll say presetCommand.

Extending via Macros3:53

So let me show you here. In the boot method, we'll say preset command. Let me go ahead and import that at the top. And now many of Laravel's components are what we call macroable. And what that does is it gives you a method called macro that will extend the surface area, that will extend the API for that class. So if we scroll up and we go to the parent command, you'll see right here, use macroable. And once again, a number of Laravel components are macroable. Here's how you can use it. macro.

Here's how you can use it. Macro. And let's just try to use what we have right up here. We'll change it in a minute. This will then accept the command. And all I'm going to do is spit out some info. It is working. All right. So at the moment, we have a service provider, and I'm going to zoom out a little bit. We have a service provider, but our application doesn't know about it just yet.

Registering Provider and Autoload4:38

So at the moment, we have a ServiceProvider, and I'm going to zoom out a little bit. We have a ServiceProvider, but our application doesn't know about it just yet. So I'm going to go to config/app.php, and we'll scroll down to the array of providers right here. And I'm going to add my own now. We'll just call it LaracastServiceProvider. Now at the moment, it still won't be able to find that. And I bet if we try to run this command again, it'll squawk. Yeah. So we're trying to load that, but we haven't specified how to load this yet.

Yeah. So we're trying to load that, but we haven't specified how to load this yet. So this is where we can go to our composer.json file. And I'll go down to the PSR-4 section, and I'm now going to register a new root namespace for laracast. And that's located within the laracast source directory. All right. So now if we switch back, we're going to update the namespace here to be laracast. And I think we're all set to go. So we've updated our composer.json file.

And I think we're all set to go. So we've updated our composer.json file. I'm going to do a quick dump-autoload. And now we'll give it another try. We run that preset, and it's working. So we've used a macro to extend the surface area, so to speak. Now in our case, we want the laracasts specific preset. So now I can say preset laracasts. And there we go. We've now triggered this function.

And there we go. We've now triggered this function. In the next lesson, we will defer to a dedicated Preset class. And that will be responsible for copying the necessary stubs, updating your package.json file. Anything you would manually do for a new project, we will handle within that class.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟