What is Laravel Jetstream?

[Music] what is larabelle jetstream let's take a look at the documentation i'm just going to open up chrome here and we're going to go to jetstream.laravel.com so right here under laravel jetstream laravel jetstream is a beautifully designed application scaffolding for laravel jetstream provides the perfect starting point for your next laravel application and includes login registration email verification two-factor authentication session management api support via laravel sanctum and optional team management jetstream is designed using tailwind css and offers your choice of livewire or inertia scaffolding now you're probably thinking wow that sounds great but what's the difference between livewire and inertia well let's take a look down here under available stacks larabelle jetstream offers your choice of two front-end stacks livewire and inertia each stack provides a productive powerful starting point for building your application however the stack you choose will depend on your preferred templating language so first we have live wire blade and then down here we see inertia with view so let's look at live wire blade laravel livewire is a library that makes it simple to build modern reactive dynamic interfaces using laravel blade as your templating language this is a great stack to choose if you want to build an application that is dynamic and reactive but don't feel comfortable jumping into a full javascript framework like vue.js when using livewire you may pick and choose which portions of your application will be a livewire component while the remainder of your application can be rendered as the traditional blade templates you're used to alright so livewire uses blade files down here under inertia it sounds like a nurse is going to use view instead of blade files but let's take a look it says the inertia.js stack provided by jetstream uses vue.js as its templating language building an inertia application is a lot like building a typical vue application however you will use larabelle's router instead of view router inertia is a small library that allows you to render single file view components from your laravel backend by providing the name of the component and the data that should be hydrated into that component's props in other words this stack gives you the full power of ujs without the complexity of client-side routing you get to use the standard laravel router that you are used to the inertia stack is a great choice if you are comfortable with and enjoy using vue.js as your templing language so livewire uses laravel blade templates and inertia uses vue.js for its templating language if you're not super comfortable with javascript then laravel blade files are probably a better option for you so you're probably going to want to stick with jetstream livewire if you're more comfortable writing javascript or have some experience in vue.js you'll probably feel right at home using jet stream inertia so what makes all this possible if we look over here we see laravel fortify under the hood jetstream uses laravel fordify now if you're not familiar with laravel fordify it's an authentication backend for laravel fordify registers the routes and controllers needed to implement authentication features like login registration password reset and email verification so fortify handles all the back-end processes for this and jet stream provides us with a nice interface to use these back-end processes if we scroll back up to the top right here we can see jetstream also uses larabelle sanctum to integrate api authentication within our application so both of these will be set up automatically when using jetstream it doesn't matter whether you choose livewire or inertia to scaffold out your front end you will be consuming the same laravel packages behind the scenes let's take a look and see how easy it is to get started with jetstream i really enjoy using vue.js to design the front end of my applications so let me show you how easy jetstream makes it to get up and going if we scroll down here to the bottom of the page we can go over here to the installation i'm going to open up terminal so i can run some of these commands so the first thing we want to do is we want to create a new project so i'm going to use composer create dash project laravel slash laravel and then let's give our project a name i'm just going to call it jet stream and then press enter all right we just created a new larabelle project we haven't included jetstream yet so let's cd into our new laravel project so i'm just going to cd into jetstream now you can call this project anything you want i'm just naming it jetstream because we're looking at the larabelle jetstream package you don't have to call it jetstream so now that we have a new laravel project created let's just do php artisan serve and now we have a new laravel development server so i'm just going to copy this command c to copy it we'll come back over here to our google chrome and let's just open it up here in our browser so this is what we get by default when we create a new laravel project now that we have our new laravel project up and going let's take a look at the laravel jet stream installation so it says we want to run for installing jet stream you may use composer to install jet stream into your new laravel project so let's just go ahead and copy this and we'll open our terminal and i'm going to open up a new tab i'm just using command t and that gives me a new tab make sure you're in the root of your project folder so i'm already in jet stream right here and i'm just going to paste that in and press enter all right so now that we've added jet stream into our project let's look at the next step down here in the installation it says right here install jet stream with live wire we don't want to use live wire at least not for this video i said i was going to use jet stream with inertia so i'm just going to copy this right here it's a php artisan command php artisan jet stream colon install and then inertia i'm gonna leave the teams flag off for now let's open up our terminal again and we're just gonna paste that right in all right so it says right here please execute the npm install and npm run dev so i want to copy this command c and then command v to paste it in there and press enter all right so let's take a look at the jet stream installation page again and if we scroll down here we said we weren't going to use teams after installing jet stream you should install and build your npm dependencies and migrate your database so we already ran this npm install and npm run dev the next thing it wants us to do is php artisan migrate now we haven't connected a database yet so let's go ahead and do that now to attach our project to a database i'm going to use vs code and let's open up our project so file open i'm going to find my project i called it jet stream and click open so over here on the left we have our dot env file this is the only thing we need to change to get jet stream up and going currently it says my db database is laravel well i created a database and i called it jet stream i also created a database user i called it scriptster and i created a database password and i used password so if you haven't done this already make sure you go ahead and create a new database create a user that can access that database and give that user a password if you're going to do this in production make sure to use something a little more secure than password i'm going to command s to save that and let's jump back over into terminal now that we've updated our environment file we should be able to hit that database so let's run that php artisan migrate all right now let's jump back over to chrome and let's open up our project we already have a tab open with our project running so this is the default installation of laravel that we're looking at right now i'm going to press the refresh button and i want you to take note up here in the top right corner it's empty so if i press refresh now we see login and register so by installing that jet stream package it just added these two links right here one for login and one for register currently we don't have any users set up so let's go ahead and register a new user i'm going to call my user scriptster for my email i'm going to use scriptster scriptster.com for my password i'm just going to use password and then confirm password i'm just going to use password again if you're doing this in production pick something a little more secure and then click register so at this point in time we haven't written any code we've barely touched our new laravel project all we did was link our project to a database and we ran five commands and this is what we got so this is the landing page for a brand new jet stream project now remember we use jet stream inertia we could use jet stream live wire it will look exactly the same they look identical the only difference is live wires using blade files inertia is using vue.js so let's take a look at some of the scaffolding that jetstream has already set up for us if you're not familiar right here this blue logo this is the jetstream logo they give us this default page right here and then up at the top we see our user name i created my user was just called scriptster if i click that i get this drop down right here so i have a logout button and then i have a profile button let's go ahead and click on profile so again we haven't written any code at all and we're on our profile page so right here we see profile information we can update our name we can update our email if i scroll down i can update my password i have to provide the current password and then i provide the new password and i confirm my new password if i keep scrolling again we haven't written any code yet we get two-factor authentication add additional security to your account using two-factor authentication if i just click this button and enable i can use google authenticator to use two-factor authentication with my application and i haven't written any code yet that's pretty awesome we scroll down even more we see browser sessions manage and log out your active user session so we can log out other browser sessions and then we can delete our account right here so with absolutely no code five commands and linking a database we get all this that's pretty awesome let's jump back over to our dashboard and i want to open up vs code again and let's take a look at the code that's making all this happen so i'm going to close my env file and let's click on app and then actions so we see we have this fortify folder and we have a jet stream folder these weren't there before so let's open up the fortify folder we have a create new user.php password validationrules.php reset userpassword.php updateuserpassword.php and then updateuserprofileinformation.php i'm going to go ahead and minimize this fortify folder and click on jetstream and then jetstream provides us this deleteuser.php so inside of our app we have this new actions folder we have a fortify folder and a jet stream folder so i'm going to minimize this i'm going to minimize the app and i want to come down here to resources now we use jet stream inertia so if i click on js we're going to see some new folders in here so this first folder we see is our jet stream folder and by default when we installed this jet stream inertia package we got all these view components in here this is provided for us by default this is what's creating that page that we just looked at with our profile information and our dashboard we can come in here we can modify any of these if i wanted to change the way any of this looks i can modify it right here it's using tailwind css so if you're already familiar with tailwind you can jump right in and start customizing this dashboard and profile however you want really so let's close out of this modal and i'm going to minimize jet stream the next we have layouts and we have this app layout now this is the layout that makes up the look and feel of that page that we were just on the dashboard and i believe they're using slots to apply this layout to their pages so if we come over here and we click on pages and then we click on dashboard yeah right here we see they're applying the app layout which is this right here and then they're inserting their template header and then some other information right here and then they're importing their welcome from the jet stream welcome we come right here jet stream they're importing that welcome dot view file if i come back over here to app layout we should see some slots right here yes we're inserting we're saying go ahead and drop whatever information we want right inside here and then use the rest of this app layout for the default look and feel for the rest of our pages again we haven't written any code yet so let's go and i want to minimize jet stream i'll minimize our layouts and i already clicked on the dashboard.view but this is our dashboard we get all of our profile view components right here so if for any reason we want to customize these the way they look the way they work the way the user interacts with them we can do all that right here it gives us all the code now anybody that's familiar with laravel fordify or laravel breeze when you install laravel breeze it kind of does a similar thing for you where it creates all the back-end scaffolding for you using fortify and then it provides you all of the front-end code i believe they use php blade files but it kind of does the same thing similar to what jetstream livewire would do for you but if you just install fortify on its own it doesn't provide you any of the views it just provides you the backend functionality and then you have to build all the views so right now we installed fortify or i should say laravel jetstream installed fortify for us and then they provided us all of this front-end view code so all the look and feel of our application is interacting with laravel fordify which we saw at the top of our project up here in our app actions and then fordify so i'm not going to go over every single view component in here if you're familiar with vue.js this is a great starting point to get up and going with a brand new project it really takes all of the headache out of creating a user authentication and login system and just really focus on building your project so i'm going to close my dashboard.view uh let's minimize this we'll minimize pages we'll minimize js we'll minimize resources and let's take a look at routes let's take a look at the web.php so we see this new route right here we're saying route middleware it's using our auth sanctum it's also using verified and it's saying get this slash dashboard route now if we look right here our function we're returning return inertia slash inertia render and then dashboard you're probably asking yourself what is that that that is not familiar they're also saying provide the name of dashboard this is familiar syntax because we use this to name our routes regularly in laravel so really the only new piece right here is this function return inertia render dashboard so what is that doing that is telling our application to come up here inside our resources inside of js and then right here in pages it's saying to render this pages dashboard view if we wanted to create a new view in here we could call it whatever we want and then we could say render that we could just copy this down and say render a new view we'll call it portal and we'll name it portal and command s to save and then just to be real quick just to give you a quick demo we're going to copy this dashboard page we're going to paste it back in there let's rename it and we'll just call it portal we'll rename this to portal and let's just get rid of this welcome and we'll say portal just to show you how this route works so command has to save that so we just created this new portal.view component and then inside of our web.php we're pointing this route actually i didn't change that yet so let's call this portal so we're calling this get slash portal route and we're saying render the portal component and that's going to look inside of our pages and then portal.view so let's command s to save that now we didn't create a link for it so i'm just going to manually navigate to that route just to show you that it works the only other thing we need to do is let's open up our terminal i didn't run npm run watch but let's just rebuild so that portal page is in our compiled app.js so we'll do npm run dev all right that's recompiled let's go back over into chrome i'm going to refresh this page and we just created the route we called it portal so let's go portal and there we go we're pointing we just created that route and we pointed it at that new portal.view page so i just wanted to give you a real quick demo of how routing works with jetstream inertia and how you can point it at your front-end view files let's go back to our dashboard and something else i wanted to point out let's open up the console we'll close out of this and let's click on network if you're used to view you're probably used to building single page applications so every time you click a link on the page you don't want to refresh or lose any of the state that you're currently storing in the page and that might feel like that when you're navigating to different routes now that you're using the laravel router and not view router are we losing state that's the question so let's come up right here and i'm on my network tab and i just want to click profile now it loaded a new page but what did it actually send us if we look right here at preview it didn't send us a new html page or a javascript page so it didn't re-render our page it sent us an object a json object and told our page right here if we look at component profile show it said grab the profile show component any props that you're passing in the url route so user slash profile which is the same as up here and then if we click on our props it's sending all this information so it's not actually re-rendering the whole page it's literally just sending a json object back to us so we can use laravel jetstream with inertia to continue building single page applications we're not actually re-rendering the page every time we visit a route which is what we're used to when using the laravel router it typically renders a whole new blade file and if we have javascript storing state on our front end we end up wiping that all out well that's not the case with jet stream inertia so that's just something i wanted to point out in here i think it's important to know that you're still getting that single page application feel so let me go ahead and close this out and navigate back over to our dashboard so let's look at what our question was when we first started what is laravel jetstream they kind of answer that question for us right here what is larabelle jetstream laravel jetstream provides a beautiful robust starting point for your next laravel application laravel is designed to help you build your application using a development environment that is simple powerful and enjoyable we believe you should love expressing your creativity through programming so we have spent some time carefully crafting the laravel ecosystem to be a breath of fresh air we hope you love it and i do i think this is awesome 10 out of 10 times i want to create a new laravel project it's because i need user authentication i want to have user profiles people need to log in they need to reset their password sometimes i want to use email verification so the fact that they're giving this all to us right out of the box without having to write any code i can start running when i'm creating a new application literally five commands and i'm up and going and i can just work on the core product that i need to create one last thing i wanted to do in this video is to show you guys the api support that larabelle jetstream gives us by default let's open up vs code again i can close out of this web.php let's close out a portal we're going to minimize js we'll minimize resources and we'll come up here to our config and then let's find jet stream right here jetstream.php so it's saying right now it's using the stack inertia and then right here we have these features now by default these features are all commented out now i'm really just scraping the surface of what jet stream does so by no means is this a full-fledged deep dive into laravel jet stream i'm just trying to hit on some key topics that really stood out to me that made my life easier to get up and going if you want to see all the features that jet stream has to offer check out jetstream.laravel.com and it's got very very good documentation to get up and going and really dive in deep for customizations using this package but one of the things i wanted to point out right here is we have inside of our config jetstream.php file we have these features by default jetstream is going to give us a feature called profile photos so if you're using photos for user profiles you don't have to write the code at least you don't have to write the initial code to get up and going they're going to provide it to you and then you can jump in there and customize it for how you need it one of the really cool things that i liked is this features api i'm going to uncomment that i want to save this and let's jump back over into our chrome browser and right now you'll notice when i click this scriptster drop down i see manage account and profile now i just changed config jetstream.php i'm going to refresh this page and i want you guys to see something now if i click scriptster i get this additional item called api tokens right here i haven't written any code for api tokens i can create a new api token i'm just going to call it something i don't know scheduled tasks so if i wanted to create another app that wanted to access this and run scheduled tasks or something for me within my user account i'm going to say they can read they can update and they can create i'll leave the delete off for this api token and let's just hit create look at that i didn't write any code please copy your new api token for your security it won't be shown again so i can copy this out and hit close and now right here manage api tokens so i have this third-party client that i just created an api token for that can now interact on my behalf with my new application this is very very powerful and they make it so easy right off the bat again we typed five commands and haven't written any code yet i almost feel like i'm using ruby on rails right now they call it magic over there the rails magic and it really is you type a couple commands and before you know it you have a full-fledged facebook application but laravel is really stepping it up with this and this jet stream package to really get you up and going quickly i mean it's very very appealing to want to use this in future projects let's do one last thing i don't want to leave all you blade file fans out of this so you saw how quick and easy it was to get this project up and going let's just create a new project using blade files and see how quick we can do it just for fun let me terminate this project i'm going to jump back over to terminal we can close out of this tab and i'm going to stop my web server from running i'm going to cd out of this directory and let's run that same command we did earlier but we're just going to call it something different so we'll do composer create project laravel laravel and we'll just call it livewire so we're creating a new project and it's called livewire we'll see into that directory and php artisan serve it's already running so let's come back over here i'm just going to refresh this it's not going to work because we don't have that route yet and here we go we have a brand new laravel project and we called it livewire so let's jump back over to jet stream in our installation we're going to copy that composer create we'll jump back over to terminal new terminal window and let's just run that composer require laravel jet stream all right we required the jet stream package and next we're going to do this php artisan jet stream install live wire we'll paste it right there all right and let's copy our npm install and npm rundev all right and the last thing we need to do is connect our database so let's jump over into vs code i'm going to close out of this project and open up our new livewire project open all right and just to show you if we go into our app actions we have our fortify folder we have our jet stream folder we'll minimize that we'll minimize our app just so it looks the same as before we'll do jet stream and we'll come down here let's uncomment our api we'll save that we'll close that out we can minimize this and then under env we're going to change it to livewire i already have a user called scriptster and the password is password again i've already created this database and i've already created this user and password this is just a demo if you're doing this in production please pick something more secure command has to save that and we should be good to run our migrations alright so let's jump back over into the terminal and we can run php artisan migrate we ran our migrations let's jump back over into chrome and here's our project we don't have our links yet i'm going to refresh i have my login i have my register i'm going to click register my name i'll use scriptster again for email i'll use scriptster at scriptster password will be password and let's register and here we are this time around it looks exactly the same except we're using blade files if i click my drop down i have my api tokens i have my profile let's jump back over into vs code and take a quick look we can close out our env file and if we go to resources click on views we have api we have auth we have our layouts and then we have our profile so as you can see it's very similar to the way that they laid out the view front end but this time they're using all laravel blade file template syntax let's jump back over to the browser and if you haven't used larabelle jetstream yet hopefully this video inspired you to check it out i think there's a lot of great features this was by no means a full-fledged tutorial on every single feature laravel jetstream has to offer it would be hours long maybe days long because there's just so much cool stuff in there with very little effort you could go in and change things like password requirements for user account creation so you could say make every password have to be 10 characters long with a special character including uppercase and lowercase and it's kind of all built into the package for you i also wanted to show you real quick that jetstream livewire and jet stream inertia both have their own documentation pages so if we open up a new tab and we go to dashlivewire.com you can see that there's documentation here specifically for livewire so if you plan on using the jetstream livewire package and you want more information than what the jetstream page has to offer you can come right here it has tons of information on how to leverage this package and get the most out of it there's also an inertia.js page if we go to inertiajs.com and i'll zoom in so inertia.js isn't specific to laravel if we come down here and we click on who is it for who is inertia js4 and it says inertia was designed for development teams who typically build server-side rendered applications using frameworks like laravel ruby on rails or django so a nurse is used by multiple different backend frameworks it's not specific to laravel it's just something i wanted to point out and if you come over here and you want to see more about inertia and how it works there's tons of information on how to get set up how to use inertia in your application and there's a lot more documentation here than you'll find on the laravel jet stream page now that you know where the documentation for both of these are i want to close this out and i spent the last 30 minutes or so praising larabelle jetstream i do think it's an amazing package and i'll most likely be using this in projects moving forward however it's not all sunshine and rainbows there is drawbacks to using laravel jetstream when i'm building an application i typically build an api forward application and what what i mean by that is i leverage the laravel api routes heavily because i anticipate my application blowing up and having hundreds or thousands or millions of users almost every successful web application turns into a mobile app and then once it's a mobile app you typically only use it on your phone or an ipad or a tablet of some sort so when i build my applications i want to build an api that can be consumed by mobile devices so i really like separating out my back end my front end and then an api that my front end or mobile application can use when you're using jet stream inertia you're kind of ignoring the whole api aspect of things believe it or not inertia actually praises the monolith architecture which i feel like i spend so much time in development trying to avoid you get these huge huge packages and then when your product takes off hopefully down the road you're trying to break this monolith up into smaller pieces if i go back over to the inertia js website they literally say inertia the modern monolith that's how they're advertising themselves so when you're using inertia you're building a monolith you're subscribing to that idea or that architecture let me dive in and show you a little bit more about what that is and why that might not be great for every type of application so i want to close out of this inertia.js and right now we're running the jet stream live wire so let me close that we'll come back over into terminal i'm going to end that and let's cd out of that and let's cd back into our inertia project that we originally started with so we want to use jet stream with inertia which was that original folder we started with about 30 minutes ago so now we're back in there let's serve that back up and php artisan serve now that we have our web server running let's go back and look at how a nurse is actually working so i'm going to refresh this right now we're viewing the jet stream live wire when i refresh it this 127.0.0.1 it's going to log me out because now we're going to be looking at the laravel jetstream inertia installation so now that i'm logged out let's log back in all right so now that we have our laravel jetstream inertia project back up and going i want to take a minute and talk about why this might not be the best option so a lot of times when i'm working on a new application that application is eventually going to have an api that a mobile app needs to talk to when you're using jet stream inertia you're not really setting yourself up for down the road for mobile integration the reason for that is jet stream inertia tightly couples your front end and your back end together so in a month from now or six months from now when you're ready to build that mobile app you kind of have to do all the work over again versus just building your application to serve an api and then consuming that api by your front-end website or by your mobile application or an ipad app if you build your project api forward to then be consumed by multiple different resources you only have to do the work once when you use jet stream inertia you're saying my laravel controllers are going to return jetstream inertia syntax and what do i mean by that let's open up our developer tools and i'm just going to click on scriptster and then profile now remember earlier when we did this we talked about how it just returns this object this json object this is awesome this is how inertia is the glue between your back end laravel application and your front end vue.js application this removes a lot of the legwork of building out a view router maybe you don't have to use vux anymore to store state but what is the drawback of doing it this way well if down the road i decide you know what my application's really taken off i want to build a mobile app or i want to build an app that can be used on a tablet all that work that i put in to return this json object well this doesn't really do me any good on a tablet or a mobile application i don't want all this component information i want a typical api response i want just the user so if we go back over to inertia.js.com and we look right here this is this example right here at the top of their page it's a user's controller and it's saying public function index users get all the active users order them by name and only return the id name in the email perfect i mean that's it's very straightforward is exactly what we would expect but then we see right here return inertia render users and then pass this users array with the user's information up here well how in the world is my laravel routes slash api going to return this function right here it's going to return inertia information but it's an api my third-party vendors or third-party applications they're not going to be using inertia they're going to just want the user's information they don't want it rendered with all this inertia stuff so it makes sense to use inertia to get up and going quickly i always hope that my applications take off and what happens when an application takes off the first thing people want to know is can i download it in the app store or the marketplace do you have a mobile app well i could and i could get up and going quickly if i built this project api forward not inertia forward so now my application's doing great i got it up online users are flocking to it and they all want a mobile app but every single controller is returning this inertia if i had built it api forward i would really only be returning the user information not all this inertia data so now i either need to build an entirely new user's controller to be consumed by my routes api or i need to not use this inertia data that gets sent back this is something you really need to consider when you're building out these applications how big do i expect this application to go am i going to be building out any type of api or a mobile app down the road this might not be the best option for me if i was doing a smaller application maybe it only had one function or it just needed to do something very specific a couple users needed to log in it's on a local intranet i would probably use this inertia package i probably wouldn't want to go through the hassle of view router i could probably avoid using vuex to manage state and i could get up and going and i could throw something together very quickly but any application that i anticipate eventually having a mobile app or needing a mobile app to consume that information i don't know that i would use jetstream inertia this is really just my opinion let me know what you guys think down below do you think jetstream inertia is going to make things more complicated down the road to eventually expand out and have a mobile application or do you think it doesn't really get in the way is there something that i'm missing here i know in my professional development experience most companies once they start to take off the first thing they want to do is break out of the monolith architecture they want to start pulling these pieces apart to be more agile maybe there's a specific team that only does the back end development and then there's an entirely different team that does the front end development so let me close out of this and we're going to go back to our laravel application i'm going to close out of this let's go back to our dashboard hopefully you learned something in this video if you haven't already like subscribe hit the little bell icon so you get notifications i'm going to be posting more about laravel and vue.js along with other programming languages too so if you're interested in learning more about programming and just tech in general make sure you subscribe and i'll see you in the next video

Channel: Scrypster

Views: 14,093

Keywords: Laravel, Laravel Jetstream, Laravel Livewire, Laravel Inertia, Inertia.js, Vue, Vue Inertia, Jetstream Livewire, PHP, Laravel 8

Id: iDuK4Brng4I

Length: 38min 14sec (2294 seconds)

Published: Wed Jan 06 2021