How To Compile Assets In Laravel 8 | Laravel 8 For Beginners | Learn Laravel 8

what's up guys my name is dari and i hope that you have a wonderful day i have walked you through a lot of front-end stuff by now but the most important one is the usage of assets like javascript and css so that's what i want to do in this video by now you guys know that laravel is a php framework based on back-end coding but it also has a series of components that we could use in order to generate front-end code laravel uses something which is called mix and mix is a webpack-based front-end build system which allows you to run stuff like bauble css javascript and much more now inside the root directory there is a file called webpackmix.js so let's open it up and this is basically a file that you could copy from project to project right now we don't have that many files that we're compiling but just keep in mind that there is an unimaginable number of configuration properties that you could use right here right here you can see that we're linking our resources javascript directory to our public javascript folder so we want to compile it from the left into the right and the same thing happens for our post tss2 on the line below right here we need to have our app.css or scss inside our resources directory forward slash css forward slash app.css and we want to compile it to our public directory where is a folder called css instead of compiling css we could also compile scss like i just said and that's what i want to focus on right now because the process is exactly the same so what we need to do is to change our variable of post css to sas and let's change the path to resources forward slash scss forward slash app dot svss all right now how does the folder structure work well the power of mix is its directory structure if you create a php project you constantly need to decide where the source and compiled assets will be with mix we could just stick to their convention and never think about it again now if we take a look at that directory you can see that every laravel application has its own resources folder right here so if we open it you can see a css js a lang and views directory right now we change the directory name from css to scss so inside our resources directory let's create a new folder called scss and inside our scss let's create a new file called app.scss let's save it we're not ready to compile yet but whenever we do the files inside our resources directory will be exported into the public directory where there will be a css and javascript folder like i said before mix runs on webpack and in order to run webpack we need to set up a few tools first things first we need to have node.js installed and you might have it or you just don't know it anymore so let's check it out let's hop to itune and if you want to see if you have node installed or not you only need to run node space v so let's hit enter right now i'm running on version 12.4.0 if you don't have it installed you need to run brew install node if you're on a mac if you're on linux you need to write down sudo space apps get space install space dash y space nodejs or if you're on windows i will put a link in the description where you could download node and if you've done that come back to your terminal and just write down node space v to see if it worked or not whenever you install node something called npm will come with it and that's what we need in order to compile our assets a good thing to remember is that you don't need to install node for every project if you install node once you can use it every single time all right what do we need to do next well in our terminal we need to run a command called npm install let's hit enter and this might take a second because we're requiring all necessary packages all right before we make it work we need to perform one more command let's write down npm run def to run our webpack once so let's hit enter this might take a second as well when it's done you need to run it one more time for it to work and right now you can see that we have compiled two files successfully the first one is the css file and the second one is our javascript file we haven't done anything in particular to compile so let's fix that first so let's hop to our style sheet inside the resources directory and let's create a variable called primary color and let's set the value equal to red so let's say ff000 now let's style the body and let's set our background dash color equal to our variable so let's say primary dash color again what we need to do next is to hop to our front end so our style sheet so we need to link our style sheet so let's go inside our layouts directory let's open f.blade.php let's get rid of the style that we have right here because we don't need it let's create a new link with the href to asset parentheses css forward slash app.css and let's see where the file is all right let's open our public you can see that we have a css directory right here that we didn't have before we compiled let's open it and we have a app.css which is empty right now but won't be in a second if we save it and hop to the front end refresh it nothing is happening the background color has not been changed to red now with the npm run death command that we just performed we're basically compiling it once there's another command that i like to use and that's npm run watch so let's do that let's hit enter all right larval mix compiled successfully so let's go back to google chrome let's refresh the page and you can see that our background is red but if we hop back to our terminal you can see that our npm is still running so if we remove the background color inside our visual studio code our style sheet in the body let's save it you can see that laurel mix builds it automatically let's hop back to google chrome refresh the page and you can see that our background color is not red anymore let's hop to the project with download for my github and if you haven't i have the link in the description where you could download the files i will just go to my github right in the browser let me open repo let's open the style sheet and let's just copy everything in the style sheet all right this takes a while okay let's copy it and let's place all of our css inside our app.css all right let's save it and you can see that we're getting a lot of our mix error right now so let's see what's going on right here let me go to iturn you can see that a module is not found because it can't resolve our image i wanted to show you what will happen if you get an error message so what we need to do is to change our path because we don't have our image directory so let's hop to visual studio code let's command f or control f let's write down backgrounds and let's search for the background image all right as you could see we linked our storage directory so if we open our storage directory you can see an image banner which is equal to the image that we need right here but the folder name is different so let's write down storage instead of image but right now it will look in the public directory and that's not what we want so we need to add a forward slash right in front of storage let's save it and you can see that laravel mix has been built successfully now let's hop back to google chrome refresh the browser and you can see that our css has been compiled all right the last thing that i would like to show you is all of the front-end presets that we could pull in you don't need to do this because it will mess up what we just built and we don't need to do it for now but it's good to know that what we're going to do is easily done with laravel most people like to work with react or tailwind or bootstrap instead of using the link tag inside your header you can pull them in as a front-end preset from third-party presets in github and the commands are very easy so let's hop to our terminal let's open a new tab let's go right inside of our desktop so see the desktop workspace first project and the command that we need to perform is very easy let's write down php artisan preset percent followed with the framework that you would like to believe if you like react write down react if you like to work with bootstrap just write down bootstrap now what i'd like to do is to use tailwind for now what i want to do is to show you a github repository that i prefer to use as well so let's hop to google chrome let's go to a new tab and let's write down laravel front end presets all right we need the first github repository so let's open it and right here you can see all the front end presets that we could use what i want to do is to pull in tailwind so let's open it and let's scroll down a little bit because right here you can see how we could use tailwind so first off let's copy this command right here let's go to our iterm let's paste it right here hit enter and this might take a second so no worries alright it has pulled in all tailwind stuff that we need but before we continue on we need to run php artisan ui tailwind let's hit enter oh excuse me it's tailwind css my bad let's hit enter this might take a second as well all right you can see that our tail when css scaffolding has been installed successfully but please run another command so we need to do the same exact thing as what we did with npm so we need to npm run dev so let's do that this might take a second as well and as you can see our larval mix build has been done successfully so what i want to do is to hop to visual studio code let's open the app.css as you could see right here our entire app.css file has been filled in with tailwind stuff that we could use and honestly tailwind is not something that i want to focus on right now but since css languages and frameworks are growing rapidly i thought it'd be good to show you what it actually is and how you could easily pull it in this was it for this video about compiling assets and css if you do like my videos and you want to see more or you just want to support the channel just click on the subscribe button down below so you don't miss out on any content

Channel: Code With Dary

Views: 13,247

Keywords: laravel, laravel 8, laravel php framework tutorial - full course for beginners 2020, laravel 8 tutorial for beginners, laravel php framework tutorial full course for beginners, learn laravel for beginners, learn laravel step by step, laravel full course, php laravel youtube, laravel tutorial youtube, how to learn laravel, laravel tutorial 2020 - the complete developer course, laravel tutorials from scratch to advanced, how to use css in laravel, how to use javascript in laravel

Id: mEE0FzQRwGA

Length: 11min 37sec (697 seconds)

Published: Mon Dec 21 2020