Laravel Jetstream: How it Works and Example How to Customize

hello guys today let's talk about laravel jet stream and how it works we will try to understand what's under the hood and we will try to customize one part of it so laravel jet stream came out in laravel 8 as authentication scaffolding and when you install laravel project with jetstream you see this dashboard and you can go to profile management and edit your name email password there's also two-factor authentication account delete features and a few more stuff but for many people the code of jet stream felt pretty new a pretty drastical change to compare with laravel ui which was kind of a standard before level 8 because with jet stream there are a lot of new technologies for those who haven't used them before so tailwind css instead of bootstrap blade components and slots if you haven't used them then you have to choose livewire or inertia as a stack then there's also laravel fortify to update the profile and authentication operation so how to make sense of all of that let's dive in together with help of official jet stream documentation and as an example in profile information we will add a third field username so new field in the database and let's try to update that with jeff stream and let's start from the very very beginning and let's install laravel with jetstream with this command so laravel new i have a project two folder minus minus jet then it asks which stack do you prefer livewire or inertia and i will choose livewire do you need the teams no in our case and then it installs all the jet stream stuff with all the dependencies okay it's all successful and when we launch that domain locally project2.test we see this which is default laravel 8 page but on top of that we have login and register and this is where jetstream comes in so login and registration form is powered by a jet stream and if we try to fill in with fake filler chrome extension and register we are inside of that dashboard which we have already seen in the beginning of this video and we can edit the profile now how does it work under the hood let's find the code place where the profile information is edited and i have done that behind the scenes if you navigate to resources views profile and then there are blade files and one of them is update profile information form it's a typical blade file but for those of you who haven't used larval blade components it may look unfamiliar so what is that x-jet something what is that submit property then if you scroll down to the actual profile editing name field is xjet label xjet input input error what are all those things so first let's understand where that xjet comes from if we open laravel documentation for jet stream if we click jet stream structure and scroll down a bit we will see live wire components publishing and those are blade components exactly those xjet something so if we publish those launch that command copy and paste they come from vendor folder to our resources views and let's open those resources views vendor jet stream components and here you can see all the x-jets something just without x-chat prefix so x-jet label is actually label blade which is just this it's a simple label with a few variables if we go to x-jet input input is this just input with attributes with some values and then input error is a validation error which looks like this error typical blade command and how those things are initialized with xjet you should go to jet stream service provider it's in vendor but you don't need to edit that there's a function configure components and here you can see register component function where you see blade component jet stream components some component with alias jet dash so if you are not familiar with blade components those are components that are transformed with x dash something in your blade and this alias adds another prefix so final result here is x dash chat dash and then whatever is the component name and if it sounds too complicated to you you don't have to use blade slots in jet stream you can just do input so for example if we remove xjet label label 4 value and change that to this label like this and let's refresh the page visually it shouldn't change as you can see email something like this so those blade components are just the way to shorten the code and compile the repeating code into some components like input like error like label and stuff like that and there are in total around 20 components or so and they are used in the blade of profile editing forms in jet stream now next thing we need to understand is how live wire is enabled here so x jet form section with submit is actually if we open form section it's a blade but inside of that blade we have wire submit prevent so submit is the variable which is passed here so update profile information becomes a part of this variable which then should fire livewire method update profile information and those live wire components are inside of vendor so they are not publishable as i understand and if we go to vendor right click find in path update profile information you will see this component so there's a folder vendor laravel gesturing source http livewire and you have a dozen of components here and this is how it looks in livewire so if we search for update profile information there's a method which is called when you click save here so that save is a form submit which actually is going here and then there's updater class we will get to that in a minute that updates the user profile with this state or if you enable photo upload which we didn't in this case it's merged into the array and that updater is a fortify class so another new thing here fortify is an engine that powers the auth management from the back end and if we open the documentation for jet stream and go to profile management actions it's all documented and part of that just stream fresh new code is that you have to read all the documentation so it says app actions fortify update the information and if we navigate to app actions fortify here we have update profile information and this is the actual code that happens update we have array of input validation and then we update the user so now let's try to add the username in our form here let's close some stuff we don't need this in the form we just duplicate copy and paste this one for example name email and there will be username so username label for username value username id username type text wiremodeldiffer this is live wire stuff so state user name autocomplete username and input error is also username now we need to actually add that username to the database and this is not just stream specific so we do php artisan make migration add user name to users table and in our migration database migrations add user name table string user name nullable and in the user model we need to add that as fillable this is the default user model and we add the username here and let's migrate the data i will re-migrate everything because i have some other project here so our new migration is present so we add username to users table and if we refresh our profile of course we've received the database so let's go to the home page and register again fake filler register and if we go to profile we see number three field username but if we type something in we save it's actually saved and this is where livewire is used so it wouldn't refresh all the page it saves only that profile section but if we refresh that profile username isn't saved so where do we save that in the fortify action we open again i will close some stuff so here in the fortify action at the very end we have username and input contains all the input all the state from livewire component input username and let's refresh the page let's put abc here save and refresh the page and as you can see username is present and if we open the database here's our users table and at the very end we have username with abc which is saved successfully so this is an overview of jet stream how it works on how to customize small part of it and as i said in the beginning of this video it may sound overwhelming and over complicated for those who haven't used any of those new technologies but a few weeks ago there was kind of a fight between community and taylor of why he over complicated the stuff and he explained it really well this is the way how he would personally build a new modern web app in 2020 so he prefers tailwind over bootstrap he uses blade components to avoid duplication of the code he uses fortify to have a separate auth back end so you would be able to use any front end ujs react or blade on the front end and fortify would power only the back end and then live wire or inertia is just additional layer to add reactivity to the page so dynamic things so the forms wouldn't refresh the whole page but instead would just update as we saw a specific section on the page so it's a modern user experience instead of refreshing and reloading the page every time you may agree or disagree with that but that's taylor's way how he suggests us to build modern web apps if you want to go that path i totally recommend you to at least try jet stream and see what's under the hood and if you see something unfamiliar don't be afraid just navigate the code searching all the project read the jazz stream documentation it was updated a few times and i'm pretty sure you will learn something along the way even if you don't want to use jetstream even if you don't like it but as a learning process just as an open source project to learn from it's a good way to learn and speaking of learning i can help you with one part of that which is laravel livewire recently i've launched a separate course called practical live wire from scratch for those of you who haven't started and haven't tried livewire in just one week i have over 200 students with already testimonial present so it seems like that topic resonated with the community and i encourage you to enroll in my course on laravel livewire or any other of my courses on laraveldaily.teachable.com see you guys in other videos

Channel: Laravel Daily

Views: 49,198

Keywords:

Id: d8YgWApHMfA

Length: 12min 17sec (737 seconds)

Published: Mon Nov 02 2020