How to Install Bootstrap 5 in Laravel 9 With Vite, Npm run dev stuck issue fix

[Music] in this video i'm going to talk about how to install bootstrap 5 in laravel 9 with white and i will also show you how to solve the npm run dev stack issue so let's get started i will start by installing the laravel project so we will do it in in seven steps let's get started with laravel installation i open up the terminal and let's install our laravel project so here i will write composer create project laravel laurel and the name of the folder that i want to create or the larval project i want to create so after entering it will take some time to create a project now that we installed the laravel application we write cd and the name of the project this is the blog so you will see something like this there is application installed and there is read about me and everything is installed here so we will write php artisan serve in this way we will start our application after installing this one i will create a new terminal here i will open the terminal so if i click here it will take me to the uh to the browser which it will show our application now let's install the laravel ui for bootstrap five let's install that laravel ui to install we write composer required and laravel ui and and after enter it will take some time to install the laravel ui package now we installed our laravel ui package we go to the next the next step will scaffold the odd package with bootstrap five now we will install the bootstrap package so and let's install the odd package so we write php artisan ui bootstrap and dash dash or so it will also install the scaffolding of the authentication package from here it's important to understand how the white work from level 9 point and 19 the laura will use the white bundler so we need to configure the white dot config.js file now let's configure the file so i will go to the the white.config.js from here i will write import we need to import path from pad and from here we do not need this part we remove this part and after this one after this plug-in port array so we will add some more code this one so we we create an alias from the path and we link to the bootstrap file we need to put it inside the quotation so right now it's fixed next we import bootstrap 5 s css in javascript folder now we go to the resources folder from here we go to the js folder and we open the app.js file and from here we need to import the app.css from this folder here app.scss and we also need to import the bootstrap from bootstrap package in this step we will change the mix function with the y advice blade directive so if we have a mix function call we need to change it with at with white directive now we have installed these files so i will open up the layout and app.play that php in here you will see many files let's say if we have a directive like this and it's written like mix then we can change this one with the at white something like this so that it directive like voice resources let's say css app dot css we can change this one with this one if you do not have that's fine so i will delete this part now we don't need this port also we will delete this one and also this script we do not need them so i will add at white resource app.js the last system is the step 7 which is the running of the white command to build the asset file so we will run the command npm install and it takes some time to install now let's run the npm build command after running this command it will create the related files so let's now run just our application run again refresh you'll see that we have the odd package here and we click here you see that everything is properly running and it's using the bootstrap package [Music]

Channel: Amazing PHP

Views: 15,193

Keywords: laravel, laravel 9, laravel 8, laravel tutorial, Liveware, laravel tutorial 2022, laravel tutorial for beginners, laravel tutorial for beginners step by step, How to Install Laravel 9 on windows 10, install laravel 9, laravel tutorial beginnner, laravel project

Id: E2SiHyK3dO4

Length: 6min 2sec (362 seconds)

Published: Mon Jul 11 2022