All right, let's take a look at the existing code base for the React from Scratch application and start a conversion to Laravel and Inertia. All right, so I've got the code base open here in my editor and I've got the app running locally on my machine. And as you can see, I've made the title bar bright blue on this code base here. This way we should get less confused whether we are looking at the old code base or the new one. Okay, so let me open the package.json file.

at the old code base or the new one. Okay, so let me open the package.json file and like I mentioned, this is a V app and if you go take a look at the dependencies, you can see it's using Tailwind CSS, React, react-dumb, uh, and Lucid React for icons. So we have an app that uses React, Tailwind, vet and Lucid Icons and we wanna pair it with Laravel in Inertia. Now we could start from complete scratch,

and we wanna pair it with Laravel in Inertia. Now we could start from complete Scratch, but honestly there's a much better solution here and it's to use the Laravel starter kit for React. It's going to take the stack of React, Vite and Tailwind and then connect it with Laravel using Inertia. It's also going to give us authentication and users out of the box, which is going to come super handy as we build our app. Honestly, that's a great head start

to come super handy as we build our app. Honestly, that's a great head start and that's definitely the way I'd recommend starting a new React project with Laravel. That said, if you wanna learn how to connect Laravel and React from scratch, that guy has a pretty good work through about it. All right, so let's scaffold a brand new Laravel app with the React starter kit. So laravel new, let's call it react-inertia.

with the React starter kit. So laravel new, let's call it react-inertia. And like I mentioned, we'll select the React starter kit, we'll keep the default oath and pest and we let all the good things install. Let's run npm install and build, why not? And we're done. So we can open the React Inertia project in the code editor here I'm using VS Code. And here we have a brand new Laravel and React app. I'll run composer run dev to start all the things.

And here we have a brand new Laravel and React app. I'll run composer, run dev to start all the things and we can visit the app at localhost:8000. And here we go. So we are going to completely replace this uh, splash welcome page, but like I mentioned now we have this authentication system which is going to come super handy. So we're not going to use things like the dashboard that comes with the starter kit, but this is still a tremendous starting point for us.

that comes with the starter kit, but this is still a tremendous starting point for us. So let's go back to the old code base, the React from scratch code base and take a look at what things we should port over to our Laravel app. Okay, so we've looked at the dependencies and then uh, if I go to index.html, this is really the application's entry point. You can see we use a custom Google font here.

this is really the applications entry points. You can see we use a custom Google font here and then there is just a appId and then we load this entry index.tsx file. This file is where we register the React app and really the whole application lives in this App component. And so really this is the React application. There is a bunch of components that we are going to need to port over.

There is a bunch of components that we are going to need to port over. You can see it's also using types and queries that we probably need to bring along. But really we want to recreate all of this UI in our welcome.tsx page in the Laravel app. So let's take a look at the folders in the application and I think I want to bring the images for sure in our new app. And then in the source directory we are going

for sure in our new app. And then in the source directory we are going to bring the components over. There is some data here, but I actually don't think that it's used at all in the application. This was used at the start, but then we moved to API endpoints. And speaking of if I go to queries, this is where we have the API calls to the React backend URL.

And speaking of if I go to queries, this is where we have the API calls to the React backend URL. And by the way, I have this running locally on my machine, which is why things work. But we have a getPuppies function to get puppies, a toggleLikedStatus API call, and finally a createPuppy API call. So we are going to bring over these three functions too. Then in the types there isn't much really, there is a User, but that's going to be replaced with the Laravel User.

Then in the types there isn't much really there is a User, but that's going to be replaced with the Laravel User. But I think we can bring the puppy type over. What have we got next app that CSS? Uh, yes. So the starter kit does come with Tailwind already, but we can just configure the font family here and we should be good to go. And then we have our app.tsx file that we've already looked at. And so that's about it.

that we've already looked at. And so that's about it. And like I mentioned, we want to bring this app, the TSX contents into the welcome page in our Laravel app, which is basically the start page when you load the application at the route URL. And so here in the laravel starter kits, the pages will be under resources/js and then pages. And then here you can see the welcome.tsx page. And so I think we can take a radical approach here.

And then here you can see the welcome.tsx page. And so I think we can take a radical approach here and copy the entire app.tsx file from the react-from-scratch code base and paste that completely to replace the welcome.tsx page in the Laravel app. And of course things are going to be broken and missing, but hopefully we can rely on the dev tools, the IDE to tell us what's missing. So let's do that and see what happens.

to tell us what's missing. So let's do that and see what happens. I am going to yellow select everything and copy it in my clipboard and in the welcome.tsx page I'm going to replace everything with what I've got in my clipboard and as expected there's a lot of red squiggly and if we take a look at the front end, it's not finding the first component and there's gonna be a lot of things to fix.

it's not finding the first component and there's gonna be a lot of things to fix. So let's first take a sip of water and we are going to chip away at it little by little hopefully not a deep rabbit hole to go down, huh? Alright, so the first error is it cannot find the components uh, because we haven't ported them over and I believe I can select all of these and copy them in my clipboard.

and I believe I can select all of these and copy them in my clipboard. And here we have these resources, JavaScript components directory with a bunch of existing components. And so I can paste my new components in here. So you can see we have this clashing naming convention where we use uppercase components, sort of PascalCase, I think it's called, where the starter kit has kebab-case instead.

of Pascal case I think it's called, where the starter kit has kebab case instead. But we can saw that later. And so now we have the components but we need to update the paths to these components. So I believe the starter kit has in the tsconfig, if I search for paths, here we go, has an alias to the resources/js directory with the @ symbol. So starting a path with @ will put us

with the at slash symbol. So starting a path with @ will put us inside the GS directory where our components live. So I should be able to take all these components here and replace the current directory . with @ and look at this. Looks like the imports are working now. Okay, so next it looks like we have an NPM package missing and then the queries and types we talked about. And so we are going to port over our queries and types.

and then the queries and types we talked about. And so we are going to port over our queries and types. I will start with the queries. So I will copy the directory and then I can paste this in resources/js. So there it is. And so I should be able to update the import with @/queries. But then as you can see there's already a types directory which contains already sometimes like I mentioned there already is a User type.

directory which contains already sometimes like I mentioned there already is a User type. It's using interface here and so we are not going to import our User, but let's bring over our Puppy type. So in our types/index.ts we are going to leave that alone. But let's bring the type Puppy, I'll add it below. And because everything is using interfaces, maybe we can update these two interface.

And because everything is using interfaces, maybe we can update these two interfaces. I typically myself use types instead but those are pretty similar and so that should work nicely. Okay, so we should also be able to now update the types import and the puppy is now good. And so for the last one here, error boundary, I'm conflicted because we are going to not use this eventually so I could remove that here. And we also not going to use the suspense,

so I could remove that here. And we also not going to use the suspense, but I wanna leave the app as is at the start. So I'm going to install that and we will remove that if we remember once we have removed the ErrorBoundary in our app. So for now I'll copy that and go npm install react-error-boundary. And it looks like our imports are all solved and the file is now not read anymore,

And it looks like our imports are all solved and the file is now not read anymore, which is a very good sign php. Alright, let's go see if our app loads in the browser. I actually know that it's not going to but we are getting closer. So let's reload the page and blank screen. And in the console we've got a bunch of errors, react, createElement expected, a string with gut object. And what's happening here is Inertia pages.

create element expected, a string with gut object. And what's happening here is Inertia pages expect default export for the page component. And here we export a name for function called app. So if we export default this app, the app should load and yes it is hoo, look at this. We even have images going uh, because these are images coming from the API from the backend. But as you can see, uh,

API from the backend. But as you can see, uh, the app is loading in our welcome .tsx page and I can probably even toggle the like status because once again it's connected with the Laravel API and everything seems to be working. So let's search for fun. Oh no, dogs like fun. What do they like? Good. They like to be good. All right, so it's all working nice. So after all that wasn't all that complicated.

All right, so it's all working nice. So after all that wasn't all that complicated. We just needed to bring the components, queries, et cetera and then fix the import path. And from there everything started working. So if we pay attention, there's a few more things we need to sort out. You can see that the images are not working. I'm not talking about the images from the API with the puppies, but I'm talking about the logo

I'm not talking about the images from the API with the puppies, but I'm talking about the logo and whatever other images we may have. And also the font is actually not the correct one. Remember we had that tailwind.config.js with a custom font and a custom Google font in the index.html file. So let's make sure we bring these things over and our initial port of the application will be I believe, complete. Alright, so to refresh your memory,

of the application will be I believe, complete. Alright, so to refresh your memory, the thing I'm talking about is in index.html we have these three link tags for a Google font and these are in the document head from the HTML file that will load the application. So in our Laravel app, it could go in the views app.blade.php, which is where we have the equivalent HTML entry point file. And then essentially Inertia is going

where we have the equivalent HTML entry point file. And then essentially Inertia is going to render each page within that. And so actually you can see that there is also here a custom font but a different one. And so let's paste that over here instead. So instead of "Bunny", we want to use "enter" now, alright? But for the Inter font to work, remember that we also had the theme customization here in app.css where we set the default form family to be "enter".

that we also had the theme customization here in app.css where we set the default form family to be Enter. So I'll copy that theme block declaration, although there will probably be a theme block. So let's copy just this line and let's go find our CSS file in resources/css/app.css. And as expected there is a theme customization, this is mostly CSS and UI stuff, we can leave that alone, but I will add here my default font family.

this is mostly chatsy and UI stuff, we can leave that alone, but I will add here my default font family to be the Inter font. So let's take a look at what happens in the browser with that setup. All right, so does this look like Inter, let's check properly. So I will inspect this and let's go in computed and look for font family, huh? No, it's instrument sense.

and look for font family, huh? No, it's instrument sense. So I imagine there is the font-sense class somewhere on the body tag. So we could go and find that font-sense there it is on the body tag and remove that. And so now we should be loading the inter font. Yep, we are because you can see that now we are using that default font family first and then using default back from the default tailwind theme.

that default font family first and then using default back from the default tailwind theme. But if we keep it this way and accidentally put the font sense class anyway, it's going to mess up our fonts. So I think what we need to do is delete the font sense theme customization to go back to tailwind's theme default. And so now in the HTML file, the app.blade.php, I'll remove this and use the default font family.

And so now in the HTML file, the app that blade that PHP, I'll remove this and use the default font family. Therefore, so the font-sense class is gone from the body element. We should still be consuming the inter font here enter nice. Alright, and the very last thing I want to change in the react from scratch app, if we go to index.html on the body tag, there is no classes where here we have this anti-earliest class.

html on the body tag, there is no classes where here we have this AntiEarliest class. So I'm going to remove that class here. And with that we are going to remember that we also missing the images. So this is probably just the logo here, but eventually we'll also want these images, we'll work our way towards that. But for now, I will go in public/images and actually I can copy the images folder.

But for now, I will go in public/images and actually I can copy the images folder and we are eventually going to handle images differently since we're going to have file uploads. But for now I'll also put this in the public directory. So public/images. And so now if I reload the page, yep, you can see that we have a nice dev pops logo. Uh, and so everything at this point should be back to

that we have a nice dev pops logo. Uh, and so everything at this point should be back to what we had with the application fully working, but this time inside our Laravel application. So of course this is a bunch of nonsense at this point. There is nothing Laravel about this app except the fact that we have a Laravel route that renders an Inertia component which shows the application. But that's the first step from now we can start integrating

which shows the application. But that's the first step from now we can start integrating this static vanilla React app into a Laravel Inertia and React super full stack Integrate. What I was trying to say is we can make the app real and full stack in the sense that the puppies data is going to come from the database instead of an external API. And we are going to tightly integrate everything and everything is going to leave

And we are going to tightly integrate everything and everything is going to leave as a monolith Laravel application and it's going to be beautiful. I promise you. So in the next lesson, let's start this process. See you there. Boy. Bye.