What is Laravel Jetstream & How do we Install It? - Laravel Jetstream for Beginners

[Music] what's up larva developers and welcome back to this new mini series where we'll have a look at larval jet stream which is an authentication system like Laura Val Breeze but then on steroids quick boss I'm currently working on a new udemy course well we'll dive into laravel databases and eloquent if you think that there is a topic that should most definitely be included feel free to drop it down below in the comment section if you would be interested in the course or just want to support the channel make sure that you follow me on either Twitter Instagram or YouTube to be the first one to find out where the course gets released before learning larval jet stream it is recommended that you have used Largo Breeze before it's not required but it does make the process a lot easier I have a 45 minute larva Breeze tutorial available which I will link in the description down below now most larval developers have worked with larva Breeze before which is an authentication system as you could see right here that generates a register page in the forward slash register endpoint but it also generates a login page which you can access through the forest login endpoint once you log in you will get access to the dashboard now once we log in with the registered user let's give it a try you will see a simple dashboard where in the top right corner you have the option to select your own profile which gives you the option to see your profile information you can update your password and you can delete your account nothing more than that a larva Breeze is beautiful but it is a pretty simple larva authentication scaffolding created with Tailwind CSS and blade templates which is famous for its Simplicity now larva also offers jet stream which like I said is larva breeze on steroids and the interface looks pretty similar just room offers with Breeze has to offer but on top of that it even offers two-factor authentication API tokens session management API through Laurel sanctum and the option for Team Management features just like the overall Breeze it has been designed using Tailwind CSS but it gives you the option to either use live fire or an erasia scaffolding it has a beautiful register page which is similar to larval briefs register endpoint and it has a login screen which is also pretty similar so let's log in and see what the difference is right here you will see that we have been redirected to the same dashboard endpoint where we have the option in the top right corner to select our name where we can manage our account so let's click on profile where you pretty much find the same options but once we scroll down you will see a lot more information for your account management compared to Breeze we can update our password we can enable two-factor authentication right here it has a browser session where we could log out other browser sessions and we could simply delete our account on top of that you could even create larval jet stream for teams where you have a new extra option in the top right corner next to your name called code steam where you have multiple options you have your team settings you can create a new team or you can switch between teams interesting isn't it let's start off by installing our larval jet stream scaffolding inside a new project so let's navigate to the CLI and I usually create a larval project using a larval installer tool so let's run laravel new and as Neymar app Jet Stream app let's hit enter this might take a moment because it's pulling in laravel all right our larval application has been installed so let's change directories into our newly created larval application by saying CD Jet Stream app now what we have done so far has not created or added our wall jet stream for us in order to do that we need to use composer right inside of our project directory where we could run composer require a package from larvel itself forward slash with the name of jet stream what this will do is simply adding jet stream into our current larval project we do need to install it as well which goes through the PHP Artisan jet stream colon install command but wait a moment since we could add a front-end stack right here as well now like I've mentioned before larval jet stream supports two front-end Stacks you could install your jet stream front-end s inertia or you could decide to add a live wire now both Stacks support an additional flag which is dash dash teams which will implement the team's functionality I've showed you a moment ago where we reviewed larval jet stream finally it even allows you to use pest PHP for testing by adding another flag which is dash dash pest what this does is simply installing a past test Suite instead of the default PHP unit test Suite that larva supports the stack that you are going to use is completely up to you I will stick to a live audio for this tutorial so let's hit enter right here now that it's installed in larval jet stream we could quickly navigate to phpstorm since I've already opened my project because we do need to set up our database credentials inside the EMV file so create your own database and change up the database credentials inside the EMV file where we have our database credentials the only thing that I need to do is add my password right here of dari1234 let's navigate back to the CLI since we're going to persist users inside our database we need to run the PHP Artisan migrate command which will migrate all of the migrations for us as you might see or notice right here it has migrated more than the four default migrations for us it has added a two-factor column for the two-factor authentication functionality it has added a team stable that has created a relationship table of our team user it has created a team invitations table and it has created a sessions table for us in order to finalize the installation and to make it work we need to build our front-end scaffolding which can be done through the npm install command and then running the npm Run build command which will build the front-end assets and since I'm using larval valet I could run the valet link to link my project so I could open it inside the browser so let's actually do that let's navigate to Google Chrome allow me actually close off the tabs that I have and let me navigate to Jet Stream app.test as you could see it has pulled in larval with a login and register button in the top right corner but let's actually change our endpoints to forward slash dashboard which will redirect us to the login page and this is happening because Jetstream uses a middleware let's quickly navigate to phpstorm open the routes directory the web.php file now right here you will see that we have our forward slash dashboards endpoint which has been wrapped inside of an odds colon sanctum middleware and the user needs to be verified before he can proceed so let's navigate back to Google Chrome and let's change our endpoint to forward slash register let's create a new user with the name of code redari I have my email my password let's click on register and as you can see after our registration we have them logged in as well because we have access to the forward slash dashboard endpoint right now now let's change the logo that we have in the top right corner and the one that we have inside our dashboard because at the moment it is using larval jet streamer's logo before we could do that we need to publish Live Wire its Blaze components through the CLI so let's navigate to iterm and let's call the PHP Artisan command vendor column publish we're going to add a tag right here which is equal to jet stream Dash views let's hit enter all right there are three files that we need to customize right here the logo in the top left corner right here the logo inside of our dashboard and the logo inside our login and register endpoint now the logo in an F Bar is stored inside the assets we published from the vendor directory into our Resources directory so let's open it let's open the view subdirectory where we have a published vendor directory where we have our components and right here we need to start off with the application mark.blade.php now we could use a SVG right here and I honestly can't be bothered doing that so I will just create an image tag right here with a source of my own website and this is completely up to you what you want to use so let's say block code with diary.com forward slash CWD underscore logo.png and let me actually outline this on the line below I'm going to add a width right here of 100 pixels and the alt tag is application logo the second component that we need to customize is the application logo.play.php that's actually remove the file copy the application markdown plate image tag paste it right here now let's change the width right here to 90 pixels all right now there's one more file that we need to change which is the application card logo right here now let's paste the same image right here now let's navigate back to Google Chrome refresh it and you'll see that our image or logo has been added in the top left corner and inside of our dashboard as well now I think that the logo is a little bit too big so let's navigate to phpstorm and let's change our application Mark to let's say 70 pixels all right that looks a little bit better now the last thing that I want to change before I continue on with the next chapter is customizing all the Indigo colors to the same color as my logo so all the blue purplish colors that you see and I don't want to do that manually but phpstorm offers a find and replace functionality which I want to use let's navigate back to phpstore now let's close off the entire Resources directory let's right click right here and let's say replace in files what we want to replace is indigo and it has found how many matches 21 and we want to replace it with let's say yellow so let's hit enter a couple times now if we navigate back to Google Chrome and refresh it you'll see that the colors have disappeared but they're not called yellowish and that's happening because we need to compile our assets so let's navigate to the CLI and let's actually keep it building through the mpm Run Dev command all right let's navigate back to Google Chrome once we refresh it you will see that all Indigo colors have been replaced with a yellow slash goldish color now this was it for this tutorial we have looked at the differences between larval briefs and larval jet stream we have installed lower wall jet stream 2 composer we then change the application logo followed with changing up the primary color of our application in the next video we will enable email verification when users register to our application if you do like my content and you want to see more leave this video a thumbs up and if you're new to this Channel please hit the Subscribe button

Channel: Code With Dary

Views: 9,787

Keywords: laravel sanctum, laravel dashboard, learn laravel jetstream, laravel jetstream tutorial, laravel jetstream installation, learn laravel for beginners, how to learn laravel in 2023, how to build restful api using laravel, laravel authentication, laravel authentication review, laravel for beginners step by step, introduction to laravel jetstream, what is laravel jetstream, install laravel jetstream, how to setup laravel jetstream, jetstream vs breeze

Id: -nzeLnmcseY

Length: 11min 24sec (684 seconds)

Published: Wed Feb 08 2023