All right, so why don't we take just a few minutes to talk about front end asset bundling. As you can see here, so far, we have been referencing any CSS or potentially JavaScript directly through A CDN. Uh, and that's fine, but most of the time you probably won't do this. Instead, you'll install these various tools and packages locally and then you will compile and bundle them up, uh, when you're ready

and packages locally and then you will compile and bundle them up, uh, when you're ready to push to production. So I'm gonna show you how to do that today using beat. The first thing we're gonna do is remove all of these references to A CDN, so no tailwinds and no daisy ui. So if I clear that, and then of course if we switch back to the browser and yep. Now completely uns styled, it's ruined. We need to fix it.

to the browser and yep. Now completely uns styled, it's ruined. We need to fix it. Okay, let's get going. So if I open up my sidebar and I scroll to the bottom, you will see that out of the box Laravel includes a vet config js. Yes. Uh, vet is probably at the time of this recording the most popular and widespread asset bundler. Uh, you can use it directly, but

and widespread asset bundler. Uh, you can use it directly, but because we're using Laravel, we have a wrapper around it to make it as simple as possible to integrate with Laravel. So as you can see here in our config, we have a Laravel plugin. We're gonna reference input for CSS and JavaScript. We are going to refresh the browser whenever it detects a change and more on that in just a minute.

whenever it detects a change and more on that in just a minute. And then we're also gonna pull in Tailwind again because at the time of this recording, tailwind is sort of won the battle. So we assume you want that, but of course, if you don't get rid of it entirely, no problem at all. Okay, so let's have a look at these two files we will go into and let's bring this up into our resources,

Okay, so let's have a look at these two files we will go into and let's bring this up into our resources, CSS app, css. And again, this, this comes out of the box. And yeah, what you'll see is something just like this when you install the framework, so it will pull in tailwind for you. And these source directives, this is pointing to all of the files that can potentially contain Tailwind classes. Tailwind is going to optimize the bundle process

of the files that can potentially contain Tailwind classes. Tailwind is going to optimize the bundle process to strip out any unused utility classes. And that way your bundled file, uh, is, is as small as humanly possible. So we're saying like, Hey, we, we may have sunhill classes here and also look in the storage directory and then look for any blade files and then also look for any JavaScript files.

and then look for any blade files and then also look for any JavaScript files. And of course, if you need to, you can append to this. Okay? And then it shows you how to set your initial theme. And we'll talk about that more in just a second. Alright, so I'm gonna uh, hide this temporarily because at the moment we don't even have DA ui. And now if I switch back, we have our VT config, where are you? But how do I use this?

we have our VT config, where are you? But how do I use this? Well, the first thing we need to do is open up our package, Jason file and you'll see larva includes two scripts that we can run. One is called Build and one is called Dev and they just defer tove commands, which means you can run NPM Run Build or NPM run dev, or you can simply reference Vet. It's whatever you want. Alright?

or you can simply reference Vet. It's whatever you want. Alright? So let's do NPM run dev. I am in development mode. So let's boot up our vet server. Okay, so now it's going to watch our project for any changes. And then, uh, on the fly it's gonna hot reload the browser to reflect those changes. It's really incredibly cool. Okay, so if I switch back to our editor,

It's really incredibly cool. Okay, so if I switch back to our editor, let's go into our layout file. We are now no longer referencing Daisy UI and tail wind through A CDN. I'm instead gonna use this new VE directive and I will reference both our CSS file as well as our JavaScript file. And that's it. So effectively what's gonna happen is these will be compiled and bundled up,

And that's it. So effectively what's gonna happen is these will be compiled and bundled up, and then it will be swapped out with the the bundled, um, file or the hot file if working locally. Okay? So, uh, we still have some work to do, but if I switch back, give it a refresh, you can see some changes here. All right, so we have pulled in Tailwind. So that means if I open up resources app, css, uh, let's set a theme.

So that means if I open up resources app, css, uh, let's set a theme. Uh, let's declare our own color, maybe our primary color, and I'm just gonna hard code it to red. Okay? So this is how we can work with, uh, custom colors and utilities and Tailwind four. If I declare a color called primary, well now I have access to things like text, uh, primary or BG primary or or anything border primary. All of those will be generated on the fly.

or BG primary or or anything border primary. All of those will be generated on the fly. It's one of the coolest things that you can do with Tailwind. And all I have to do is declare a variable, a color variable. Okay? So to show you this in action, now if I switch back, why don't we just say text primary and it even shows up there with auto complete. And now if I come back, all of our text is red.

and it even shows up there with auto complete. And now if I come back, all of our text is red. And again, that specifically comes from this. So to prove it to you, if I change it out with green, now we have hot reloading, so I don't even have to hit the, the refresh button. It instantly reflects the change. Let's see it side by side. Yeah, that's better. So let's change it to Brown Save and it instantly refreshes blue save and it instantly refreshes.

and it instantly refreshes blue save and it instantly refreshes. This is really gonna help your workflow. So if I go back to our layout, let's add some padding X of 10 on the left and right save. And again, the browser instantly refreshes. It's so good. Okay, but yeah, of course right now we are not yet pulling in Daisy ui. So let's update that. Let's once again return to the Daisy UI websites.

So let's update that. Let's once again return to the Daisy UI websites. I will go to how to use and yep, just pick your preferred tool and PM is fine with me. I will paste that in. And then finally we just have to reference Daisy UI from our app CSS file, and we've already done that. So I will comment this out and this should work exactly as it did before.

So I will comment this out and this should work exactly as it did before. Alright, so let's give it a shot. We can bring this back save and it instantly refreshes. And now we are using Tailwind CSS Daisy UI custom CSS, and we are bundling it all up and then we reference or import it, uh, directly here. Okay, so now to wrap up, the same thing is going to be true for any JavaScript that you have. So of course, potentially you're using a dedicated

for any JavaScript that you have. So of course, potentially you're using a dedicated framework, but if not, that's okay. You can write your, your Vanilla JavaScripts directly within resources JS app js. So, uh, again, outta the box, it gives you the suggestion that you might want to reference, uh, bootstrap js. And this pulls in Axios for making, um, Ajax requests. Once again though, if you're not gonna use that, feel free to delete this entirely.

Once again though, if you're not gonna use that, feel free to delete this entirely. Okay, so now just as a proof of concept, if I say hello there, if I come back, of course we are now triggering some JavaScript. So yes, at this point you can build up any components you need. You can, if you're using View or React, you can configure those according to the installation instructions, Okay?

or React, you can configure those according to the installation instructions, Okay? But now is really important to remember that if you are not running that ve command from your command line or NPM run dev and I will hit control C to exit out of that. Then of course, we're not bundling anything and we're not refreshing the page. So if you're working on your project and you're noticing that none

So if you're working on your project and you're noticing that none of your changes are taking effect, for example, back in App css, if we were to change this to pink, well, if you come back and you're like, wait a minute, this is not working, and suddenly it's un styled, that's probably because you forgot to run, uh, vet or NPM Run Dev. So do that, switch back, and then you'll be back up and running.

So do that, switch back, and then you'll be back up and running. Finally, when you're ready to push to production, you can either build it for production locally and then, uh, add it to your GI commit or you can build it up, uh, as part of your production pipeline. Both work and trust me, very good developers choose both options. It's just a matter of what you wanna do here.

very good developers choose both options. It's just a matter of what you wanna do here. So if I were to instead say NPM Run build, think of this as building for production. And now we can see the, um, the bundled up assets. So our CSS, this is about 60 K and our compiled JavaScript is 30 5K. Not too bad. Now notice those are within a public build directory. So once again, I just wanna show you

public build directory. So once again, I just wanna show you what we are working with here. Ultimately, this is what's going to be sent to your browser. Here is a compiled and minified and optimized and vendor prefixed CSS file. And then of course, here's the exact same thing for our JavaScript. It just works and you don't even need to think about it.

It just works and you don't even need to think about it.