Out of the box, Laravel ships with some quick scaffolding and suggestions to get your JavaScript and CSS compilation in order. So we can see here that Laravel ships with an app.js file. It gives the suggestion of Vue. It doesn't require it. It doesn't even install it for you. It just gives you the suggestion, which you're free to delete. However, it does include a components directory, a bootstrap file that will pull in Lodash and jQuery. And then further, in your Sass, it gives the suggestion of using bootstrap.sass.

and jQuery. And then further, in your Sass, it gives the suggestion of using bootstrap.sass. Again, these are all just simple suggestions to get you going really quickly. However, you might want to do something else, like you may want no scaffolding at all, or you may prefer to use React instead of Vue. So with that in mind, Laravel has a new artisan command, and we're going to look for preset here. Yeah. php artisan preset will swap the frontend scaffolding for the application. Let's see what that means.

php artisan preset will swap the frontend scaffolding for the application. Let's see what that means. Let's do a help. All right, so we give it the type of preset we want, and these are the ones that are supported. So none means strip everything. So here's what I'm going to do. I'm going to initialize git, just say initial commit, so that you can see the difference here. And I will say php artisan preset none. So none will assume that you don't want any of these things.

And I will say php artisan preset none. So none will assume that you don't want any of these things. So if you go to Sass, now that file is empty. It opens up your package.json file and removes the jQuery reference, the bootstrap.sass reference, the Vue reference, all of that stuff. Further, app.js has been vastly simplified. It no longer assumes Vue, and it just has a bootstrap file. And it's possible when Laravel 5.5 is officially out, this file may be stripped as well. But anyways, if I do a git status, you can see it deletes all of these various files for you.

But anyways, if I do a git status, you can see it deletes all of these various files for you. OK, I'm going to reset everything using a quick alias I have. And we're back to where we were before. Now let's bring back the health. We can see there's also a toggle for Bootstrap, Vue, and React. So let's give this a shot. Let's say php artisan preset, but now I'm using React instead of Vue. OK, so it has added our scaffolding, and it's just letting you know, of course, before running in the browser, recompile your assets using webpack and mix.

OK, so it has added our scaffolding, and it's just letting you know, of course, before running in the browser, recompile your assets using webpack and mix. But anyways, if we go back to Sublime, now we can see in app.js that we are assuming and using React components. So if we take a look at this, this is what React looks like. And then further, app.scss is still going to do the exact same thing. Now once again, if I were to switch back to Vue, you'll see that it does that for me. Really useful. And then finally, if you were to strip everything, you're starting from scratch, but maybe you do want bootstrap alone, well then you could say php artisan preset bootstrap.

And then finally, if you were to strip everything, you're starting from scratch, but maybe you do want bootstrap alone, well then you could say php artisan preset bootstrap. And what that's going to do is update your package.json file, and then if we switch back here, you can see that it has brought back that boilerplate. And if you ever want to see what everything's doing here, you can always go to the preset command, and if we scroll down, we can see, all right, it calls the argument name. So in this case, if I give it bootstrap, it's calling a bootstrap method. And then here, yeah, you can see each preset has its own class. So that means we could do presets/none, or Vue, or React, or bootstrap in this case. And now you can see all the various things it does, and you can inspect those.

So that means we could do presets slash none, or Vue, or React, or Bootstrap in this case. And now you can see all the various things it does, and you can inspect those. And usually it's just a matter of updating your package.json file, and then copying some stubs over to your resources folder. And yeah, that's all there is to it.