Build Modern Laravel Apps Using Inertia.js - Ep 2, Install and Configure Inertia

okay i think we're now ready to install inertia and begin configuring it now we're going to use laravel in view in this series so why don't we start by pulling in a fresh laravel app i'll just call it demo alright let's cd in there and if we now visit this in the browser of course we see the standard laravel splash page okay now let's install inertia if i switch back to the website again we need to grab two adapters inertia has an adapter for your server-side framework like laravel or rails and then it has another adapter for your client-side framework like view 2 or view 3 or react or svelt we're going to start with the server side adapter so we'll install the dependencies ok next we need to set up our root template think of this as your layout file for an inertia app and it should look pretty familiar other than this inertia directive and we'll talk about that in just a second so i'm going to copy this and let's open this in my editor and let's go to resources views and let's do this i'm going to rename the welcome page to app.blade.php and if i select everything we can replace it with what we got from the documentation okay and let's add the link okay so a standard layout file the only unique thing is this inertia directive and really this is just a convenience ultimately it expands to something like this a div with an id of app where we pass to it the initial page data so yeah that would be something like and you've probably done this in your own projects at some point or another where you json encode a piece of server-side data and then you pass it as a view prop and yeah really that's it so this is how we pass the initial page data to inertia anyways you can stick with the inertia directive same thing now if i switch back to the documentation the next thing we need to do is set up the initial middleware and we'll talk about this more a little bit later but it effectively tells laravel how to provide the proper response to inertia so let's go ahead and run that and if i switch to my editor that's going to create a new app http middleware handle inertia requests file okay but of course we have to first register it in our kernel class and let's scroll down to your standard web middleware group and we'll add it here okay and that's basically it for the server-side setup so the next step is to set up the client-side adapter and again inertia provides first-party support for react view and view three as well as felt okay so i'm gonna use view three here we're gonna pull in the inertia package and then specifically the view three adapter so let's run that now and while that's doing its thing the next step is to initialize your app now i'm going to assume you have a basic familiarity with vue even if you're not yet familiar with view 3 we can work through that but mostly you're creating a view app the way you normally would you then use the inertia plugin and you mount it to your root element so that sets up view then we need to set up our inertia app and then instructed how to find your current page component and we'll talk about all of this so you don't need to feel overwhelmed if you don't quite understand what's going on here for now just copy and paste and then move on so i'm going to grab this and of course if i'm using view i need to go ahead and pull that in through npm and then for view 3 if we also want to support single file components which we do then we also need to pull in one additional package and this is just standard view stuff it's not related to inertia at all so let's do installation through npm and yeah we also want to pull in this package here okay so now in my project we'll go to resources.js app you'll see that requires a bootstrap file but we're not going to use any of this right now so i will delete that and then paste in the code we got from inertia's website now real quick before we compile everything down notice when we create our inertia app we tell it how to track down the current page component and at the moment and by common convention we're asking it to look in a pages directory so why don't we go ahead and create that directory now and again this is what i do for layercast as well it's very common now the final step is to compile this down and we're going to use laravel mix as this is a laravel site we're compiling the javascript here we're going to turn on view support and it will try to figure out which version you're using or you can hard code the version in this case view three and then lastly let's turn on versioning support and that's basically going to add a hash to your compiled files to deal with cache busting and actually on that note in app.play.php you can see this example is already configured to use level mix so it's going to look for this file and that will expand to a cache busted path to where that asset is located okay so a little bit of setup but you only have to do it once for a project so let's install any remaining dependencies we have and then we'll compile this down all right and now i can run mix or npx mix and that will pull in any required dependencies we have let's do it one more time and that should compile everything down according to our configuration and it did so yeah notice it compiled these two files down those will be referenced in your mix manifest and notice each one points to a path to the file including a unique query string so then when we use the mixhelper function that will expand to the location of those files okay and that's the entire setup process we're now done so of course if we were to come back and give this a refresh because we deleted that welcome page we see an error here but that's okay we entirely expected that so in the next episode we're going to return to our routes file and figure out how to return and render a client-side view and page component stay tuned

Channel: Laracasts

Views: 2,186

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: Y5vsICGyHKU

Length: 6min 23sec (383 seconds)

Published: Wed Oct 06 2021