Laravel 9.19: From Mix to Vite - What You Need To Know

hello guys today i want to talk about some important changes that were made in laravel 9.19 related to building the front-end assets the asset builder was replaced from laravel mix to veet and in this video i want to tell you why it was made how does it work and what to do if it doesn't work and everything around it so first what exactly changed when you install new laravel project now with laravel new installer for example you will not find the file of webpackmix.js anymore so the installation is finished and if we cd to the project and then list the files we don't see webpackmix.js instead we see veed config.js so to compile front-end assets from resources.js and resources css you used to run npm install npm run dev and then wait for everything to compile with veed it would be almost the same commands that you would run but it would run much faster and that's the whole reason why that change was made because of the speed of bundling which means developers don't have to wait for compiling to finish in the background let me demonstrate it the best way to demonstrate the speed and the difference is provided by taylor artwell you just install laravel breeze with vue.js version of that laravel breeze and then we will do some magic so we already installed the laravel and then we do compose require breeze then we install the breeze with vue.js like this it installs inertial laravel so it use inertia view and then we need to run the same npm install and pm run dev so npm install and npm run dev with webpack used to just finish the command and compile the public js app.js and public css app css i have some warnings here but they don't really matter in this case let's run npm run dev and see what happens npm run dev with vit starts the server so called veed server on a separate local host 3000 but you don't need to know about that your app url stays the same and when we launch that you have your laravel project so there's nothing really different that much right but the difference is if you change something in your vue.js files people used to run npm run watch to watch for the changes or rerun npm run dev every time the change happens now let me show you what happens if i change something with beat so i open a random view component welcome view which is the home page this thing and let's actually zoom it in and then let's change something the text any random thing so for example laravel has wonderful thorough documentation let's add the word framework for example i hit save in phpstorm i come back to the browser and as you can see the text is already reloaded so i didn't refresh the browser myself manually what happened in the background the server starts to run and it continues running watching for the changes in this video i won't really explain how it works because it's a separate course almost but what you need to know it's much faster and it's reloaded almost instantly including reload of the browser instantly so you don't need to even think about npm running something it's similar to good old php back-end coding where it just saved the file and it works it's actually even better you don't need to reload the browser it's already reloaded so that's the reason why veet is better and why it was chosen to be the default front-end asset builder instead of laravel mix and after the change was released people started reporting their times of how it was improving the building time local or production so for example in the street 12 minutes to 5 minutes so almost twice as fast or in fact more than twice as fast that's pretty huge improvement now how does it actually work and what you need to know for new laravel projects the actual change during laravel installation is all mostly in one commit which i will link in the description below it replaces web back with veed and here are the changes that have been made to laravel framework a few dot env dot example value so from mix to wheat related to pusher in a majority of cases you don't even think about that then public build is get ignored now then style ci also if you use that it is replaced then this is important so instead of all those commands like npm run prod npm run hot and others you have two npm run dev and npm run build so dev is for your local and build is to build actual production css and js then it replaces laravel mix with laravel veed plugin and vd itself so dependencies in package.json resources.js bootstrap is the same using env files values and then this is new veed config which replaces alt webpack mix.js so not too many changes in terms of laravel project but the changes how it works under the hood when you run npm run dev now what to do if these doesn't work for you as smoothly as in my demo i've seen on twitter people reporting some issues on their specific project or on their specific operating systems or on their specific setups for example this morning i saw this tweet that laravel breeze with veed using laravel sale doesn't work and you need to know that npm run dev should be loaded outside of sale for it to work otherwise it doesn't load the front-end assets so that's one example another example that veeds wouldn't work with laravel ui so they updated the official starter kits of breeze and jet stream but laravel ui although it is still maintained and working was kind of forgotten not sure intentionally or not at the time of that switch so that wouldn't work and maybe you would like to get back to webpack instead and by the way with laravel ui they are working on the fix so there is a pull request for veed for laravel ui so it will be fixed maybe even by the time this video is out but whatever problem you have or maybe you don't like vit how it works if you want to get back to webpack.js webpack mix.js and laravel mix you just need to go through that commit again and roll back all the changes from here and then you would be using webpack like you did all the time and nothing would be changed for you now what about if you have old project with laravel mix and you want to migrate to veed there is an article on laravel news compiling other articles related to that so there's laravel shift converter which is free by the way laravel shift itself if you want to upgrade laravel versions is not free but mixed veed converter specifically is free so you can try it out also you can read the official migration guide also christopher wrote a tutorial and there are a few more tutorials like for example with bootstrap or with specifically laravel valet so i will link that article in the description as well probably the main thing is the migration guide so if we click that we land on readme file on github migrating from mix to viet and there's a step-by-step guide how to do the same thing manually what to update and stuff like that also related links are summarized in the official taylor's tweet announcing the feed change which also includes the entirely new docs page of laravel calm about frontend in general so you can read that in full and also specific veed page on laravel docs so if we click that we land bundling assets wheat here you can read on how vit works with laravel specifically and of course you can go to the official documentation of veed itself how it works in general so i hope this video clarifies what was changed and what you need to do if anything for new upcoming laravel projects if something doesn't work for you with veed i recommend you post to laracast forum there are a lot of helpful people and someone will help what do you think about that new change it seems pretty drastic but it actually isn't that big and a better tool a faster tool is chosen for the future of laravel front end assets bundling the only downside for me personally as a course creator and content creator i have to reshoot a few videos so for example for the course of react js plus laravel and vue.js plus laravel i need to show how to compile the assets with vit now so next thing i'm going to do in a few days i will reshoot a few videos there to upgrade those courses and also in 2022 hopefully over the summer i want to reshoot a few more courses in full a few courses which are pretty old so eloquent expert level it was published with laravel 5.7 and eloquent is fundamental part of laravel so everyone needs to know about that so i'll upgrade that course in full and also another course php unit in laravel it was kind of introductory course for testing in laravel a lot of things have changed since then since laravel's 5.8 version including past and other testing functionality so i'm planning to reshoot that course in full hopefully by the end of the summer if you want to get that the best way to do that is to subscribe to yearly membership of my courses and by doing that you also support this youtube channel which continues to be free with daily videos that's it for now and see you guys in those other daily videos

Channel: Laravel Daily

Views: 52,825

Keywords:

Id: epMbfE37014

Length: 9min 56sec (596 seconds)

Published: Thu Jul 07 2022