Say Hello to Vite: A Faster Way to Handle Assets | Learn Laravel The Right Way

[Music] let's talk about asset bundling and how we can installed hwind CSS or any other front-end library or package within our laral application this way we don't have to use the CDN to load Tailwind CSS or any other front-end Library if you completed the learn PHP the Right Way series then you should be a little bit familiar with asset bundling since we covered basics of a tool called webpack in that course lural has support for webpack and you're free to use it however in this course we will be covering and using another tool called vit vit is a modern build tool that focuses on Speed and Performance laral provides An Elegant integration with v to manage your assets efficiently so let's see how we can use V in our larable project first step is to make sure that you have the nodejs and npm installed you can go to the node.js documentation and follow the instructions there to get it installed or if you're using laral sale then uh you're in luck because laral sale does come with node and npm installed out of the box so once you figure out the node.js uh problem then we need to run the npm install command to install the dependencies that are stored in our package Json file so if we open that up we see that we have three dependencies by default here we have axio larvo V plugin and V so let's open the terminal I'm going to do vendor bin sale shell to open up the Ducker container and then in here I'm going to run npm install and then after npm install we're going to run npm randev but before we do that let's look at the V configuration file which is found under the root directory of your application and it is called V.C config.js so if we open that up we see that this is defining the VD configuration here and we're using larvo plugin here to specify the entry points for the applications JavaScript and CSS files and these JavaScript and CSS files are under the Resources directory as you can see here so if we open the resources CSS we have the right here and the JS we have it right here as well now if you were building an Spa you could technically remove the CSS file from here and simply import that within your appjs file but we're just going to leave it as is for now uh since we're not building an SBA also notice that if we open the appjs we have this import bootstrap uh line in here and if we open the bootstrap file this just Imports and configures the the axio instance for your laral application axio is basically a promise-based HTTP client for JavaScript now to load or link the Assets in our HTML or in our blade templates we can use the V blade directive for that so within our layout blade inside our HTML head element we can reference the appjs and CSS files from the Resources directory using the vit directory so we can do something like V and pass an array which will list our CSS and JavaScript files again if you were doing spba then you would import your CSS within your JavaScript so in that case you wouldn't need to reference CSS file in here but since we're not doing that we're going to reference it here so we'll do resources CSS app CSS and resources JS app.js what this directive does is that it automatically detects the vi development server and it enables hot module replacement also called HMR which allows us to see changes in real time without refreshing the page manually the cool thing about this directive is that it knows what to do regardless if we run npm runev or npm run build when building for production npm runev is the command that runs the vit development server which is useful for local development and the build command is useful for production to actually build version and bundle the assets one other thing that you may have noticed here we have this refresh where we're passing through here to larvo plugin this essentially makes it so that every time we save uh a file like our blades template if we make a change and save it will automatically reload the page for us all right before we test this out uh let's install the Tailwind CSS so that we don't have to load it from the CDN in here so in fact I'm going to get rid of it from here and instead we're going to install the Tailwind CSS using the npm command so we're going to do npm install Tailwind CSS and we need post CSS as well as Auto prefixer post CSS is basically used to transform CSS using plugins and Tailwind is essentially a post CSS plugin Auto prefixer is another post CSS plugin which adds vendor prefixes to your CSS rules automatically which ensures cross browser compatibility so once those are installed then we're going to run the npx command to generate the configuration file for the Tailwind CSS so we're going to do npx Tailwind CSS in it this is going to initialize the Tailwind CSS configuration file and it will create Tailwind config JS file so if we open that up right here we see that this is where we can configure our Tailwind CSS we're going to add the paths to our blade and JavaScript files within the content section in here because the blade and JavaScript files are the files where we may be using Tailwind CSS classes so we need to tell Tailwind about that so we're going to first specify that our blade templates will be within resources and then we'll basically match to any blade template here that ends with blade and we'll do the same thing for JavaScript so we'll do resources match to any file that ends with JavaScript within the Resources directory or any subdirectory under it if you were using other type of templates maybe react or view then you'd expand this content accordingly to suit your needs but for our purposes we're only going to have the blade templates and the JavaScript files that that are going to contain our Tailwind CSS classes now we're not going to change much of the other configuration in here since this is not a Tailwind specific course but you can read up on Tailwind documentation if you do decide to use Tailwind for your own projects and want to know more you can extend colors here you can change them you can add fonts plugins and so on all right next we need to add a few Tailwind directives to our CSS file so let's open our application CSS file and add Tailwind base Tailwind components and Tailwind utilities and that's it now basically we should have Tailwind working for our application so let's run npm runev to start the V development server let's open the browser visit Local Host and we see that it's actually not working uh we do see the page here but the Tailwind styles are now being applied the reason for this is because remember Tailwind CSS is a post CSS plugin so we need to create a post CSS configuration file in the root of our project directory and then V will automatically apply it so we essentially need to create another file here called post css. config.js and we need to enable the Tailwind uh CSS in here as a plugin so we are going to paste in this snippet of code here and we're essentially saying that we have the tawin CSS and the auto prefixer plugins and then let's restart this and now our page should load without issues and as you can see as soon as I opened the browser it automatically refreshed because uh it does that now on Save now if we go back and change something in the layout maybe we're going to add hello world in here and then save and go to the browser we see that is already available Here Without Me explicitly refreshing the page in fact I think there is a command that automatically generates the post CSS config as well so if we remove this and uh let's get rid of this and we'll do npx Tailwind CSS init and do dasp this is going to create the post CSS file as well as the Tailwind configuration file so if we run this we see that the tail configuration file already exists but it did create the post CSS configuration for us so if we open that up we see that these two things are there automatically so I just wanted to basically show you what happens if you miss this option and you create the Tailwind CSS configuration uh on its own when you open the browser it's not going to work because you will need the post CSS configuration as well which you can either create manually or can run the command with dasp option all right another issue that you might come across with is with the hot modu reloading or hot module replacement uh basically when you have the HMR enabled um it automatically refreshes the page on save so you don't have to do that manually which is pretty awesome right we saw that it was working in my case however it may not work in your case depending on how your local environment is set up and whether your using laral sale or something else if you come across with some kind of issue where you're getting some errors that it's not able to load the v files or some other files you're getting some kind of console JavaScript errors in your developer tools when you open it on your browser then you can try to play around with the V server configuration options so you could go to the V config Js and in here you could add the server option and then do HMR and then within HMR you could set the host to Local Host and try to run the npm runev again and see if that helps your situation so if I run this this is going to work for me regardless so if I open and refresh we see that it still works now if I set this to something else like Local Host one and save and go here and refresh we will see that it's not going to work and if I open the console we're getting this kind of error so if you're getting something similar where it's not able to load this client or app CSS or appjs uh JavaScript errors then try to play around with your server HMR configuration options now you can of course refer to documentation to see some of the other avable options uh to see what you can play around with but if it doesn't work one other thing that you can try is if you're using Docker try to run npm commands outside of the docker container within your host machine that would mean that no JS and npm would have to be installed on your host machine as well and in that case uh you may be able to run the npm runev afterwards and once you do that then the HMR might work and you may not have any issues all right so I'm going to remove this since it's not needed in my case and next let's talk about how we can reference to other assets like images one way is to store images in public directory within here for example let's maybe change the logo that's used in our navigation component so let's open the nav component and within the nav component we are loading the logo from this URL so instead maybe we want to load the logo from our public directory so maybe we had something like images logo.png and I'm going to paste in my logo in here uh we'll rename this to just logo and we need to put this within the images directory so let's put it within the images directory and now let's open the browser and sure enough we see that it works another way would be to store the assets within the Resources directory and then have have V process and version it properly during the build process so let's move our images directory to our Resources directory we're going to take it out of the public entirely and then within our blade template we're going to reference this using the asset method on the vit facade so we'll do vit asset pass the resources slimes SL logo.png G and this should work in fact we don't need the fully qualified name here uh just the beit should work as expected let's open the browser refresh the page and we see that it still works if we inspect element here we see that it's loading the image from the Resources directory now this only works because we are in development mode we are running npm runev however if we cancel this out and run npm run build instead which builds for production that's what we would use for production it would not work so if we open the browser and refresh the page we see that we're getting error that uh the V manifest is not able to locate the logo.png that is because vit won't automatically version and process assets that are not included or referenced within the CSS or JavaScript files we can open the Manifest Json uh file that is automatically generated and placed within the public build directory this file is essentially like a map it Maps this path right here to the built compressed and version asset that is now available under the public directory so it essentially Maps this to this file right here and this file is available under the public build assets and you can see it's right here but as you can also see we don't have an entry here for the logo we just have one for CSS and one for JavaScript now if we for some reason import our logo within our JavaScript then it's going to work so if we go to app.js and we did something like import images logo.png and save and then we did npm run build and visit the browser we see that everything is working and that's because now uh V is uh basically detecting that this uh file is in use and it's putting it into that manifest so if we open that now we have that entry right here and it's referencing to this file and this file has been properly copied or built under the build assets now for a few images this is fine you might already be importing them in your JavaScript or css files which would automatically be versioned and included in the build process but if you want to version all assets uh that you have you could make V aware of these assets by importing all the images or other assets within your app.js so we could do something like instead of importing this one image we could do import meta globe and pass uh a list of uh paths to where our asset are located in our case we only care about the images so we'll do images and basically load all the images under the images directory if we save that run npm run build again refresh the page we see that it still works all right I think this is good enough to get you familiar with vit and front end rest you can dig into it yourself based on your needs then depending on what you decide to use for front content you can configure V with react with View and so on it is up to you what you want to use you're not obligated to use V at all you can use webpack or just simply use CDN for a project or demonstration purposes it doesn't really matter this course is not front-end oriented so we are not going to go into much detail I just wanted to cover the basics and give you the base foundation so that you could go and explore more we will however cover and get to the the forms and form requests in time so thank you so much for watching I hope you enjoyed my lessons if you do please hit the like button and subscribe to the channel if you haven't already done so until next time happy coding