Part 1 - Project Setup Front-End and Back-End

hey what's up guys welcome to lara tapes as i have said in my previous video that we'll be building a blog and we'll be using laravel data streamer and inertia.js on the back end and on the front end we'll be using turbulent css and view 3. today in this video we'll be setting up both the front end and back end so first of all we'll set up the front end and then back end so let's start so in this project we'll be using view 3 with router and eslin we will not use view x because by using view 3 we can make some properties available globally or locally which will be very easy so we don't need vox for this simple project okay it's installed now let's cd into the blog directory and let us run again serve now if i click on this link so that it is installed now let us open this in vs code okay now let us add this into the git okay now let me install some packages that we need so we need tailwind css and xu's for tailwind css is for designing purpose and and we need xus to interact with our api using the azax request okay now they are installed now we have to initialize the turbine css so we have to run this command okay when we run this command this tailwind.config.js file is created and it will create all these things so let me not change anything here we'll be changing when we'll be working on our design so after that what we need to do is we need to create one file css.config.js and here we can do module dot exports and we can say plugins since delvin is a post css plugin so we can do it like this require television css and this should be an array not object and also require the auto prefixer so it will add the vendor prefixes to our css file so it is automatically added when we install the vo3 through the vvcli so we don't need to install it via yarn or npm so now we have done this let us create a css file inside this src assets and logo.png here we will get main.css and here we need to add some code to generate classes using the tailwind css we can say you can find all these in the table in css documentation delving based and delvin so when we add this all the classes will be generated when we run our command so after this let us go to our main.js here and let us add that css there here import ss main.css so this is imported okay now let us go to this where we have solved our project here and let us cancel it and let us again run it and answer now if you go to the browser then you can see here the design has been changed okay now let us go to the app.view and let us clear some things here so we don't need this we only need here div and let's say in a bar like this and let us keep this like this let's say nav and let's see here footer like this and we don't need any of these styles now if we go to this component there is hello world let us remove this and in the router if we go in the index.js we have this home route and this about us route so let us just comment it for now we'll be using this for other routes and then if we go inside the view we have this about and home so we don't need about for now let us just remove this and if you go inside the home so there is these components so let us just say home here and let us all remove this so add will be this src now if i do it like this so everything is removed yeah now if i go here in the browser you can see here we are only getting navbar home and footer and if we go in this public index.php so let us give some background color in pg okay 200 and now you can see here the background has been changed so we have successfully installed the television css okay now let's leave this the front-end installation here and tomorrow will be continuing with this okay now let us set up the back end so for that let me go to the site's directory here and i will say laravel new blog dash dash jet and if i do it like this jet stream will be installed automatically so if you haven't installed this laravel as a global dependencies then you can go ahead in the laravel documentation and go under the installation section and you can just look at this installing laravel guide and you can install it it is very easy to install and now if we do it like this and hit enter now we we want back end to be powered by inertia so we will hit 1 here and enter we will your application use teams no we don't use teams for now okay now after this it will create full project for us the jet stream is installed now let's just go inside this blog directory here and let us open this in the ps4 so let me close the previous one okay now i have currently installed this in this my site's directories so whenever i install a laravel project then i can access this using the folder name and dot test so currently the folder name is blog and if i go here and if i say block.test my laravel project will run so as you can see here that it is access denied for the user root for localhost so let us set up that first and if i go in the dot env file and we'll say blog root and password1 and let us create that table okay i have created the database and let me migrate so all the migration that comes with jet stream are migrated now okay now let's see in the browser so you can see here the dashboard is now open so you can see here login and register here yeah so we can enable and disable these features so now if i go here inside the config and here we can find the fortify here so authentication is handled by fortify within the jet stream and if you see here the features these features are enabled by default now if we don't want registration yeah let me comment that and if i come here and you can see here the registration url will be gone there will only be the login url let us not disable that for now and let us quickly register a one user from here now i have registered and you can see here the dashboard here now if we go here in the web.php file inside the routes so we can see here this home page slash yeah and slash dashboard over here so now let us just say auth here and whatever routes we'll be building that will have let's say we will be building articles then that will be dashboard slash articles yeah so let's fix that so let us say prefix dashboard and what we will do is group function and we'll be grouping this so what we can say is the route and we'll copy this and add it here so let me format it and let me remove this comment okay now let me also change this dashboard to only slash because everything will be prefixed by dashboard then we don't need to add the dashboard here yeah so since it is running from the closer so let us create a dashboard controller and let us return this view so you can see here it is returning the inertia response not the view okay so if you don't know anything about inertia i will be creating a separate series where i'll be explaining you each and every feature of inertia but this is a project so i'll be thinking that you know about inertia.js so i'll not be explaining each and everything but whatever comes in i'll be explaining it a little bit now let us create a controller so so i have made alias for php artisan make controller i'll call just pa controller okay admin slash so when i do admin slash dashboard controller then it will create dashboard controller inside the admin folder so now if i do it like this so if you go here inside this admin http controllers and inside here it will create the dashboard controller yeah now if i go here inside and we can i can simply say index and i'll just return same thing that is being returned from here yeah and let me just remove this and let me import the inertia here so you can see it is imported here and instead of the closure here let me return this dashboard controller and index method here okay now if i go here in the browser and refresh the page so it should work the same way so you can share nothing has been changed so the jet stream is installed now let us also go and look in the client side so just before that let me also show you here in the jet stream section so here you can see here these features are turned off yeah now if i go here in the at admins and profile section so you can see our profile information password updates so browser sessions and these accounts are enabled but there is no profile upload feature now to if we go here and just uncomment this and let me go in the browser and refresh then you will see here this profile photo here now we can update our profile photo as well so we need this feature now we don't want this api and teams feature in this project so we'll just let it disable also since we have already created an admin so we don't want registration feature so we'll also disable that okay now let us go to the js folder so resources js and here inside you can see all the components of the jet stream that is available here we can have this uh so we have message we have button yeah we have input fields we have models and everything most of there are more many things that we'll be using from jet stream and the components that are not available for us through the stream we'll be building ourselves we'll be making a new components folder here and we'll be making that and now let us go to the app.js folder now you can see this is just requiring the bootstrap which is from this bootstrap.js and it is just loading the loadas and xus and it is also importing the view and here it is loading the inertia.js inertia view and laravel jet stream also provide us with the neat clean api while submitting the form so it is requiring that i'll show you when we'll be building the back end and this portal view is for the sewing and hiding of the models now it is just initializing the inertia app inertia form and some of the portal view and it is just setting up the view js and here it is setting up the inertia.js yeah so initial page will be the props that will be available on each and every piece of our application yeah i'll be showing you when we'll be building this and also this means that whenever we visit let's say slash yeah so it is taking us to the dashboard then what it will do is it will just go inside the page and dashboard so if you see here in the dashboard controller we are just returning the dashboard here and when we return the dashboard it will go inside the pages folder and look into the dashboard.view yeah so if you see here in the inside yes it is looking into the pages folder and inside we are getting here dashboard.view so it will just load this view okay and you can see here this is the app layout yeah so this app layout is coming from layouts slash app layout and if we go here in the layout slash app layout all the navigation related code is over here navigation bar called this code yeah and here if we go here at the bottom here and if we see here here is a slot and in the dashboard whatever we put here inside this app layout will be inserted in this slot and currently this is being added in the profile page so if you go here in the dashboard so this thing is all from this point yeah from this logo to the all the section is in this dashboard section so it is being shown here and it also include this header section which is this dashboard okay this will be the breadcrumbs okay now this is the welcome here and component and if we see here where is it coming from so it is brand j jet stream welcome and if we go here in the jet stream and here welcome yeah so there are all these codes so all these bottom quotes are coming from this welcome component so these are all the things that come by default with jet stream so we'll be removing all these things so we don't need this welcome yeah so we'll be just removing this and here we'll say the dashboard page content and now for this to take effect we have to say npm run watch here okay after this if we go here and refresh the page now we'll see this the dashboard page content so we'll be leaving it here and in the next video we'll be first making the website so all the design related stocks will be starting with that we'll complete that and then we'll come to the back end and we'll be creating apis for that yeah we'll be creating categories crowd will be making articles claudia and we'll be showing all those on the front end and also we'll be adding some settings stops like about us content like contact us like email phone number that all will be under the settings and we'll get all those data from there and displaying it in the front end whenever we complete the front end yeah okay that's it for today guys and in tomorrow's video we'll be looking into the front end stops so if you enjoyed this video then please don't forget to hit that thumbs up button and also hit subscribe button if you want to see more videos like this thank you for watching have a great day bye

Channel: Laratips

Views: 6,020

Keywords: tailwindcss, vue 3, laravel 8 tutorial, vuejs, vuejs project, laravel jetstream, laravel tutorial for beginners, laravel 8 project, laravel 8, vue 2, laravel tutorial, laravel project, inertiajs, laravel beginner tutorial, jetstream, laravel basics, laravel 8 basics, laratips, laravel tutorials, laravel for beginners, laravel and vue, vue and laravel

Id: 4gO3tPRw03w

Length: 17min 18sec (1038 seconds)

Published: Fri Oct 30 2020