How to setup Laravel app with React.js, Inertia.js and Vite.js

hi and in this video we're going to set up a full stack application with synergy.js and with lateral so let's begin and first of all I'm going to create a new laravel application by using composer you can use lateral CLI if you want to set up a new parallel application by but I'm going to do this by this way so composer creates a project lateral lateral and inertia react project okay so now let's wait until project will be generated and after that well we're going to install all dependencies that we need for the server side so I'm going to open this project now in Visual Studio code okay so first of all let's install a compository dependencies that we need for inertia.js and it will be this dependency so composer require inertia JS inertia larva so hit enter and the next step is to configure a new file in resources folder that will be named app.blade.php and it will be in views folder as I said so let's type here atletic.php and you will need to pass this code so in this tutorial I'm going to use vgs for compiling our code so type this code and you will need also to delete this code there from there you will need to delete I mean delete this welcome that blade.php file okay and now we need to create a new BP inertia middleware so to do that you will need to type this command PHP Artisan inertia middleware and it will automatically generate a new middleware as well Network in rcgs and you will need to open kernel.php file and you will go to mediopware groups and to web Pro and type this code so app HTTP middleware enter inertia request and yeah that's all that we need for server side setup and now it's time to stop start a clean side so first of all we will need to install a fifth dependencies so first you install inertia GS react after this install vgs plugin react and react and react on so that's all that you need install all these dependencies and after that we will need to delete bootstrap.js file I oh I created a Minify version of the bootstrap.js file so let's let me delete this file and now let's go to the app.js and here we will need to type one code but before we're gonna do this let's go to the read config and here we will need to use a plugin that we just installed for react application so to do that I'm going to copy one code so all these codes so type here import to react from vgs plugin react so this dependency we just installed as you can see here and type here plugins react we will need we will need this to use vgs and react.js okay now let's go back to the app.js file and first let's rename this file to app.js6 so in this tutorial I'm going to use js6 syntax and now I'm going to past the next chord that you will see now so import react from react and this code is creating the main component of the our application this is app component okay and all components will be saved in page Pages folder so as you can see there is one function that is working to resolving components and as you can see we have pad to Pages folder and we are going to use j6 syntaxes as I said so now let's try to create a new component that will be named test.j6 and for example let's first import you have react and also we can use State import and we are going to import all this stuff from the react package so let's type here from react and now let's type here const test kill Arrow function now let's create here return statement and let's type here leading one this is test component okay let's save it and that was type here export default test okay so we just created a new component and now it's time to render this component if we go for example to home page so first let's import here inertia inertia class and we are going to use this inertia class to render components that we just created so type here inertia render so you will need this you will need to use this function if you want to render something if you don't know what this function do and now we need to type name of the components that we want to render and it will be test so I'm going to type here name of this component test and yes that's all that we need so now let's type here npm run Dev and let's see okay we didn't have any errors that's really good and now let's start local server of the parallel application so we type phprt sensor and now let's open our browser and check our application okay if you open browser you can see I forget to install one dependencies that is named in rcgs inertia area so to fix it let's open Visual Studio code and let's go to our terminal and let's install this dependencies so let's type here npm install and you will need to install inertia.js inertia react let's wait until this package will be installed and as you can see this package is successful installed this means that we can now go to browser again and we can refresh this page and as you can see everything small works fine and we do we don't have any errors in our console we have we can see that react is working so that's all for this lesson so thanks for watching and this was really short video because and why I created this video because I tried to you know find some nice article where I can see how you can set up in your ideas with react but I found just some bad articles and that's the reason why I created this video so thanks for watching and soon I'm going also to publish a new tutorial where we're gonna activate a application with react in refugees and Laro so thanks for watching

Channel: Fire Camp Courses

Views: 5,241

Keywords: laravel, laravel tutorial, laravel inertia.js, laravel react, laravel react tutorial, laravel inertia, laravel inertia.js tutorial, laravel react full tutorial, laravel inertia.js react, laravel course, laravel tutorial react, tutorial, react, react js, laravel react.js, laravel react js, laravel react course, react tutorial, react laravel, inertia js react, react full tutorial, laravel front end, laravel inertia react

Id: 7AVRq0xkbUg

Length: 5min 47sec (347 seconds)

Published: Mon Feb 13 2023