Laravel 9 Domain Driven Design TailwindCSS - Part 4

[Music] all right so let's go ahead and start looking at asset compiling um i do have my webpacks.mix.js file so this is how currently our assets gets compiled so if i do run npm install and it's going to install all my dependencies so that way we don't have to deal with this but next thing we're going to do is once this is done then we're going to start working with js and app so right now you have one app.js and bootstrap so what i'm going to do is i'm going to create again front-end and back-end folder so let's do this front-end and back in so now i have these what i can do is simply just copy this here so it's going to say yes and then copy this here now what i want to really want to do is i want to reveal this in the folder and let me bring this folder up here and what i'm going to do is i'm going to copy these and then paste them here as well so that way let's see if i can paste it so copy and then i'm going to paste this here so now we have two copies and then now we can distribute our code our code base to a front-end and a back-end code base so this way we get separation of concerns right there same thing with css if you are using css you're going to say front end and you're going to save back in so now front end i can just move that for backend and here app.css and as you see we have a complete separation of front end backend now so with this now we have everything set up let's go ahead and start looking at webpack that makes.js file so what i'm going to do is i'm going to copy this and then paste it here so i'm going to name this as backend and then this one as front end all right so now here it's going to be resources.js and i'm going to use frontend and then app.js and then here i'm going to say backend app.js so same thing with my public js file is i'm going to have it go into front end and then back in whichever way you you feel like uh moving these assets to you can literally use you know same thing with with that i can do the same thing over here so back in my bed um right here and just remove this same thing right here and whoops back in i think what i really was thinking was just do this back in and this way you have your app coming up css coming out from here and just coming out from here same thing i can do it from here there you go and then front end would be this all right so now that we have these set up simply when you're going to say yarn run it's going to mix everything and then if you see how our code base looks like and the public folder see how it has a separate app css and js so now it's watching all right so what we're going to do next would be uh come back to app dotblade.php and then we're going to write html and here i'm going to say link and this is going to do the css here and then if i can bring uh the level so if you don't know this uh this comes from the level mix section and i'm just gonna show you real quick where this is coming from it's coming from right here and uh level mix has its own way of importing files so when you do that so let me show you so you're going to say mix and then this is going to be css front-end and then app.css so now if i go back into my front-end so this would be right here and i'm going to say body background color green and this is going to compile whoops and if we go ahead and look at this document let's refresh and there you go so now you can see i was able to import everything to a separate file now the same thing we can do with the back end so i can have uh app.php and then i can import the same same way right here and then let me just copy and paste this real quick so copy and now you have separate uh backend and front end so back in app.css and now um it won't load because we don't have any routes for it but this is how you're going to do it so next thing let's look at how to use tailwind css instead of this all right so here i have documentation pulled up for tailwind css what i'm going to do is i'm just going to zoom in a little bit so you have you can see now first things first we're going to go on framework guide and see how it works with level so we already have a project we're just going to install tailwind css so i'm just going to copy this real quick and go back to my project whoops there you go and let's let's make this a little bit full screen see if we can work with this and then i'm going to open another tab no not right now and let's clear this and paste so now it's going to installed and i'm going to shut this one off maybe that's easier for us so it's not working okay let's just delete that for now and if i go back in here so that's done next command would be npx tailwind it which should be right here let's paste that and then the next one we're going to look at is just add this into require instead and that would work so if i go back in here and go back to my webpack file which is going to be telling a required table and css i think what it needs is to add this we're not going to use view i'm going to go over this but for now i'm just copying this as module.export uh just so we can set it up so if i go back into tailwind css config file uh maybe i think it's just so i just copied the full there you go and i'm gonna remove this for now all right so next thing would be uh let's look at this documentation next thing would be copying this and going back here and i'll go to front end for now i'm just doing front end but you can play around and do it with the back end as well so that way you have two copies so now hopefully let's see the documentation yeah everything should work we just have to run npm run watch which i'm gonna do here so npm run watch and now let's go ahead and copy this real quick so that we have our h1 right here bingo and let's go ahead and see what comes out of browser this way so hello world is right there and then what i'm going to do i think what i want to do is just add some color here instead of font bold so i'll say color text green 500 i don't know why i do green but let's do uh indigo all right so now if we look at this it sure is going to change its color and now we have kelvin css now let me go over this real quick and then show you how you can do the back end as well so same thing it's going to go into i'm just going to copy this here paste it here and go come back to telling css uh actually go back to webpack and then require tailwind css here so now both are reading from the same tl tailwind file so here you can create your themes if you want uh you can do this so with that um let the next the next video would be more about level inertia.js and livewire the next two videos and we're going to start configuring level inertia.js using react.js i really like react.js and i think you can find vue.js uh videos on other channels uh that i've seen how to install those and i will also go with the server side rendering for um inertia.js just to show you the how that works so with that i would like to close and i hope you enjoyed the video please feel free to like thumbs up and like this video and share with your friends and sure you know share love thank you

Channel: Himanshu Batra

Views: 982

Keywords: laravel 9 domain driven development, ddd laravel 9, laravel, laravel 9, ddd, laravel 8, laravel project tutorial, laravel 9 tutorial, laravel tutorial, laravel project, livewire, domaindrivendevelopment, domain-driven, domaindrivenapplication, laravel tutorial for beginners step by step, php laravel youtube, domain driven design, what is domain driven design, microservice architecture pattern

Id: Ii5gXepH_vA

Length: 9min 20sec (560 seconds)

Published: Thu May 12 2022