(01) Vite with Laravel | What is Vite | Why Vite is added in Laravel | Vite Tutorials

hello everyone welcome to the larval weed series today in the series i'm going to explain that what is wheat why we need this wheat and why it's replaced with the larval mix and we are going to install this into the bootstrap also we are going to install this into the vue.js inertia livewire and react.js so if you are not familiar with this one wheat so you can watch this full series where i'm going to explain this for the websites and also for the sps so basically the wheat is a bundling uh for use for bundling the assets so let's jump into the previous ones in the previous versions we are using the webpack to compile our css js and images file in laravel application but this wheat is introduced into the level 9.18 or 9.19 i'm not sure it's added after this level 9 release so basically wheat is a modern front-end building tool that provide an extremely fast development and bundling your code for the production so it means that we is used to compile your files into the minified files and then you don't need to include your all files at the top so this way you need to just add the compile files okay so choosing between wheat and larval so you can read it from the documentation that which is suitable for you and why you need this wheat so basically wheat is too much faster than mix and one more thing here so this is a drawback of this week however it's like some feature level mixed support such as ability to copy arbitrary asset into the build or not referenced into this javascript application so this is supported by laravel mix again so now question arrives that how to install this wheat so first i'm going to install this into the bootstrap and then i'm going to move further to the view react and stuff like that but before this you need to satisfy these two requirements so you need to install the node.js first and then you need to install the npm so if you are not familiar with this node.js and npm that these are installed or not so how you can verify them so let's go to your command line cmd and then verify that these are exist in your in your pc or not your operating system so here just type node v so it will return the node.js version and yes it's 17.25 which is a stable version of laravel and then i'm going to check the version of npmv let me also open this youtube here oops let's turn this off and wait for a moment to complete this npm v so it's going to return as the npm version right so let's wait for a moment to complete this process so basically these are two requirements to install the weights so by default if you are running the web packs so these are also requirement tools for the webpack right you don't need to do anything more so now let's come back to here so if you are on the level sales you need to install you can check this like this okay and then as similar like web pack you need to install this npm install and it will pull it will install the npm into your project you can also install the npm globally it's totally upon you okay so the other steps are used to this one let me introduce you white.config.js file so if you are going to create a new laravel application so this will be added into your project file but in your previous level 9 project this does not exist so i'm going to first to create a new project and then show you that where it exists this file so i'm going to install this composer create project okay and then laravel it's similar command like you are doing this in the previous level 9 project okay and then here you need to specify your project name so i'm going to name this wheat wheat in laravel some developers are pronouncing this is a white but this is actually a wheat not white okay it's going to now pull the latest version of the laravel so which is i think 9.22 and stuff like that 1.3 and it's installing this out so let's wait for a moment to complete this process and then i'm coming back okay so our application is installed and you can check that it's a new thing is added that there are lines between them you can read out easily that what are the packages added by default in the installation and this one is also flag is added here application key is success successfully right so now let me go to the project so this would be uh wait with the wheat oops tweet in laravel okay then run php artisan serve and i have also opened this in my text editor so this one is wheat in the laravel so now let's go to the go to the bottom so this one is v.config.js file is edit in this new level 9 version so let's click on this and open this file so by default it's containing this code so defining the configuration and we'll install this vid plugin first we are importing this and then we are going to do the configuration right so here you need to this one is used for rendering your uh compiling your resource and then this refresh property is used to refresh when you save this file so this will be instantly refresh your web browser automatically so you don't need to press f5 so let's go here and let me type localhost 8000 and it's going to open us uh when you open this out so our development server is started okay so our application will be open in a few seconds and yes so let me check the video size okay now it's not going bigger at a moment it is process internet to make it properly without any caching so let's reload this again okay yes it's now loaded and if i go here and press ctrl s so now let's return back to the web browser and yes it's instantly automatically refreshed so i did not press any ctrl f or ctrl r right so basically control and refresh the web page but uh if you are using this white so you can also use this same steps first you need to install this npm install or using this command and then if you want to build the assets then you need to run the npm run dev for product for production you need to run npm run build and it will build your files into the public directory okay so uh going to take a few times and then i'm going to return back and start this with the new series a new video it's going bigger so i will meet you in the next one bye bye

Channel: Career Development Lab

Views: 20,726

Keywords: career development lab, cdl, web development, learn web development, full stack development, back end development, web dev, app development, website application development, vite in laravel, laravel vite, vite wih laravel, what is vite in laravel, vite with laravel 9, why vite is better then webpack, laravel 9 vite with bootstrap, vite in vuejs, vite in react js, web development in laravel

Id: qWxubVMX_cg

Length: 7min 50sec (470 seconds)

Published: Thu Jul 21 2022