Getting started with Laravel Breeze and Jetstream

hey everyone andrew here this video is the first in a three-part series on authentication in the current larval ecosystem which at present is version 8. in this video i'm going to be discussing the breeze and jet stream packages what they do what their use cases are and show you how to both install and work with these in a laravel application alright let's get started the first package we're going to work with is breeze breeze is fairly new being released only a few months before this video was published if we head on over to the larval documentation you can see that both breeze and jet stream are under this starter kits section which is appropriate they're both packages that add pieces of front-end and back-end functionality to your application in their own words breeze is a minimal simple implementation of all of laravel's authentication features made of simple blade templates styled with tailwind css you can think of breeze as an upgrade of the auth views found in the laravel ui package which itself was an extraction of authentication views from before version 6 was released continuing on installation looks pretty straightforward after migrating our database we have to run a composer require to install the package now as you can see we have a blank laravel application freshly installed so let's head into the command line and first run the artisan migrate command to get our default tables added to the database okay that finished successfully now onto composer composer require laravel breeze dev okay perfect next artisan breeze install which populates our application with the necessary views styles and scaffolding to get those dependencies installed we need to run npm install and npm run rundev to compile our frontend assets all right that finished up successfully we can see our compiled css and javascript with the mix output so let's take a look at our application now and see if anything's changed if we open up the routes web file we have our generic welcome route still there however there's a new dashboard route that's guarded under the auth middleware there's also a require statement for auth.php opening that up and it's an entire list of our application's authentication routes there's routes for logging in registration password resets email validation and logging out heading to the resources views directory a lot has been added here we have our dashboard view that we saw earlier from our routes web file and it's extending a blade component called app layouts which we can see here under the layouts folder each of these views in the auth folder is extending a different blade component the guest layout and there's multiple anonymous components inside each view corresponding to the blade files under the components directory in our views folder the bulk of this functionality is plain blade components using the x prefix and the magic of laravel however alpine js is included in our app's main javascript file for a small amount of basic interactivity like toggling down a drop down menu for instance let's head to our app in the browser and refresh okay as you can see we now have two links in the upper right one for login and one for register let's go ahead and click on register and sign up for an account this brings us to a form styled with tailwind css that contains all of the fields our user model needs let's fill in the details that we want and hit register we've been successfully added to the app and sent to the dashboard view logging out and using the login link works just as well let's see what happens if we forgot our password adding in our email address and clicking the email password reset link we get a message back that the application has emailed our password reset link now because this is in local development by default laravel uses mailhog to trap outgoing emails for testing purposes i'm running an instance of it locally and opening up my browser to localhost 8025. you can see the web interface for mailhog with our reset password notification email in the inbox if we open that up we get a nicely styled email with a reset password button or a plain link that we can follow this pre-fills in our email address and all we need to do is supply a new password perfect now what about verification laravel has the ability to record and check for verified email addresses and breeze includes views to handle those situations as well the first thing we need to do is head on over to our user model if we look at the use statements above we have this must verify email contract that's not currently being used all we have to do is implement this into our user class and save now if we go back to our application and register with a new email address we're still able to make it to the dashboard but checking mailhog we have a verify email address message that was sent to our user if we wanted to gate our dashboard or any other routes for instance from users who haven't verified their email address yet we just have to add in the verified middleware to the desired routes refreshing the dashboard view we are now redirected to a verify email route and shown a message we are also given the option to resend the verification email or log out let's head over to mailhog and verify our email address with a link in that message and perfect it automatically verifies us and sends us to the previously blocked dashboard view logging out and back in we are brought to the dashboard just as expected well that's about it for breeze it is in essence a scaffold for a solid authentication flow in your laravel app with sleek views an extensible component system and a basic dashboard layout this is perfect if your app mainly consists of ordinary larval blade templates or if you want to rapidly get authentication added to an application without a large amount of opinionated code now let's move on to the second part of this video jetstream this package is branded as a beautifully designed application starter kit for laravel not only does it include all of the authentication views and features that breeze does there's also two-factor authentication api authentication with sanctum and team management features right out of the box jetstream is meant to be a framework within a framework giving you a scaffold and library of features to build a fully functioning sas dashboard or other type of application out of tailwind css is the main style library and you're offered two choices of interactivity scaffolding through livewire or inertia there's been considerable feedback from the larval community at large about using new or unproven technologies however there are other alternative scaffolds that use different front-end frameworks like view or react but the official jet stream repository currently only supports the two previously mentioned alright now that that's out of the way the first thing we have to do is actually install jet stream just like with breeze a simple composer require command along with a custom artisan command is all it takes so let's open up our code and get started just like last time what i have here is a completely blank larval project that was just initialized in the command line let's run composer require laravel jetstream and once that's finished artisan jetstream install along with our scaffold of choice livewire everything went through successfully so now it's telling us to download and compile our front end assets with npm install and npm run dev we can see our mix output here which means that everything compiled our final step would be to run artisan migrate and generate our database schema all right let's refresh our app in the browser and see what we have just like with breeze there's a login and register link at the top right and clicking register we are presented with a form to fill out i've added in my info and hitting register creates the user logs us in and navigates us to the main dashboard layout so exactly the same flow that breeze had we even have the same logout the same forgot password and the same login functionality now let's talk about adding something to our jetstream dashboard what if we wanted to have a section in our application to create manage blog posts first let's open up our application and head into the routes web file here like with breeze we can see our default welcome view and also our dashboard view it's guarded by both an auth sanctum middleware and a verified middleware which means that it's only reachable by those logged in users who have verified their email address if that functionality is turned on instead of creating our new route and having to use the same middleware call i'm first going to make a route group containing the auth sanctum and verified middlewares and then inside of that group we'll add in the dashboard route above okay now under that route let's add our new one it'll be at dashboard posts and it will return a view called posts with the name of well posts opening up the dashboard blade template that's provided by jetstream let's copy that over to post stopblade.php and modify the header title to say all posts inside the body here we're going to replace the x jet welcome blade component with a simple span so that we know that our view is working properly for the final step let's open up the navigation menu blade component and copy the dashboard link in there modifying it to point to our new posts route heading to our browser let's refresh and see how this looks perfect clicking on it brings us to the post page with our test description displaying in the body now that we have a view up we need to create our actual post model and migration let's open up the console and use artisan make model post with the migration flag opening up the migration i think we'll keep this relatively simple each post should have a title and a body that looks good opening up the post model class we'll add this protected guarded property as an empty array letting any data attribute that we pass through be mass assigned to it and finally we need some test posts now i could just open up tinker or the database directly and add in a few values but i prefer using factories for this in our console artisan make factory post and let's open up that post factory class thanks to the magic of larval we already have the post class filled in for us but now we have to define this return array of values our posts should have a title which we can generate with the faker library's sentence method five words should do it and the body which we'll use a paragraph for now to populate the database i'm just going to run artisan tinker and in the shell instance use app model post factory times 3 create there we have our posts let's exit the tinker instance and head back to our routes web file we need to pass in these posts to our newly created view so after return view let's add with and pass in an array posts post all okay our data is passing through to our view but we haven't displayed it yet in post.blade.php let's remove that span and add in a for each loop echoing out each post's title and body styled with some tailwind classes okay refreshing our browser and that looks great our three test posts that we created are displaying just as expected now we could continue this way and create another new view for creating a post and a view for editing a post and that would be perfectly fine however let's use the power of livewire and jet stream to create a more sleek interface that's on a single page first let's remove what we have here and replace it with an at livewire directive passing in just posts in our terminal we can create that livewire component with the help of artisan make livewire posts this is going to generate both a class in app http livewire and a view in resources views livewire let's open up that view first and paste in the post loop that we were using before if we try to refresh and render this we get an error undefined variable posts that's because we are running a for each loop on something that hasn't been passed into our live wire component at least not yet if we open up that post class we can define a post property any public properties that are added into this class are injected in and immediately available to the live wire components front-end template so to complete this all we have to do is pass those posts in through a second argument in the livewire directive posts posts now if we hit refresh we see our posts just like we did before except they're wrapped in a live wire component that we can now add interactivity to for this example i want to display a button at the bottom of the page that will show a pop-up that we can use to add a new post using a jetstream component x jet button we'll have it say create post and there it is but clicking it doesn't do anything yet we have to add this wire colon click event to the button component and tell it to do something in this case let's set a variable called show post modal as true and for our popup modal we're going to use another jetstream component this x-jet dialog modal i'm just pulling in this code from another view and pasting it into our post one for the wire model this variable determines whether or not to display the pop-up we're going to modify it to match our show post modal variable that we set to true when the create post button is clicked if we open up our posts livewire component class we can add in that boolean as another public property and set the default value to false so by default the popup modal is hidden this dialog component expects a title content and footer slot to be filled in in order to render it properly so let's update these to fit our post page a couple of form fields for both the title and the body and both of these will have a wire model attribute set to the title and body properties of a state object this in turn will correlate to a public state array property in our livewire class in essence data attributes and variables that we specify in livewire components have counterparts in the components class methods that are called on these elements are called asynchronously to the backend class and the altered data is injected back into the view that's the magic behind livewire alright when this close button is clicked let's set the show post modal boolean to false and we'll have another button here called save that will call a save post method when clicked in our post livewire class let's define that save post method and leave it blank for now our state is going to be an array as i said earlier with a title and body attribute both set to blank by default now if we refresh our application and click on the create post button we can see our pop-up modal displaying it contains our title some form fields and buttons that we specified earlier the spacing is a little weird but we can go back to the form and fix that real quick the beauty of livewire since it's all running through php and blade components is that there's no need to recompile any assets the change that we just did is available immediately if we click the create post button again unfortunately though if we add in a title and body nothing happens when we click save heading back to our post class in that save post method that we defined earlier let's create a new post we can call post create and then pass in the whole state property since it's just an array that contains the values that we need if it's saved successfully we'll update the post property to contain all of them which includes the newest one also hide the modal and reset the state values if a user wants to add in another post actually i'll abstract these last two out into a new function called reset state all right that's looking good but let's see if it actually works opening up our modal with the create post button adding in some details and clicking save and our new post was created the modal was closed and our posts are showing the newly saved item without having to refresh the page at all and if we open up the create post dialog again the form is blank and ready for a new post since we cleared out the state arrays attributes alright the last thing that i want to add on this page is if we wanted to edit a post back in our posts livewire blade component let's change the title of each post to a link with the attribute wire click prevent and it will call an edit post method we can create that method in the post livewire class but we need to know what post we are editing instead of passing in a whole object though or a variety of properties we can use laravel's implicit model binding and just pass through the id then in the edit post method use post post which will return back the full object if the id matches the one in the database from there we can just update the state with the post body and title from the database and display the modal by updating the show postmodal property to true i'm also going to tack on this id attribute to this state as well to help us differentiate between a post from the database and a new post speaking of which in the safe post method we'll modify it to include updating existing posts as well as creating new ones if the state's id attribute exists then it's opposed from the database so we should find it and update it with the title and body attributes from the state array property otherwise we'll create the new post and either way if it went through successfully let's return all of the posts and reset the state all right time to try this all out refreshing clicking on a post title and perfect so far the state and by extension the form fields are populating with that post data and if we modify it and click save we are seeing the updates made to the array of posts immediately and we can even create a new post save it and see it alongside the others as well using the same method we've successfully added a single new page to our judge stream application and used the livewire scaffolding to make calls to our database and update our models in the same view before we end this alongside the dashboard view there's also this incredibly handy profile section that comes out of the box with jetstream everything in here works through livewire components making asynchronous calls to the backend for saving or updating user information changing a password enabling or modifying two-factor authentication with google authenticator viewing active browser sessions and deleting your account everything in here is available by default and installed with the jet stream package well that's it for this video you've learned how to install and use both breeze and jet stream larval authentication starter kits you've also heard some of the use cases for each and built a live wire component capable of creating and updating a model in your app huge thanks to my github sponsors and everybody else who continues to support these videos stay tuned for the next part of the series where i go over the sanctum and fortify packages as always if you have any questions about this or any other web development topics please feel free to reach out to me in the comments or on my twitter linked below thanks for watching

Channel: Andrew Schmelyun

Views: 10,169

Keywords: laravel, web development, laravel breeze, laravel jetstream, php, php development, web dev, web development tutorials, laravel tutorials, web dev tutorial, php tutorial

Id: p_ZYVObwBXQ

Length: 28min 6sec (1686 seconds)

Published: Tue Jan 19 2021

Reddit Comments

[u/aschmelyun]

Hey everyone, Andrew here!

This is the first part of a three-part series I'm making on Laravel's current authentication options, and deals with Breeze and Jetstream.

In this video, I showcase installation, setup, give an overview of the features and use cases of each, and demo what their frontends and user interface flows look like. In Jetstream, I even build and use a LiveWire component for creating/updating a model.

Let me know if you have any questions!

[u/skatieholmes]

Why did you delete and repost this? https://www.reddit.com/r/laravel/comments/l0w300/i_created_a_quickstart_video_on_breeze_and/

[u/jeh5256]

I haven’t had a chance to play with Breeze or Livewire yet so this was a helpful video.