Inertia.js for Laravel & Vue - Server Driven Single Page Apps

what's up guys Andre here in today I'd like to take a look at using inertia ojs with laravel and view inertia was created by jonathan training and is a framework for creating server driven single page apps so what exactly does that mean let me try to explain it in a few sentences so generally speaking there are two ways to architectural web apps there are single page apps where you have a front-end written in JavaScript maybe angular view or react and that front-end communicates with a back-end API and that back in API can be a REST API or a craft ql api there you can do all of the backend things your app needs to do like persist data to a database things like routing views and state management all happen on the client the other way to architect Web Apps is using the more traditional way of server rendered apps or multi-page apps every page visit is a full page refresh and things like views and routing all happen on the server if you want some interactivity in your app you can drop in some JavaScript to specific pages now inertial sort of sits in the middle and take some of the best parts of both approaches mind you there are still instances when building a falls sba or a full server rendered app is the best choice but there are also instances when inertia is a good choice I would highly recommend reading Jonathan's blog where he has several articles going through why he created this and how to use inertia there's also an episode of the full stack radio podcast where he discusses everything with Adam wagon so I'll link to both of those in the description below so in my opinion the biggest benefit of using inertia is the fact that it replaces all your templates written in blade to a JavaScript render it's written in view or react there's adapters for all the major front-end frameworks there's so many instances where I find myself rewriting my blade templates to view components because I need some sort of JavaScript interactivity in my app starts to get quite messy when half of my views are in blade and the other half are in view components with inertia everything is now a view component so you can add interactivity whenever you need it again I highly recommend reading these blog posts on Jonathan's website there's also a demo app which is found on the github repo called ping CRM and I have a running here and let me just show you it's there's auth here and there's crud for these different models so we have one for organizations and you can create one edit delete and all that stuff you can do with a crud up there's also some relationships here and like I just said if you look at the code usually your views live in here resources views and all your blade views live in here but with inertia the biggest benefit like I said is everything is in JavaScript so here are all of our pages and they're separated into folders and they're all view single file components or you can use other frameworks like react as well however the complexities of writing an API are not here you still have the convenience of writing server driven apps for example we have a contacts controller where you have all the resourceful methods here so for example editing a contact here usually this would be a returning a view but instead it's returning and inertia view which will take a look at here so yeah let's build something similar to this where we can do crud on a model okay so let's make a new layer well app so there will new let's call it inertia example okay let's see D into it and let me open this up in sublime okay so I have a database set up already let me make sure my environment file is set up for that so it's called inertia example and root route and let's do a PHP artisan migrate okay cool now let's setup inertia so if we go back into chrome we need to do this in two steps one for the back end and one for the front end so we'll be using laravel obviously and then we'll do it for review so let's composer require first and then while that's going you have to setup the root template so this is the one blade file we have to have let's copy this and it's going to resources views instead of this we can rename this to app that blade like it says and let's replace all of this with this okay what's next and this is just saying what this temp directive is doing it's fine it's fine okay let's set up the inertia middleware so let's just add this to our app HTTP kernel app HTTP kernel so let's just put it in the web mail group right here okay and that's it after we set up the front end we can do something like this which replaces our view method to render view templates okay now let's I'm gonna open another one up because we want we need this for the docks as well so I'm going to the view one here npm install it and then it says configure the server side framework which we just did and we have to set up web pack using laravel mix so let's do that so we should have to add this web pack config method on to our web pack thought mixed ideas so to do that it's just remove this semicolon and paste it in add the semicolon okay now let's set up dynamic imports and we just have to add this package let's do that okay and while that's going let's add a babel RC file at this okay at that file payable RC based that in okay and now we need to boot the inertia app so let's replace the one that's default in laravel with this one so if we go into resources Jas this is the default one and we no longer need this bootstrap board so let's just replace all of this with this okay and what else I think that's it this is just showing how to create a base layout which we'll do along the way let me just do an NPM install for a good measure okay that's done let's do a NPM run watch and we have an error because it says there's no pages directory so that's what we'll do next just make a new pages directory here this is where all our pages live and let's create a default one so the build work now cool and it's great one call to welcome dr. you and all this we're gonna do is return the template let me just change the spaces too okay if this is the welcome page okay so back to the laravel Doc's here is how we render out that component so let's just do it in the routes file for now and it's do it on this route so traditionally you do this and this is what the default comes with but now we'll do inertial render and this works just like this method where we pass it in the view so it's called welcome here and then the second argument that takes whatever we want to pass in for now we'll just pass in foo bar but this could be anything and this will be received as props in your view component which we'll take a look at let's make sure to import this okay so let's see if this works so it's called an inertia example say dot test should work and I spelled it wrong and there we go this is the welcome page and let's accept that prop in our view component so we passed in foo so let's accept it here and should to export default and it's accept the props you can be more explicit you should be more explicit but I'm just gonna use an array here and we accept it foo and let's say foo here and that should work okay fresh there we go cool okay now let's take a look at layout here so we can make a new folder called shared layout of view so let's do that let's make a new folder shared and call it layout top view and then in our template we can just copy what we have in here let's copy that okay and as you can see we have a slot here where our other page components will go and instead of anchor tags we have inertia links which is needed to follow links in inertia so now we have our layout but now we have to extend from that layout so let me just grab this script tag and we'll put that in our welcome view here let me just put this down here and grab the props put that up here cool and then I'll remove this oops let me just add that in okay and then now we can just wrap it in layout tags and this component will extend from that layout here close it and then tit save it looks like it worked okay so now we're extending from this layout so now if you want more pages let's quickly do that let's add about in contact we can just duplicate this sorry let's duplicate it about top view in contact that view this is the about page save and this is the contact page save and now we have to update our routes saddle for about on for contact and go ahead and do that about contact about contact and that should work fresh this home about there we go contact awesome okay so laravel is actually using bootstrap by default they take a look at the resources I think it's in CSS or sass app that's us as you can see it's importing bootstrap so we'll make use of that for the rest of their app as we build out some crud functionality so for the layout I'm going to paste in a nicer nav and this is taken straight from the bootstrap Docs and I've also added these links so home about in contact are now here home about contact and this is a bootstrap nav which we'll take a look at here there we go cool in this still works home about contact cool okay so what I want to do is have some crud functionality for users and so we already have users by default so the first thing we're to do is add some records for our users so let me just go into this in example and let me just add some records so I'm gonna do factory up user lets make 30 and create now there should be 30 records in your database there we go cool and yeah let's just put it in here so let's go to our routes file actually no here's one gonna do let me just remove these I am going to make some new routes here and the first one is going to be a user's index so I'll get and make controller in second oops users make a user's controller index and it's gonna be users index so it's going to make a controller PHP artist and make controller users controller and it's make it resourceful okay so let's go into that user controller and let's grab all the users here so that's gonna be users is user all and we can just return the inertia render we're gonna make a new view in a second called users index and then we're gonna pass it the users so just like you would do in nerville you do here now in this inertial render like I showed you a few times already users cool okay let's go ahead and make that Jess make a new folder users and then that's gonna be index top you and let me just copy something from here open that up put that in there and now it's accepting users as a prop and let's just changed to users and there's no food prop down let's just see if this renders and we can check out view dev tools which also still works okay so it's slash users and we have an error here I forgot to import some stuff so back to our controller users controller it's import user import inertia save that try again okay so that rendered let's see if we're getting our users in the proper view component so if you go to inertia index there it is 30 users cool so now I'm just going to paste some code in to our view which just renders out are the users and I'm going to paste it in to save some time so in here I'm gonna paste in a table and this is just a bootstrap table and here is where we loop over our users which is coming from the prop and then we have a key and then just rendering out the name and the email and we also have this inertial link for editing the user which will go to slash user slash user ID / edit and don't worry about delete okay cool refreshes okay so there are our users cool okay now let's work on creating users so I'm gonna put a button up here that just is for creating a user let's go back to our code and we just wrap this in a container see if that works okay cool and now we can just add a button here which I have pasted I mean I'm just gonna paste it and just such a space was too full too again okay so this is just adding a button and it's gonna go to users create well add that route and controller in a second to see four renders okay there it is cool okay so back to our code let's go back to our routes file and I'm gonna paste in all of our routes just to save some time here's the one we want for creating but here's all the other ones for actually creating the user this is for getting in the edit page this is for actually updating the user and this is for deleting the user so yeah just to say sometime so for this we just want users create so users controller create right here so all we want to do here is just return and there's a render users create and it'll make a new template in here call it create out view okay let me just copy whatever's in this index okay there's no users here and let's remove all of this and it's make a column here okay this is see if this renders form goes here so this should work refreshes great user okay so there it is cool and again to save some time I'm just gonna paste in the form code here so we're gonna make this great user for the for the submit event and we have V models on the name the email and the password and yeah let me add basic apart we have our points side data return so we have a form object we have name email password okay and we have our methods here for creating user and let's just do dirt creating user okay see if this works okay okay cool okay so back to our code here is where we would usually use axles and make a HTTP request but inertia actually has its own set of HTTP methods that we can make yourself so this inertia in this case we want to post two slash users we're going to pass in this top form and then we can do this error function and you actually don't need to do anything in here for now we don't so let's save that okay now we have to go back to our controller and add that logic so I already pitted in the route so it'll be this route so hat stoar it's down here so here is where I usually do validation so we can still do that and I'll show you how to render that out in the browser so you can do this and we can just give it the validation rules fired and it's going to paste in the rest to save some time okay so if this passes this is where we can actually create the user so a user create and it's just to name request name request password and here is where we would return a redirect and we can redirect back to wherever route we want and inertia actually can intercept the redirect from the back end and have it work in the front end so let me show you what I mean so we want to redirect back to the index so I have named route so I can do that and let me show you how to do error messages and success messages as well so if there's an error message then it will stop here and return the error messages again I'll show you that in a second but if it reaches here then we know it's successful when we can pass in a success message so this is how you would do it in nerville and we can still use it as this way in inertia with a few modifications user was successfully added okay okay so let's test the positive case first where we actually add a new user refreshes let's say new new new comm password great user okay so as you see the redirect actually happened and we direct it to the index page but there's no success message so to prove to the viewer that worked I should be in this list now right there cool let's see what happened let's see what happens if we don't satisfy the requirements so I believe there's a requirement for at least five for the password so say another say hi this should not work and it doesn't work as expected but there's no error messages so if you look at the network tab try again we actually still get it 200 which if you were doing this in the traditional way using axials you would get a an error code whenever the error code is for something but for our inertia we have to do something different so what's gonna happen is the errors are going to be passed in as props here and then we can just check for that and display them if they exist so we have to do two things here believe it's in here yeah so access thing page data in other components so we have to accept the page data as props and all we have to do is inject it in our layout so let's do that in our layout here so can you let's grab that okay now in our create view we now have to accept errors as props so we can do that but we also have to do one more thing which is in the laravel Docs for sharing data so this is how we share data from laravel into our front-end and inertia so in our case we want to share the error messages and these success messages and you can add whatever you want in here so into our app we can do this let me say this first and our app service provider and it's gonna copy some code and paste it in save some time so right here and a register method this is just the app name you not do this but we'll put it in there anyways and here are the errors so I'm gonna share the errors so this should come in if there are any errors and here is where it determines if there's errors or not so if there's a key in the session called errors then return those errors but if not and just return an empty object so now if I did this correctly and if we go back here refresh inertia not found let's import this okay save fresh okay now we cleared so say another another at another calm its give it only three characters so there is the create but now we have props coming in and we have the errors cool and here's the app name we passed in okay so now let's render out those errors if they exist in our view templates so back to create view so right above our form we can just render out an error if one exists so I'm going to paste in some code and I'll explain it to you so this is just checking if there are actually errors and this just spits out the first error because there can be multiple errors if you want to get more fancy with it you can actually specify the specific error for each field but I just did it this way so see this works let's refresh this okay let's do another other at another comm hi okay there we go password must be at least five characters cool so let me show you how to get the success message so same process let's go back to our app service provider and we just want to share the success message if it exists so based on some code pretty much the same thing as this so we want to share something called success message and we're just checking for the if it exists if it does then return it back if it doesn't then just return null let's let me save that and now in our index view because remember we're redirecting back here we can just check up here again I can paste in some code check if there's a success message if not I mean if there is then render it out so we gotta accept this as props success message save that and now let's try this again but with proper data okay let's do another another at another comm password great user and there we go this is the redirect followed and we have the success message rendered out awesome okay so I've done editing and updating behind the scenes because it's pretty much the same thing as creating and I want to save some time but I'll go through it quickly here so in our view here I already have the URL set up for editing so it's slash user slash user ID / edit and here's a route for it right here so this goes to users controller edit some down here and this renders out the users edit view and again this is pretty much the same as create but now we have a user being passed in and that's reflected in a prompt coming in right here and then we're just rendering out my hair form email form name and I just ignored the password here to keep it simple okay so if we click on one that gets populated and for updating we have this update user method which uses the inertia HTTP and it goes to users slash user ID as a patch request so back to our route it's this one so goes to the update method and again we're taking in the user using route model binding we're validating here and it even checks the email address if if it doesn't check against your own because it's okay to have your own email address that just means you haven't updated it but it still checks against another person's email address and if that if that validation passes then just stop to go ahead and update it and then redirect back to the index page with this success message so let me show you that working so let's go home first I'm gonna update this person but I try to update this person with this email address and that should result in an error because that exists already cool but if we just change the name change that redirects here and you can see the change here cool as you can see I also added a delete user button here and I believe the front-end works for that but I didn't do the back end for it yet so back to our edit view there is a delete user here and deletes the user and there's a confirm on it and if you press ok then go ahead it goes ahead and performs this action it's just slash user slash user ID but it's a delete request but there is no method for that yet I mean there's a method but there's nothing in there so let's destroy so starting from routes web it goes here and then it's the destroy method okay so let me update this first cut we want to use route model binding user user and then all you have to is user delete and we can do this again and just change the method message user was successfully deleted okay and that should do it let's delete this person this refreshes delete cancel it doesn't delete by the five-person okay it should delete Nikita Schultz change and that person is now gone awesome so I hope you see the benefits of having everything as view components if we need any interactively at all we can just add it to our view components so for example very basic example if you wanted a spinner on these anything that performs an ajax request or any of the buttons we can totally do that now we don't have to change any of our blade templates into view components because everything is a view component so let's quickly do that just from one of them one thing I like to use is called epic spinners spinners which is a collection of epic spinners for view so let's npm install it and let's go ahead and use one of them to use this one so for view just have to import it so I'm gonna put it in the edit which one right here and we get an error don't worry about that for now oops so there should be go in here and then he use it you can just grab this put that in here so this is using flexbox it's using bootstraps utilities and let me just change this to white FFF and I think we just have to import it here so half-circle spinner will save okay so there is the spinner there and we just add some classes on it add some margin there is a utility on bootstrap to add some margin on the right just a little bit of - and I only wanted to show up if it's loading and I think I have all the loading statements in or they're in here already when I paste it in the code so let me just check so loading is false by default but when we go ahead and submit it set to true and it's set to false when it resolves cool so you can do this for the rest of them as well but I'm just gonna do it for the update user button okay refresh okay so let's see if this shows up so just it should be really quick okay so there you see it there my computer's really slow right now so you can see it struggling here okay and there's the error message cool but if you put that back this should work and be directed to the index page so there you go cool so there you have it guys we managed to build a basic crud app with inertia laravel and view as I said earlier definitely check out Jonathan's blog posts as well as the ping CRM example app although inertia is still in a very early stage I really like the direction it's headed in and I can definitely see myself using this for a lot of projects in the future please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 77,800

Keywords: inertia laravel, inertia js, inertiajs, inertia vue, inertia spa, laravel inertia, vue inertia, jonathan reinink inertia, laravel spa, laravel single page app, laravel vue spa, laravel vue single file component, andre madarang, drehimself, vue laravel spa, laravel vue single page app, vue laravel single page app

Id: JZDmBWRPWlw

Length: 42min 1sec (2521 seconds)

Published: Mon May 13 2019