01 InertiaJS - What is InertiaJ

so now let's get started with inertia chairs now what is inertia.js and why we need it so basically we have um simple front-end application then we will have a backend application if you want to connect the front and the back end you need to create API on the back end and then from the front end you need to request for that API if you want to do something but what if I tell you that you don't have to create any API but still you can use the front-end Frameworks like react view spelled and obviously the backend Frameworks like laravel Ruby on Rails Django lot of amazing things you don't have to set up both differently you don't need two different repositories you just need one repository of your backend application and then install the inertia.js set it up and then you are really really doing no API but still your front end and backend are connected sounds really interesting and really like magical thing we are going to see so here is a really a nice example so in laravel if you want to use vue.js you can use something like this but if you want to get the data from the laravel then you need to create an API and hit the API from Ajax or fetch but with the inertia.js you don't have to do anything you just need to actually use the inertia render for the view component name and level the back end will take care of passing out the data to the view component loading the view component everything because we are going to use the initial.js I am really really excited for this and I just want to start with setting up the inertia.js on a fresh new level application so let's go here and here I have a fresh new level 10 installation so if I can show you here we can go localhost 8000 again our favorite and boom we are here but we need to set up the inertia chip how we do that first we can scroll down and here we have a server side installation since inertia take care of the front end and the back end it's kind of a glue it's kind of a chain which connect the front end the back end so you need the two setup the first is the server side setup now once you are here on the server side setup what you have to do you just need to require this composer package which is inertia level so go here and I'm going to kill this and run it so while this is installing let's move to the next thing then it says that once you are done with this package then you need to set up a file where you have you need to have this white app.js then inertia head or inertia inside the body so what I will do I will copy everything from here then I will go on open the sidebar go to the resources JS views and I'm going to create a new file app.blade.php and now it's very important to name this as the app dot plate and I will show you why but for now yeah we have created it so paste the data and that's it here what we have we have the white resource JS app.js so what this will do this will actually link up our app.js file so with this we need the inertia head which is obviously some inertia JS stylings or related things then we have inertia initialization this is actually doing one very simple thing it's creating a div with the ID of app and inside this div all our view component will load so inertia has given this helper which is at the rate inertia so we don't have to write these things so this is very simple and basic HTML markup and that's it so what next after this it says that you need to create a inertia middleware and remember here it's given that by default the laravel adapter assumed that you have app.play dot PHP not any other name okay so let's create the middleware and here we are now it has created middleware but it says that you need to add this middleware to your web array of the kernel file so let's copy this initial middleware path open the app HTTP kernel scroll down to the web array and here at the last just paste it that's done but let's understand what this middleware says this middleware basically says that hey it's looking first for a app.blade.php which is root view which we had created and that's the reason I told you that we need to name it app.plate if you want to name it anything else obviously you can change from here but then it says some worsening thing and sharing things we will understand this share later but basically this inertia middleware which is handle inertia request extends a middleware which is the real inertia middleware which is inside the inertia package vendor inertia GS inertia level okay now what this inertia middleware says that it's obviously defining some of the function but it has the root view the handling how it handles the The View components so basically it check for X inertia header if the request include x inertia header it will return the view file the view JS file instead of a blade file so we will understand it better later but for now it says that everything is done you can start creating the response using inertia render okay so let's go on the web.php which is inside the route web.php I will clear this comments and now here I'm going to create a route called test and with a closure here I'm going to return inertia render and rendering a file called test now you will say that hey we don't have any test file yes and that's what I want to see what if we don't have any file and what if the test route is there what will be the result so let's go here and we need to start our server so PHP AdSense serve which is now running so go here and say slash test while we are here let's enter and now it says that white manifest not found basically it's the it says that hey yes everything is good but I can't find white related things we need to work on setting up the client-side thing

Channel: Bitfumes

Views: 8,390

Keywords: Laravel, Inertia.js, JavaScript, Front-end development, Single-page applications, MVC architecture, Web applications, Web development framework, Code optimization, Performance optimization, User experience, UI design, laravel inertiajs, laravel inertia, inertiajs vue, inertiajs react

Id: mPKboSZj2h8

Length: 8min 18sec (498 seconds)

Published: Wed Apr 26 2023