React + Laravel Full-stack Application | Build and Deploy

in this video we're going to build laravel rust API with login and registration we're going to build react front-end connect it to the laravel API and build full stack application and finally we're going to deploy both the front end as well as the API on custom domain the front end will be deployed on primary domain in lateral rest API will be deployed on API subdomain of the primary domain let's have a look at the demo when you open the application you are going to see a login page immediately you can log in with an existing account or just create new account I'm going to log in with my existing account just I'm going to type my password incorrectly and hit the login we will see an error right here so let's provide now correct password and hit the enter button and we are inside the system okay so we have the standard uh like admin panel type layout we have the header we have the sidebar on the left side and we have the table and we're going to implement this crud functionality of this table and we're going to have also a react rotor and navigation between pages and of course possibility to add new user or edit an existing user or of course delete new user okay so let's try to add new user I'm going to try to provide right here the same the same email address I have actually already used and submit this without password so click save I get this validation error messages immediately I have to provide a unique email right here and let's provide some password and hit save as soon as you save new user we see also a notification at the bottom right corner of the screen which automatically disappears after five seconds okay and the latest user goes at the very top of the list we can edit this and call this Surah 22 and hit save again we see the notification user is updated we can click on delete it's going to ask the confirmation and we can click OK and it's going to delete okay so that is the whole functionality but we're going to learn a lot uh by building this small application and when we click log out the currently authorized users token is deleted and the user is authorized okay and then you can re-log in or just create new account the project is not complicated but there are many things to learn in react you're going to learn how to work with context API how to use react hooks how to work with react rotor how to create protected roads how to create multiple layouts how to connect to the API and how to handle the authentication part in lateral side you're going to learn how to create logging in registration API endpoints how to create basic crud API endpoints how to create form request data how to create resources and more importantly how to deploy your application on production environment we're going to log in using SSH clone our existing project using git connect to the mySQL database and deploy our lateral API like that we aren't going to use FTP or other third-party tools to just upload your project files on a server we're gonna do it in a proper way foreign [Music] on this channel I share my 10 plus years of experience working as a professional software developer so if you're new here consider subscribing recently I decided to make my focus more on building projects building and deploying if this is something that interests to you make sure you subscribe to the channel and enable notifications also let me know in the comment section your opinion about this particular project as a choice of Hosting provider we're going to use hostinger's shared hosting I have been very skeptical about shared hosting many years ago and once I tried to use it and I didn't like the experience I didn't have any kind of configuration and about my PHP environments so I was very very limited I had to upload files using FTP that was the only possibility I didn't have access to my SSH server I didn't have access to git and that was basically a terrible experience since that I am not using I I haven't used shared hosting for many years but recently about 2 years ago I discovered hostinger's shared hosting services and once I signed up and tested its services I got really really surprised so they have everything almost everything you might need you have all control on your phpx extensions um control on your PHP version you have possibility to create as many uh not as many like up to 100 MySQL databases you have a free SSL certificates you have free domain as well when you purchase these premium shared hosting and basically you have everything you might need the shared hostings are not ideal for big projects this is something as a disclaimer I should mention shared hosting projects are excellent for small and medium-sized projects but if you expect your website to serve like thousands of people simultaneously you should choose some other type of Hosting system system like a VPS or maybe a cloud hosting but as I mentioned shared hosting is excellent for small and medium type of projects even if you don't plan to take the hosting hosting I really encourage you to watch watch the sections watch the sections which describe how to uh create certain things in the hostinger control panel because this is very user friendly and very intuitive and as I mentioned we have also access using SSH we can add public private Keys connect to our normal SSH client pull our project clone our project using git and run Artisan commands and basically deploy everything normally how it should be let's quickly sign up on hostinger website and get the premium shared hosting let's type in the URL austinger.com the code holy I'm not going to talk about every single feature of the hosting service but let's focus on the most important ones so we can get the premium shared hosting for three dollar per month and we have possibility to deploy up to 100 websites we have free email access unlimited SSL certificates and free domain as well and there are many many other things you can have a look in the uh see all features like SSH access git access and so on okay let's click this button to uh to add this into the cart once you click the button you have to choose the period for which you want to use your premium shared hosting the most common one will be probably 12 months however the more time you choose more saving you are making okay but the domain is only included for the first year so I guess the most common one will be to choose uh the hosting for 12 months but whatever you choose as I mentioned you can scroll down below you can enter your email address you can provide a coupon code right here the code holique which will give you additional 10 discount on the price you see right here and that price includes in this case this price includes four yards premium shared hosting one year domain up to 100 websites SEO certificates and everything I mentioned above and once you choose the hosting and provide the coupon code enter your credit card details and submit secure payment and then you will be redirected to the hostinger age panel from which we can get the domain set up our hosting and deploy our project before we actually start building the project I'm going to mention a few applications you might need to install if you don't have it installed first of all we will need PHP so as a as a choice of like PHP environment I recommend exam I use it um basically all the time if I don't use Docker I use exam with the Apache in MySQL and everything if you don't have it if you have already PHP running that's fine you can use that if you don't then you can check the following link and download and install we will also need composer which is PHP package manager and then I always generally recommend to stay with the laravel official documentation and just have it open when you're building an actual application okay so you cannot remember everything by heart so just have it open and if you need something you can easily find it and finally I'm going to mention my website the codeholic.com on which I decide to publish my premium courses at the moment I have building a full stack application course using a laravel view Jes alpine.js and um and Talon CSS so basically we build the front-end side which is built with the Thailand CSS alpine.js and laravel and the admin side is built with the vue.js and laravel rest API it is 23 hours content 140 videos I plan to release updates on this course and you can check it out you can watch it's uh like promo video you can watch it's a free resources as well I have right here described what is the actual functionality of the project I even have a link to the project working demo and basically everything is described right here so I recommend to check it out if you find this interesting maybe you can enroll this in the course okay now let's start step by step I'm going to close everything leave only laravel documentation opened and the very first thing we need to do is to create a laravel application so for this we're gonna open CMD and I'm going to navigate into basically a desktop my desktop I'm going to create folder right there so CD desktop and then let's create a lot of applications so you might need to install a laravel installer if you don't have it installed so just run composer Global require laravel slash installer okay just run the following command if you have the installer already installed don't worry about this don't do anything if you don't have just run this and when you run it you're gonna have you're gonna have a laravel comment available okay and just we we need to create new project by running laravel new in the project name in this case I'm going to call my project laravel react slash full stack Maybe full stack whatever okay so let's just call this laravel react full stack so it's gonna create new projects run the composer dependencies everything what it needs and then we can start building application okay so our project uh was successfully created and I'm going to open this using phpstorm so let's go in the file explorer I'm going to go into my dashboard uh let's grab the dashboard right here and here's my project lateral react full stack app so I'm going to open this as a PHP store project let's collapse this it's going to take few seconds if you don't use pH contourment if you are familiar with the vs code you can stick with the vs code it's going to take a few seconds and here it is it's it's opening yeah PHP storing is an intelligent and really powerful idea it helps a lot building large applications and now let's let's set up the project so we have the application ready so we have also.en file which was created automatically by the laravel new command when we created this I'm going to configure the database connection into sqlite for Simplicity okay in this tutorial I want to focus more on how to build the full stack application how to connect the backend to the front end in react how you can have a protected roads in react how you can Implement authentication and and so on I don't want to go into deep into like a connecting to the mySQL database and things like this so I'm going to do it very easily and just change the ADB connection into SQL Lite and then let's bring up the terminal I'm going to use the PHP storms integrated terminal which I have set into my git bash you can use you can use CMD if you want you just need to navigate into the folder we just created and from here you can run any comment any command which I'm going to run right here just make sure that you have PHP command available so I'm going to close CMD and I'm going to run all the comments from here so first of all we're going to run migrations PHP Artisan migrate okay he's going to ask me if I want to create a database I'm going to type yes so the database was created the database was created under the database folder and right here database sqlite and immigrations have been applied okay now let's speed up the server by running PHP Artisan serve okay now let's open this in the browser I'm going to type localhost Port 8000 and here we have the laravel application up and running now we have to create react project so for this I have to mention that you you will need node.js and ampm if you don't have it just go to the node.js.org and download that the latest stable version LTS version and use that when you install that you're going to have a npm comment available again you can use CMD or any terminal I'm going to use the page performance integrated terminal and I'm going to create new react project inside my laravel project okay so I'm going to run npm create white okay you can run just npm create white or eight white slash latest I'm going to do it easily and run just fight npm create fight so white is a new technology to scaffold the different applications using uh with uh like react or vue.js or vanilla JavaScript okay and right here we need to type uh y we need to agree that and what is the project name so the project name will be react I'm going to just call this react hit the enter then we have to choose which framework we want to use if I nearly JavaScript or vue.js or react or preact or L Elite or swelt or others we're going to stick with react of course and we don't want typescript in this tutorial I'm going to stick with the JavaScript okay so the folder was created we can observe it we have it react right here and this is already a react application okay now let's navigate into react folder and run AMPM install first and then we have to run npm run and div okay uh if you are already familiar with react you probably know a command create react app so I recommend to stick with the white because it's it's super fast compared to create react app um yeah and right in my opinion is just really really awesome uh okay now let's run our react application by executing npm run Dev it's going to spin up the light server on the following address the port is a little bit weird so we can actually open this and see the application running and we can click the counter application counter button but I'm going to change the port into 3000 which is more common for um for react or vue.js applications so let's go under react folder and open the pecky Json and right here I'm going to specify parameter Port equals 3 000 okay you save this just stop the server and restart that and it's going to spin up the server on Port 3000 and we can open this close the previous one and we have the application up and running okay now let's clean up our react project because we don't want everything what comes by default Let's Open The Source folder and inside there we have the app component let's start basically uh from the main.js so it has the street mode enabled and renders the app up so if we go inside the app we have right here all the HTML we see basically in the browser so so we don't need air like these HTML so we can delete that I'm going to just type up right here and let's remove this state as well and we can remove everything for Simplicity I'm going to also remove app CSS and yeah I can completely delete this app CSS I don't need that and let's let's have a look in the index CSS I'm going to also delete that and I'm going to paste my own CSS again I don't want to focus on writing CSS in this particular video I just want to focus on the flow of the front and then back end and some logic and functionality not the design um okay I'm going to paste my CSS whenever I need that but then what do we have so let's go in the assets so we have the react SVG we can delete that we don't need that and I think we're good to go so we have one um component our component which just displays up right here so if we have a look in the browser we see up and displayed right here okay so fine now let's install the rotor inside the react so I'm going to stop the react server and we're going to run npm install uh react rotor Dom and let's specify Dash uppercase s s as well to install this and save this in the packet Json okay so we have installed the router let's pin up the server npm run Dev and now we have to create a rotor and configure roads okay there are multiple ways to create roles in react application I'm going to do the following so I'm going to create a separate file called rotor.jsx and I'm gonna call I'm gonna basically import the create uh browser browser rotor uh function and I'm going to specify right here roads okay so make sure that you import the function from the react voter Dom uh in my case phpstorm Auto automatically imported that vs code might also import this this automatically but make sure you have the all the necessary Imports you're gonna see in the in the video okay so in this case you have to type the following input and we have to specify right here roads and let's actually assign this into a variable called rotor and then we have to export export default route let's export this as a default and inside rows we have to specify few roads roads are generally Associated to some components or views so now let's talk about structure of our react project okay so we can create a components folder and put everything everything right there but this is something I don't like I don't like a single folder which holds every components views and so on so I'd rather create a separate files sorry separate folders for components and for views okay views let's call this views views will be all the react components which are associated to a wrote specific route we can call this also pages okay and inside views I'm going to create like login.jsx let me actually copy and paste and call this sign up jsx and let's create users jsx as well okay and let's start with the login and I'm going to generate the functional component oops I think I don't have the live template so let me quickly set up the live template I'm going to open the settings and search for live templates and then I'm going to search react right here it really doesn't matter in which group you're going to put this I'm going to put this in the react group because that's more logical a live template I'm going to call this r f c and the context will be JavaScript and typescript and RFC will trigger export default function the cursor I need it right here okay like this and then we're going to return this and we can return the fragments I know this is a little bit out of scope of this video but I'm going to do this very quickly okay so just like this we we have the template so I'm going to click OK and click type RFC hit Tab and it's going to generate the following boilerplate code for me so I'm going to call this login so that the component name will be obviously login and right here we need to type logging as well we can even wrap this inside the div okay now let me copy and put this in the sign up just change this into sign up and then paste this into users change this into users okay so now we have the views and we want to associate those views to rows let's go in the row term and right here we're going to Define path uh well actually my indentation is set onto four spaces which is something I also don't like so I'm going to quickly open the editor config file and right here I'm going to configure that for every file name extension which had which is JS or jsx um or css okay let's set the indent size to the two okay so I save this and go in the rotor and format the code and that's it okay now the path will be logging and we have to type right here element needs to be that needs to be a logging component okay and the login needs to be imported from views login.jsx okay and just like this we have created the login route let me actually duplicate this and call this sign up and the component needs to be sign up as well and that needs to be imported end users right here okay so we have three rows now let's go in the browser and if we just reload the page we're gonna see uh still up because we have created rotor but we don't use this road okay to use these we need to open main.js and we have to remove this app and we have to create a row let's let's create rotor provider okay and we have to specify right here the rotor which needs to be imported from the file we just created so here we have this rotor file that was imported in the main and then we created right here this rotor provider now if I save this and have a look in the browser we see not found page why do we see this because we have not configured any road for the slash okay so there are no rules for slash let's go now in our application and basically create a not found component as well not found View so basically anything that is not code by one of the rows above anything okay should be code by our note found View and let's create this not found view under views folder let's call this not found okay I'm gonna call this not found well actually the component name is not found but the text will be something like 404 page not found okay like this and now let's have a look so users why do we see users uh not found let's go in the router and right here we need to use not found component and again this component needs to be imported in the road now if I save this IC page not found of course you can write your own HTML in this not found component your own CSS to make this page a prettier but that is the functionality okay and let's format the code I want it to set on two spaces which is fine okay so we have the note not found page but how do we access the login so we just need to put in the URL slash login and this is the login page if we just type sign up we have a sign up page and for users we have the users page okay now let's start talk to talk about the uh layouts okay so we have three rows sign up login end users and in most cases login and sign up will have the same layout and anything basically which will be visible to the users when they log in inside the system will have its own layout like the admin panel type of layout okay so let's create now layouts and use them for this we can actually create dedicated layouts folder and put those components inside there but I'm going to create components folder in this case and put my layout right there okay so let's create a guest layout.jsx and let's generate the component guest layout format the code we need to type guest layout right here now let's actually leave this empty we're going to take care of this later and then I'm going to create also default layout let's open the default layout and change the name into default layout okay uh we're gonna work in the about the content of this layout but let's start with the guests so we have to use this layout but also the child roads needs to be rendered inside the layout okay let's start step by step I'm going to open row term here's my router and let's create a new road right here okay and that new road will be for the default layout path on slash basically we're going to use element which will be called default layout okay we're going to have additional path and we can give this path also slash and I'm going to explain why I do this curl the braces path slash we're going to use uh right here guest oops we need like this guest layout okay and those three roles basically need to become children of one of those roads okay so like in the default component in the default layout let's define children inside there we're going to Define well let me actually copy the cut the users and put this as a child of the default layout okay make sure you have this path also starting with a slash and then we have the login and sign up to become children of the guest layout so children right here and the layout let's form the code let's put comma right here and now we have two layouts two main paths and components like we have the default layout and the guest layout and these two components are children of the guest layout and these well these Road users wrote and we can also create let's actually duplicate this and create for example dashboard and let's very quickly create dashboard inside there we need dashboard as well and right here we import the dashboard okay so and these are the children of the default layout now let's start let's start with the let's start with the uh the um with the guest layout so if we open guest layout uh let's give it div and inside there we need to render the login or sign up for this we have to use Outlet component okay Outlet will be the place where the child Road will be rendered okay and now if I open slash login page we see login right here okay so the page is still rendered but anything what I put right here extra div elements if I put this Outlet inside the div element and if I put some here some text right here four guest users only okay I save these I see these four guest users only and then whatever is rendered inside the outlet if I go in this sign up it has the exact same layout so this does not change only this portion is changed okay and just like this we have a guest layout we don't actually need um these texts in extra div elements we're going to apply a little bit styling on these but now let's define the let's define the default layout but before that I'm going to quickly open the rotor and it said rotor I'm going to define the let's define path slash okay whenever you try to access slash I want to redirect user to the users page or dashboard page in this case let's redirect it to the user so we're going to use navigate for this let's specify inside two to be users and let's put comma right here okay so now whenever we don't have a not found on slash anymore okay instead actually we do have and uh we do have an empty page and the reason for this is that inside the default layout we don't have Outlet okay we don't we have not told react application to render child rules inside right here okay so let's give div right here save this and now we see users and if we just delete and leave on the empty we're gonna still see in the URL users that's because we navigate we redirect user to the users if we don't want to redirect user to the users but instead still render the users we just need to put the user's component right here okay and in this case it doesn't matter if we access slash or slash users we're gonna see users uh page rendered but let me actually return this into users okay now we have two layouts this is the default layout let's put some text inside the default layout default and we see default right here if we access slash dashboard we see default if we access slash login we don't see this default okay so we have two layouts but we need to we need to detect somehow which layout or which page we need to render okay and that should happen based on the information if the user is authorized or not and we need some kind of State Management to save the user authentication information authentication and maybe in the future authorization information as well okay so but first at the moment we just need to know if the user is authenticated or not okay so talking about the structure of the project I'm going to create a new folder right here called this contexts okay inside which you can create multiple contacts in this tutorial I'm going to just create one context and it's going to be the main State context okay let's create new JavaScript or jsx file and I'm going to call this context context provider.js6 okay and right here we have to create State context State context equals create context I want to create context and I want to import the create context function from react okay and this create context basically accepts default values right here default value right here you can pass the default value so I am going to pass the default value my value but first I'm going to show you um why the default value is important okay so actually let me pass the default value first and then I will show you uh a little bit later why this default value is important okay that is important basically for auto completion uh for IDE for vs code for PHP term but I'm going to show you this in in action so inside the state we need two at least two informations for now so we need the current user information to display in the nav bar and I'm going to specify this to be null and then we need token okay again I'm putting this information right here for just Auto completion purposes so you can set this now all of it and then down below we need to create the context provider okay so let's just just Define export const context provider to be a function okay so as an argument of this function we have to accept props and we have to take the children from here okay and we have to return js6 from here and let's just return our state State context dot provider okay this is something we have to return from here and so right here in this state context provider we have to specify also a value okay the value has curly braces inside let me zoom in so this one has curly braces inside but I'm going to add additional curly braces to mean that I want to pass an object right here okay so this curly brace is just for react additional color braces is that I'm passing an object right here and inside there I'm going to pass the user information okay before I pass anything let's define right here a couple of states an actual state so right here we created the state context with the default value but we don't have an actual state for this so let's create state for user user and set user use State and let's pass null or an empty object for the user okay let's create also token and pass right here underscore set token um said token use State and the default value for the token will be now okay why I call this function underscore set token because I actually need a separate set token function right here okay so what is the purpose of this set token it's going to accept the token and it's gonna call the use States set token to set that token inside the state okay I couldn't name this set token because I would have the function with the I would have an error basically okay so and then I need to set this token also in the local storage or in session storage so if token exists then on local storage set set item for the key like access token I'm going to pass the token so I'm saving these in the local storage because whenever the user authorizes authenticates we take the token and we need to set this in the local storage so whenever we refresh the page the user needs to stay as an authenticated person okay if the token was not passed I'm going to call local storage remove item access token and that is the set token function let me zoom out slightly okay so we have a set token function and as an initial value for this token we can take the local storage get item access token okay so that can be the default value at the moment it will return now because there is no default value for the um for a currently access token okay so we have the set token let me zoom out slightly and inside the value we have to provide the information we have so we have to provide the user information well actually let's call this user also so we have to provide user information and that's going to be the user we have to provide the token and let's specify right here set user function as well and set token so right here we are exposing set token without underscore because that needs to also put the token inside local storage or just remove it from the local storage okay so we are exposing these two functions and in between these opening and closing tags of the state context provider we have to render children okay and I think we have this context provided ready and let's collapse this and at the bottom for easily accessing these context provider I am going to I'm going to export a constant function use State context okay and that's going to be a function which will simply return use context state context okay and make sure you use context is imported from react okay so this is how our file looks like small additional thing because we are exposing uh set user and set token as well for auto completion purposes let's put them right here as well set user to be a function and set token to a function as well okay so we have our state ready and now based on whether the token is available or not we need to either render the default layout or the guest layout with the corresponding pages okay for guest layout we might need to render the login page let's start with the default layout I'm going to open default layout and right here I am going to use the state context okay so we're going to use the function use State context that needs to be imported from our context provider and let's create two variables one will be the user and second will be token okay and then I'm going to check right here if the token does not exist we are going to return navigate component and 2 will be a login okay so if the token does not exist and user is trying to open a page which is a child page of the default layout it means that user tries to open some protected data protected page but the token does not exist so users should not be able to access that page and if we check in the browser at the moment and just try to access users for example hit the enter we are redirected to the login page okay so we cannot access uh like slash or we cannot access a dashboard or we can access users basically anything that is a part of the default layout we cannot simply access now we need to do something similar for the guest layout let's open guest layout we are going to use State context const let's only import token at the moment we don't need user if the token exists so this means that if the user is authenticated and if user is trying to open one of the pages which is part of the guest layout like either login or sign up or in the future you might also add password request password reset page as well so we need to return navigate redirect user to the slash okay which is at the moment it will um it will show the users okay so I save this and at the moment the token does not exist okay so if I just reload the page we are on the login however if I go in the context provider we are taking this access token which at the moment doesn't exist as I mentioned if I delete this and provide token to be some value uh true able value non-falsible value I save this and open the browser uh if I just reload the page okay that does not seem to be working let's go in the guest layout use State context if the token exists we need to redirect to slash let's inspect this and check if we have any errors okay it does not come right here we navigate user to slash what is slash basically I think that is the reason so if we just navigate into the slash basically in this case uh probably means this slash which is part of the guest layout okay so if we just navigate into users for example we just reload the page no it doesn't work okay let's debug this and understand what is the actual token value because that should work the token is not okay it is that is something let's go in the context provider so we have the token initial state we export the token right here why the token is actually not so I save this and just reload the page okay so the token is still now and I think we don't call set token so we don't set we have the context provider oops my bed my bed um I forgot completely forgot that uh creating the uh context does not mean anything if we don't use the context of course so that's a small mistake we made so I we basically need to use a context provider our context provider what we created and exported from this file so this context provide so basically I'm going to create component context provider right here and then the rotor needs to become a child of this context provider and the context provider needs to be also imported from the file we just created so if I save this now and just reload the page and hover over on the token we see it's one two three so let's actually go in the guest layout and remove the debugger and put a slash right here reload the page and we are on the default page okay so if I just try to open the sign up page I am redirected to the slash which is by itself redirects to the users okay and just like this we have protected roles for guests and for authorized users as well so let's go in the context provider let me actually close everything there are two main tabs let's open context provider and let's specify right here the local storage get item okay perfect now if I just reload the page I am on the login page and now I think we can start working on the markup just I'm going to easily do that okay let's open index index CSS and I'm going to paste copy and paste the CSS file so as I mentioned I don't want to spend time on writing CSS so that is like a 200 line of CSS I'm going to put the link to this CSS file in the video description okay so that you can copy and paste and you you can also find these CSS file in the GitHub repository I'm going to put in the description but I will put the separate link for the CSS if you don't find this definitely let me know in the comment section I will add that maybe uh I hope I will not forget okay so what does this do so it Imports the open SAS font and reset some styling and create some basic styles for basic elements like input and buttons and set some colors and nothing nothing that complicated okay everything is very basic and now let's open default layout and I'm going to start working right here okay so I want to create that let's start from the very top and I'm going to give this div element an IDE called default layout okay inside there we're going to create a one tag which will be a side which will be for the sidebar inside there I'm going to create two link tags okay so the link tags are the react rotor tags and we have to specify right here um the actual path so the first one is for the dashboard and the second one will be for users let's specify users right here and whenever you type create this link tag make sure you have the link component imported from the react rotor Dom okay so we have just created this site down below this side I'm going to create div which will have a class name of content inside there I'm going to create header which will be the nav bar actually and let's inside there just put a d with the text header and let's create another div which will be for the user information okay for the authenticated user information let's leave this like the user info let's leave this as it is right now and below the header I'm going to create main tag which will hold our Outlet okay and let's delete this Outlet so we have this default layout now let's go in the context provider and set some value right here one to three so I save this and go in our application and voila so we see we see our layout okay so we have the dashboard we have the now bar the user info right here and when we click on the dashboard it's going to show the content for the dashboard inside the layout when we click on the users it's going to show the info for the users okay so far so good now let's go in the login and create probably a login page okay let me finish one thing before I go in the login page so we have the user information in the context provider okay right here and that user information needs to be displayed in the default layout okay so now I will provide right here an actual um actual data like name is for example John okay and in the default layout I am actually already using this user State and I will output that user information right here okay so I want to Output the user.name and then let's create one link element which let's give this one class name BTN logout and this one will have a text log out let's give it also href href like this and of course it will need on click event listener on a logout this on logout does not exist yet so let's just create an empty function const on logout okay let's accept let's accept event right here and call Event Event default okay now let's have a look in the browser and we see John okay so and just like this we are reading the context context API data State and just displaying this in the null bar okay which is which is perfect now let's go in the login.6 and format the code and just create the markup right here starting from the very first element let's give this one like a login sign up form class let's give this one animated and fading down as well okay and then let's create another div which will have a class name form inside there I'm going to already create form which will have on submit um and let's create a Dom function at the moment const on submit is an arrow function Oops I did something wrong like this we need to accept an event and again call event payment default okay and inside the form uh we will need few inputs um let's give this one a placeholder uh email so this is the login form so we just need email and password okay so let's give this one type password and this one needs to have type email and let's create a button which will have class name etn and maybe vtn block as well to show it on full width all these classes are defined in the index CSS okay as soon as you copy and paste these there's nothing to do and let's give this one text.l login or submit let's give it login and down below let's create also a paragraph which will have probably um like a message class and inside there I'm going to create give it text not registered and then let's create a link into a rotor to wrote sign up okay and let's give its text create an account okay so I think we have the form ready I save this and we need to delete the token to access otherwise even if we just type in the URL we cannot access the login page so let's go in the context provider and right here let's give this null so I save this and now this is the login page I want to delete all this saved information okay perfect and let's actually give the form title as well probably above the form tag or maybe inside the form tag let's create H1 let's give this one class title and the text will be logging into your account so I save this and we have this text and really nice looking login form so I click this create an account it's going to open this sign up and now we can work on the sign up page let's go in the sign up jsx let's format the code and I'm going to copy I think I can copy everything and put this right here except that the text needs to be changed I'm going to type right here sign up or free the on submit function does not exist so we have to create that we need an event right here and we need to call event driven default as well and down below probably window type already registered oops um sign in like this and this needs to be logging and this needs to be sign up and we need additional field which will be password confirmation and one additional field which will be um full name and maybe let's call this email address so I save this and this is our signup form full name email address password password confirmation button in the link to the login page okay I think this looks nice so we have the animation as well and the login and sign up but all of them are in the same layout okay now pay attention one thing because we have the same layout for the login and sign up look at this this portion is actually repeated okay in the login and sign up and even in in the future if we create for example a request password reset page it will probably have the same type of layout so we can grab this and delete these two divs and format the code right here go in the guest layout let's delete this from sign up first as well go in the guest layout uh before we go in the guest layout let's have a look in the browser so we ruined our layout but if we go in the guest layout and put this right here in extra div right here now our Outlet is inside these two developments if I save this we have now with the exact same layout okay just click sign in click create an account in this case we actually lost our animation because the animation was added on the outer element and the outer element does not change okay so we can add the animation to forms but this white card will not be animated okay but you get the idea I just wanted to give you an information more realistic view of uh what is the purpose of this guest layout okay so I'm going to undo the change go in the sign up undo from here and undo from login as well and just leave it as it is right now and we have this nice animation now let's start actually implementing the sign up and login and for this the front end will need to make requests to the server side to the back end and send the currently what information is filled up inside the form basically okay so for sending requests from front end to backend we're going to use axios which is you probably are familiar with axios it's a very popular client for HTTP requests so npm install Dash uppercase s axios it's going to install the axios and then let's spin up the server again npm run Dev and in my source folder under react I'm going to create an axios client axios Dash client dot JS okay so and why do I need this and I'm going to explain every every step what I do right here so first of all we need to create access client which will be axios dot create and that axios needs to be imported so let's just delete the last letter and hit the control space and then this is this is the import what you need to write okay import access from axios dot create and we have to provide um we can provide a few options but what we are interested is the base URL okay let's see that's going to be the API URL in our case our API is running on localhost Port 8000. this is the laravel application okay this is where the API is located so I don't want to hard code a localhost port 8000 right here instead I'm going to use the environment variables for the react application how I can do this I have to create not on under the source under the react folder I'm going to create a file called EnV IR dot example and the extension is dot example enf dot example okay and we have to provide right here the you are probably familiar with the en file but if you are not that's a key value storage mostly used for configuration and whatever you put right here as a key that's going to become the environmental variable in your application okay so I'm going to type invite so basically any key and again stick with the documentation so if you just search for white environment environment variables you're going to find out more about these okay and you can find out that the all the all the user defined environment variables needs to start with the white prefix okay you can find out this information so I'm going to Define byte underscore app or maybe API base URL something like this okay and there's going to be http a localhost port 8000 okay I Define the key and the value but I need to use this key in my axios as a base URL okay we defined a EnV example but that's not enough the example basically as the name says also is an example of the actual.en file okay it's a sample so I have to copy and paste the example and call the actual in file.inf so this is how it should be named and then I'm going to take this key and use it but not directly like this so we have to use import dot meta dot EnV and anything any environmental variable will be inside this EnV and Dot white API based URL okay this is our base URL and we can specify right here slash API if we want so there are two approaches we can specify slash API right here and then we can leave this as it is right now or because we are talking about the base URL we can leave this on the domain right here and then let's use tactics and inside curly braces we use the variable and then slash API okay and just like this we have created axios client okay what do we need to do with the access client first of all we have to export this because we will need this in the login form and sign up form and in many other places so export in default axios client like this and then we need to put interceptors as well so what are the interceptors interceptors are special functions which will be executed before the request is assigned or after the response is received so on the access client dot interceptors dot request dot use so I'm going to use the following Interceptor so I'm telling axios to use the following Interceptor before making requests so right here we get the config config object and we have to return also the config object the same config object but we can modify this config object while we return that and this is exactly what we are going to do so inside config headers I'm going to set the authentication uh sorry authorization story wait a minute how authorization okay and that's going to be be aware and the access token what we saved in local storage okay that token is actually saved in the local storage so cons token equals a local storage get access token and we pass this token right here okay but you might have a question what if the user is authorized for example when the user is trying to log in and the token doesn't exist and we pass this token right here the token will be null and we pass null and the point is that when user is trying to log in or sign up the token should be now so there's no need to pass anything right there yes this header will still be added but that doesn't hurt so we can even add additional check only at this header if the token exists but I think that's not necessary because if the token doesn't exist then we pass it as a null or incorrect token that's that's not a problem okay so we have the now the request Interceptor and let's create also response Interceptor okay access client dot interceptors dot response dot use we get the actual response so the use basically accepted two two functions unfulfilled when the promise is resolved this is when it is resolved in the second function is when it is rejected okay on on fulfill we get the actual response and we have to uh we have to return that response so we don't do anything with the successful response at the moment however we can log that information if we want but um I don't need that right now on rejected we're gonna get an error actual error so I'm going to take out the response coming from the server so the actual response coming from the server will be a property of this error so I just destructure this error and take out the response okay so now I can check if response status equals 401 which means that if the request was made and the response tells us that the user is unauthorized user is not authorized for example trying to load the users but the token was invalid or the token did not exist for some reason okay in this case obviously the request would not be made um if you if the token doesn't exist so the probably the reason is uh when this happens is that token is probably an expired or incorrect token okay so then from the local storage we can run delete remove remove item access token okay so whenever we get the response we remove the access token and that's it so in else case we can write some other other cases like if the response status is 404 we can show a not found page uh if the status is 403 we can show four medium pages and we can handle other scenarios right here if we need but at the moment I think it is not necessary we just throw the error okay if we if the code comes right here it means that the response was rejected and we need to throw the same error what we get and just like this we have this axios client ready now I think we can go in the login form or probably should start from the sign up and make requests to the server okay so we obviously need to send requests on submit but we don't have yet information what needs to be sent to the server so we have inputs right here by the way that should not have type email so we have a name and email and password and password confirmation and we need to gather that information we can either create State and create like a two-way data binding on these input fields and then get that state information and send it to the server or we can create refs and take the values from the refs okay in this case because we don't need the actual state to be displayed somewhere on this page I think we don't need States because if we just create States we would cause the state to be every time updated when we type something in input field which is something we don't want so let's just create refs const name ref is use ref and let's duplicate these three times that's going to be email ref that's going to be password ref that's going to be password confirmation ref okay and we have all of them I'm going to copy all of them with the multi-cursor and just create rev equals this okay now I have revs and right here on submit I can create a payload object which will be an object and inside there we will have the following information okay that's going to be ref dot current dot value let's format the code the only thing I'm going to change is the password confirmation needs to be a underscore case instead of um camel case because this is how laravel will search for the the confirmed value of the password confirmation I'm going to explain this on when we talk on the backend side so we have a payload and before I send this payload we can print this in the console so let's have a look let's go in the console let's just type zura with some email and password let's hit sign up and we see right here the whole information if I click sign up again it is printed right here so we have the full information and now let's make requests to the server I'm going to type axios client and this needs to be imported from the access client.js file accessclient.post we're going to make post on the Slash sign up URL we're going to pass payload and we expect some successful response as well as maybe an error okay so inside successful response right here we will get an actual response the response will contain the status code and headers and many other things and it will contain the data so I want to destructure the response and take out the data from here in that data will be the actual response what is returned from the server actual Json object and I will assume the server will return I want the server to return user information and the token information okay because I want to save that user information and token information in the context state in the state state context okay so for this let's use the state context first const we need okay you use State context and what do we need so we need probably set user and now this is this is a perfect time to show you one thing so when I hit control and space It Auto completes the for these these two things for me okay and that comes from the default value from here if I just delete everything from here and then I hit Ctrl and space nothing no suggestions okay so this comes the autocompletion comes from the default value even if you don't give any actual meaningful value just provide the properties right here okay now I want a set user and set token and right here I will assume the data would contain user and token right there so I'm going to call set token data dot token and set user to be data.user okay and just like these we set the user information and token information whenever the token information is available user will be immediately the application will re-render and the user will be redirected to the dashboard page immediately there is no need to do any explicit redirect okay and we need to handle the catch case inside which we might get some errors so we might have error right here I want to take the actual response coming from the error error.response and then I'm going to check if the response is available and If the response dot status equals 422 which means the validation error so in this case I know that a response data which is an actual actual Json object coming from server so response.data will be the actual response coming from server and this one will have an errors okay I know this and we will have a look together as well so I take those errors and I want to display this error somewhere right so I don't have yet state for these but I want to create that so I'm going to just type the response data errors and I think this is the perfect time to pose right here uh and go to the backend and start implementing the actual sign up and login and log out as well and I think it's also the perfect time to pause the video hit the like button and continue watching okay now let's let's bring up the terminal that shouldn't be opened let's bring up the terminal and I'm going to stop the Artisan server and we have to create a new controller which should be out controller okay so PHP artisan make controller and I want to create this alt controller under API folder so API slash alt controller let's hit the enter okay Alf controller created successfully let's open our controller here we see that and let's create three functions login sign up and log out okay and for logging in sign up I will need separate request files so I'm going to generate two request classes as well PHP artisan make request login request hit the enter and the second one will be sign up request hit the enter okay inside login request I'm going to use login request class instance inside sign up request I'm going to use sign up request request and inside logout I will just use request okay and I will need to open API PHP and configure roads as well so wrote whenever post request is made on sign up it should call alt controller class sign up method okay and let's just replace these with the import and at the top you should see use up HTTP controllers API of controller so and let's duplicate these and that's going to be for login and that's going to be for a logout so we have all three methods ready okay the login request class and the sign up request class at the moment are empty okay but the request class main purpose is to have a rules and do the validation and return the validated request object from which we can get the actual validated data and this is what we are going to do right here so I want to get the actual data from request of ba validated method okay that's going to be validated data and that will contain only those fields which I'm going to describe in the login request as a rules and then I'm going to create a user so I'm going to call create method on the user and I'm going to pass name which will be data name and I'm going to pass email which will be data email and I'm going to pass password right here but I'm not going to save the plain password of course I'm going to run a decrypt function to encrypt the password and save it like this okay and I need to this one will create a user and return that user so I'm going to save that user somewhere in the variable and then on that user I'm going to call a method called create token okay autocomposition doesn't work right now because that user is kind of um unknown type of a variable okay and I'm going to add in annotation for the IDE for the PHP storm that is an instance of app models user and now when I start typing the method name it's going to autocomplete that from you for me so right here I have all the methods which is available in the user okay and I need create token and I'm going to give the token name like main for example a plain text token okay so we let's save this in a token variable and then I'm going to return two variables user and token this is what we expect on the client side so now look at this whatever I return from here like response array user is the user and token is the token okay so this array will become this whole array will become data right here and then I get the data user and data token okay I can simplify this and just return compact of user and token and that's it so and just like this we have the sign up ready um actually we did we just did login I think right so let's just uh let's just move these into sign up okay and then I was to log in let's move this sign up first and log in second okay so what do we do in the login so again we need to get the data which will be request validated data we need to get the actual uh well we need to try to log into the user let me actually call this credentials because that that is actually credentials and I'm going to call auth um our facade attempt method and pass the credentials I want to try to log in with these credentials and the credentials needs to be an array and it should contain email and password okay if that attempt didn't succeed then I'm going to return the response with message like a provided email address or password is incorrect okay if the attempt was successful and the user was created I want to get the user information so user will be from alpha side I can get the user method okay and then on that user I'm going to call again create token but again the ID doesn't know what what is this user variable so let's add an annotation right here user and then I call create token and give this one a main and then I want to get the plain text token so this plain text token is only available for just created token so as soon as you get this once you won't be able to have a look at this anymore okay so we get the token token and we have the user and token again and we need to return the same type of response from login as well and on logout we need to get the user and we can get the user from request user and again let's add annotation right here that this is an instance of user and down below we are going to call on user current access token delete just like this what is this user let's have a look this user is app modules user okay okay that should be good contacts so can delete and then finally we return uh response we can return an empty response with such score 204 okay which means that the response the request successfully worked but there is nothing to return and just like this we have the authentication controller Alpha controller ready now let's go in the sign up request and create rules first let's change the authorizing to true and then let's define name needs to be required it needs to be a string with a maximum of like a 55. we have to provide email to be required it needs to be email valid email address and let's talk about the password so the password needs to be required as well it needs to be confirmed and let's specify also some additional possible password validation rules like a minimum of eight characters we need letters and maybe symbols as well okay and just like this we have the sign up request ready for the email I think we need to also add that it must be unique so email must be unique in the users email field okay so this is the rule name and this is the table name and this is the column name okay I think now we have this sign up request ready I'm going to copy this open login request change this authorizing to True make sure you change the authorizing tutorial into both sign up request and login request then inside the rules we will need we will need uh we don't need name we need email to be required in email and right here we have to specify exists so the email whatever comes right here must exist inside the users table email call okay and the password is required as well and we don't need to like confirmed or the rule okay and just like this we have the login and sign up ready all right now let's try to make requests from front end to backend and go in our application go in the network to observe it and fill up with some data let's specify my email address specify password and hit sign up okay what happens do we send a request okay the request is not made let's go and sign up understand what happens maybe we just reload the page and click sign up no nothing nothing happens let's put a debugger right here okay the code comes right here we call them in premium default and then we have the payload right here okay let's just continue is the payload printed yes it is then we pass the payload in the access client post hmm let's print right here error I think some kind of error is happening and we don't see this error so let's click sign up here's the error type error cannot read properties of undefined reading status that happens in Access client js17 response status okay some kind of error happens in the access client and that should probably that happens from here okay now look at this so error happens I think right here because we need to get item but that error was suppressed and we did not have any idea why this happened and that's I think a perfect example to debug this particular problem and if we're going to sign up and remove this and just reload the page I click sign up and the code execution comes right here but the request is not saved is not printed okay so what should we do okay that that's really good really good example of debugging so obviously the error basically happens somewhere right here but we don't see the error okay you should start with small steps like let's remove then and catch and if C let's see if the request is made so click sign up let's have a look go in the network I think no request is made go in the console and we see right here an error okay and not read properties you'll find the fine reading status so as soon as we remove that now we see an error and that come that comes from here okay so I think what we need to do is in the access client first of all we need to fix this problem of course but before we fix that if for some reason some error happens right here we can put this entire code in try catch like this and then we can print this error right here okay console dot error Maybe let's have a look let's click sign up and now we see this error is printed twice but right here we have the exact reason this this error is the exact reason why this happened and that is the local storage yet is not a function okay so let's go right here and change this into git item let's save this and go in the let's go ahead and sign up and uncomment this code save this let's go in the network we'll reload the page and click sign up okay the request is made however I think sir is stopped so let's run PHP Artisan serve let's go in the front end and click sign up and look at this so we get the response 222 because we didn't pass any kind of information we passed everything empty okay and this tells us that the uh the name field is required so this is the overall message but each field has its own message as well like email and name and password so let's actually try to display those errors somewhere inside the form um I'm going to create a state for this const errors and set errors use state by default the errors will be null okay and whenever we get these errors and we can print these errors and we are actually printing these errors in the console so if we go in the console right here we see these errors as well so what we can do is called set errors and pass this response data errors to this method okay and just like this we have the access we have the errors and we can print these errors for example right here if errors exist then let's let's render a div element let's give this one class alert and inside there I'm going to print my ears but my errors is an object okay look at this so the errors is an object which has key and the value and the value is an array so I want to iterate over my object and I want to iterate this with object dot keys I'm going to pass errors right here then call map I take the keys iterate over my keys right here I get the key and I want to return uh jsx component from here like I want to return a paragraph inside which I want to Output errors for the given key which by itself will be an array okay so I want to take these and then take out the first element from there and because we have a loop right here using map I we have to provide key right here as well which will be key itself so this key will be given to a key of the paragraph and if I say this and click sign up now I see these nice validation errors the name field is required email Fields required and password field is required okay I think that's perfect now let's provide these fields I didn't type whatever I wanted let's click sign up and look at this look at this what happened so the user was created let's have a look in the network so we got successful response we got the user information we got the token and just like this we set the token in the local storage as well and let's check by the way local storage local storage here we have this token is probably something else but here we have this access token okay let's go in the what is the second token uh okay let's just try to clear up the local storage now we are on the login page and now let's implement the login that should be pretty straightforward and then let's see whether it is set inside the access token or in token I think this token was something else let's go in the login okay and let's create refs first let me quickly copy and paste okay I need email and password ref let's put them right here I need this part in the submit so we get the payload we get the name email and password and we make requests we need set user and set token as well so we get this and we probably need errors as well so we get all these set users a token set errors as well and down below right here we need ref to be email riff for the first one and password ref for the second one so I save this and now let's try to log in uh I just click I just click login and we get the errors right here and we can actually print these errors in the same way we are doing for sign up so I'm going to copy these errors and below the H1 paste that save this and here we see name field is required uh okay we are making a sign up request which is wrong we should make login request let's click login okay login request was made and we see right here errors uh the email field is required password field is required let's provide correct email address but incorrect password let's see provided email address or password is incorrect okay now look at this so we have provided email and password but we still see the same error okay that happens because the server returned some kind of other error so if we go now in the catch right here we have to adjust this so now the response actually has a message and I think we can always display a message right here I believe we can do it like this so if we leave this both empty and click login what will happen so the email field is required in password field is required well we can actually I think if we go in the login controller we can remove required from here and just leave these as a string okay password is just shrink and in this case it will not complain about this that it is a required but this must be a valid email address okay yeah we can leave this required is there a problem but we have to modify the actual returned response because whenever we iterate over our errors we assume that errors is an object which has key in the value with an array we have to do something similar right here if the message is received okay so let's do like this inside this if statement let's create another if if response dot data response.data dot errors if that exists let's set this else else we assume that there will be data message like if we provide right here the email and some password this will have only message so I'm going to call it set errors as an object e will be something like email for example and the value will be an array I'm constructing the same type of object and inside this we're going to have response dot data Dot message and it's going to display this error message so I click login and one additional thing whenever we make requests we have to reset the errors so right here I'm going to call set errors to be an empty object or maybe not now I click login and let's have a look provided email address or password is incorrect let's see what is the actual response okay it looks like this returns 200 okay this is this is wrong let's go in the alt controller and on a login right here we have to provide some kind of incorrect credentials um error code which can be like a forbidden or validation errors like two for uh four two two so if I save these and click login right now okay now the code comes right here and we have the response the response contains the data and the data contains message the data does not contain error it contains message and right here we see the provided email address or password is incorrect okay this is exactly what we wanted to do so if we go in the login right now and remove this debugger and just click login so we get this information okay now let's provide correct credentials hit the enter and we are logged in and if we have a look now in the local storage we have the access token right here and if I reload the page right now I am on the login form why because in the context provider uh we don't get the token from the local storage I deleted this once for testing purposes and then I did not return it back so that should be get item access token so we get the access token set it into the state and now we are authorized if I just reload the page I am authorized okay and just like this we have implemented authentication in our application and I think now we can focus on logout okay the logout obviously should be inside a default controller where we have this log out button but before I do the logo I want to show you one additional thing so if I just reload the page the user information right here is dummy user information it is written John right there if we go in the context provider that comes from here okay which we don't want I'm going to return this into um an empty object and whenever I just reload the page we don't have the user information why because we don't have anything about the user so what we need to do is to make requests when the default layout is loaded we need to make requests to get the currently authorized user information and set this into state and inside api.php there exists a route for this okay which only allows authenticated users without a sanctum middleware authenticated users to access the slash user and get the return the user information okay this is the endpoint we need to access if we go in the default layout again and I'm going to use I use effect hook okay we pass a callback obviously and the second argument will be in Array and empty array which means that I want to listen to component d uh Mount event and whenever this happens I am going to make get request on slash user which will return the user information so right here we get the response I the structure the response take out the data from there and then I'm going to call set user and pass the data okay do I have this set user no so I can import this set user from this not import but take out this asset user from the state context and just like this I can use that so I if I save this and just reload the page right now the user information becomes available so the request is made to the server which returns it and then we have it available okay so this is one thing and now let's implement the actual log out if we go in the default layout we listen to the logout click that's going to be pretty straightforward log out axiosclient dot now we have to make post requests on logout and whenever the logout happens we in in then basically we have to set user to be an empty object and we have to set token which is not used right here set token to be null okay we set the token to be now which automatically will cause the user to be redirected to the login page okay whenever token becomes null then inside the default layout this check will rerun and the user will be navigated to login so again let's just click on logout and I think the logo didn't work we have a 500 error call to a member function create access token on null okay this happens because if we go in the API the log out can only be called for authorized users okay it should not be right here it should be for authorized users and if we go in the logout the request user was actually not but let's move this into our sanctum so I have to create a group right here let's pass a function and inside there we put this and let's take this out and put this right here as well just we need to change these roads get just like this so I save and click log out again and now we are logged out the token was deleted the response was successful and we will redirected to the login page okay now let's try to log in again hit the enter we are inside the system we can navigate between Pages we are authorized and we click log out and we are logged out I think that's perfect now let's start working on to display the user's table and implement the user's crud so let's login and let's go under the users and we have to create table so I'm going to open now users.jsx file and we have to Define State as well as the HTML so let's start with the state so we will need users and set users use State and the default value will be an empty array we need also I'm going to show a loading text until the users are actually loaded so loading and set loading which will have a default value false so by default the loading is false and I'm going to use effects and make requests to get the users on component did Mount so passing in empty area is a second argument and let me actually create const get users function which will make a request access client get users the backend side does not exist yet but I will assume that the backend is available on slash user's endpoint so I make requests right there and inside then we of course get the response with the structure the response and take all the data from there this is what we are interested and then let's print the entire data okay now let's print the data and let's also give it a catch inside catch we need to set a loading to be set loading to be false so basically before I make requests I'm going to set a loading to Patrol then when we get the response I'm going to set a loading to be false as well and in catch we set the loading to the false as well and on component the demand I call get users okay which should return all the users uh well before I continue right here maybe it's it's uh it will be better if we first implement the backend side and then continue right here okay so let's that was the react server so I think we need this running I'm going to stop the Artisan server and we have to create the user controller so PHP artisan make controller I need to call these under API folder user controller and we have to generate the controller with a request and Resource as well so now I'm going to open the documentation and search for make column controller uh let's search for controllers okay let's search for make column controller here it is and I'm interested in a resource and requests as well right here so we basically I want to specify that I want this controller for modal which is called user I need Resource as well I need requests and Resource as well okay resource and requests so when I hit the enter it's gonna create few classes it's going to create the store user request update user request and user controller okay and this is intended for API so now let's start the server PHP Artisan serve and now if I open user controller this is the controller which we're going to use it has the index method to get the users create store show and edit and update no this is not what we want so this is this is intended for the website we are it has these seven methods okay uh however we don't need the edit and we don't need also I think create so those are intended to render the forms so what we need is for API so I should probably I should probably delete this user controller and delete the store user and update user requests as well generate run the same command but specify this this API which is I think I missed and now if I open this user controller it should have only index store show update and delete it does not have edit and create okay and I'm going to generate also resource so let's just run PHP artisan make resource user resource let's hit the enter and let's start with the um with the resource okay so let's open user resource what is the resource so resources basically a class which is used to convert the database models into Json serializable data which will be sent from the server from the API okay to the like in this case to the browser or to any client okay so from here we need to return an array of our data what we want to expose from from the user so the user basically has the ID the user has email and name as well so I want that information to be returned so ID for ID key I will return this ID let's duplicate this for name I will return name or email of course I will return email and I want to return created it as well okay this created that is an instance of carbon so I'm going to call format on this as year month day hour minute and second so we have the resource ready now let's go in the user controller and start implementation with the index method okay so from here we're going to return a user query I want to let's order by let's order by ID descending the latest users at the top and then I'm going to call paginate so even though we are not going to implement the pagination on the client side and I'm going to leave this as a challenge to you I'm going to still return a pagination result because I want to show you what type of result is returned when you paginate the data okay and then I'll give you also a hints how you can show the paging pagination links and how you're gonna actually implement the pagination okay so we paginate and get the response but we need to call user resource uh collection method pass this user the page the result of pagination and return it like this okay for the page you need let's pass it 10. as a per page value and we can return the response type into anonymous resource collection just like this so the index method is actually already ready if you go in the store user request this is a request which is empty at the moment but let's assume that this is already implemented so we're going to get the data which will be request validated data and I'm going to call user oops user create and I'm going to pass this data but before I pass the data I want to set the data password I want to encrypt the password right so we're going to run decrypt data password okay so I get the data I update the password I create the user here we have the user and then I'm going to return new user resource passing this okay and we can also return status code 201 by just putting this into a response function with status code 201 okay down below in the show we just return new user resource user here in update we have the user and we have requests as well so I get the request validated data and I'm going to set this into Data then on the user I'm going to call update passingly state however it might have also passwords so I need to check if inside the in data there is password available then I'm going to encrypt the password so I call the Crypt on data password okay and we call update and finally we return new user resource passing the actual user so we save this and the last method we need to implement is destroy so I get the user and I'm going to call delete on the user and return response empty response with status code 204. okay so we have the user controller ready let's go in the API and create wrote API resource on user's endpoints more user controller class and let's change this into import okay now let's implement store user requests first of all we need to change authorized into true inside rules we have to specify uh we have to specify name to be required when we are creating new user we have the name to be required it must be string and maximum can be like 55 characters we need email to be required and it must be email as well and it must be unique among users email field so we are doing something very similar what we did for sign up uh we need colon right here and the password will be required I think we need confirmed as well and we need password rule or minimum of 8 we need letters and symbols so I save this and now let's open update user request let's change the authorizing to true and down below let's adjust the rules for this we need something similar so I'm going to copy and paste this part the name needs to be required string and maximum 55. uh email needs to be required email and this looks also good but there is one small thing which we need to take here and I'm going to leave this as this right now but there's a bug in this and we have to fix that and the password it is not actually required but it must be confirmed and here are the other rules okay the you might not update I think I just closed it update user request so you might not update the password okay so this is how we're going to do that in the actual problem right here is that let's actually fix this so whenever we are updating an existing user uh and we are leaving the same email address it's going to complain that email must be unique inside the user's email okay so the third argument inside the unique rule is the ID which needs to be excluded inside the check okay and right here I'm going to pass this ID this is the request any site request we will have an ID so I want to check I'm telling uh Laro I want the email to be unique inside users email table for every other user except the user which has ID my ID okay and just like this we have the update user request ready okay now the backend is ready if we go now back into users when we make requests and right here we print the actual data now let's go in the users and just reload the page and let's have a look so we have some kind of Errors I think yeah I think the backend server is not ready it's not running so PHP art design serve so we just reload the page okay by the way if you pay attention the request is made twice okay right here and right here that happens because the mount hook the use effect function is called twice so and that happens because we are running the react in a strict mode okay because of the strict mode on development mode this is executed twice okay this is not a problem when you run this in in production okay if we go in the console and info right here we have the response and the actual response has data inside there and data is already a paginated data and we have links and meter okay now I want to create I want to create like a 30 30 users from the database seader so let's open database Cedar what do they do let's open data base Cedar and let's uncomment this so I want to generate like 30 or 50 let's generate 50 users okay and let's run PHP Artisan DB seed hit the enter seating database Let's Run This Server again and let's reload the page okay now we see inside data we have 10 okay so we got the 10 users 10 latest users and inside links we have the first last next and previous links but the most interesting is meta so inside meta we have every kind of information about pagination like the current page from last page we have two as well so we are displaying from first to 10 records so we can display these above the table or below the table from first to 10 we can display also which is the current page inside the page Nation we can display how many total records there are in the database and we can also display which one is the last page okay and we even have the whole list of links which has also page one two three four five six and two and the two is I guess the next button okay so we have everything what we need about the pagination okay and you can get this information from meta and then iterate over the links and create a pagination buttons and whenever this link is clicked you pass the URL to the access code client get and get user information from here and then display that user information okay it's gonna be very easy and straightforward I'm going to leave this challenge to you if you like want to me to implement and create small separate video about this pagination if you have any problems about this just let me know in the comment section down below okay so we have the users and we need to display those users I think this is the only thing what we have remained and let's start working on the template okay so on this div element I'm going to create inside another div which will be for the header and let's give this one users and then I'm going to create also a link to new user form page okay so for this for these I'm going to use a link that link is the react rotor Dom link add new let's we don't have actually a road for a new user okay I think this is something we need to do okay let me go in the react folder under source and Views and let's very quickly create two uh not two but one one component one view it's going to be userform.jsx okay let's generate the component user form and right here we have the user form as well now let's open router and right here let's duplicate these and I'm going to duplicate this twice and I'm going to add users Slash new and that should open user form and the second will be users slash and ID okay and right here I'm going to use the same component user form and make sure that the user form is imported right here okay but because we are using the same component for two different roles let's specify key right here to be user create and key right here to be user update okay and just like this we have the road ready if we go in the users right now we can link this into users slash create or users Slash new right I think we have it new okay perfect let's now go in the users page and click add new and it's going to show the user form click on users and it's going to show users perfect now let's give this one some CSS classes or style so I'm going to give this one inline Styles at the moment so let's give this one um display to be Flex uh justify justify content I should have probably uh created class for these as well but I didn't prepare so that should be space between and a line align items to be Center okay and let's give class to this add new button BTN Aid save this and have a look so we have the user's title and add new button perfect now down below this page header I'm going to create a div I'm going to give this one class name card animated and fade in down okay inside this card we're gonna have a table we're gonna have a t head TR th multiple times we're going to display ID name email and create date and we're going to have actions column for some kind of actions and we will need T body of course inside which we're going to iterate over our users so for this I am going to do like this so users dots map you and then right here we're gonna have we are going to have TR inside here we're going to have TDS multiple times so we output U dot ID U dot name U dot email you dot password sorry sorry created it and uh finally we need we need some kind of links so I'm going to put a link right here which will be to users well let's change this into color braces and set there I will need slash users slash plus the user ID okay that is the road to update user and let's give it a give it a text edit and then we're going to have button as well which will have it on click event listener um and let's give this one also class name BTN delete and text will be delete okay so let's see how this looks we have a problem because on click we don't do anything so let's just remove this on click for now okay so the response is received but I but I think we don't set the response okay so I need to call set users and because the data we are printing contains data itself inside we need to set users data to data okay so I save this and here we go so let me move this down here we see the user information the edit button is really ugly so let's give this one last name BTN edit okay that looks nice and let's put nbsp right here for some extra space in between so now we have those links and if I click edit that opens the user form in the URL we have the user ID okay and in the user form we need to grab the ID and fetch the user information from the server and display that user information okay um I think so far it's really good uh we can already I think implement the user user delete so let's give this one on click uh right here we accept the event and I'm going to call on delete and pass the actual user okay the user I want to delete so then let's create const on delete we accept user right here and let's display the confirmation dialog if a window confirm are you sure you want to delete this user okay like this if the confirm was not accepted then we return otherwise we call axis client delete and we make requests on slash users slash IU ID U dot ID okay and inside then we need to okay I think we can display the notification inside then so I'm going to leave this as a to-do show notification and do this as a very last thing um and then I'm gonna get the user so when the new user is edit I'm gonna uh fetch refetch all the users because I want the new user to be also in the list okay so now let's have a look uh sorry not the new user but the deleted user I want it to be removed from the list so if I just delete the user which has id50 click delete we have the confirmation if I cancel nothing happens if I click ok then let's see okay now the the user with id50 disappeared okay but it will be good to show a loading indicator when the table is in a loading state so we set the loading but we don't use that if you scroll down below we have this tea body I'm going to create another tea body TR TD with call spawn of call spawn of pipe how many columns we have we have five so I'm going to create one TD with five call spawn and give this one also text Center and inside there I'm going to show text loading with three dots okay that will be always right there but I want to show these t-body conditionally okay how I can do this uh I'm going to use a loading if loading is true then I show this t-body okay I format the code and in else case well if the users is not available we can leave these as it is right now so if I just reload the page we see loading on the table appears if I just delete the 49 ID user click ok then we see the loading indicator and then the table the the loading indicator disappears I think when it is in loading state or we should not show the second t-body so if not loading then show The Following t-body okay I think that is more liked it's more readable again if I delete one user we see loading and that's it okay so we have implemented the user delete now I think we can focus on a user creation and user update let's open user form and right here we need to do a few things so first of all uh let's use the ID and we're gonna take this ID from the URL parameters okay we have this ID in this user form component so we're going to use params and I want to take out ID from this okay then if the ID is available okay because when we are trying to create new user the ID is not available okay whenever the ID is available we are going to get the user information and load it into the form so for this I'm going to create a user and set user State use state and as a default value I'm going to give it ID3 now name to be an empty string email to be an empty string uh password to be an empty string and password underscore confirmation to be an empty string as well like this so we have the user and whenever ID exists I'm going to use effect and on component Mount I am going to set the loading well I think we don't have the loading indicator as well so const loading as well set loading use State loading false by default let's give it false and right here I'm gonna not right here but here I'm going to set the loading to be true I set the loader then using axios client I'm going to get um get the user so users slash ID I want to get that user information then we have the we have the response and the structure they take all the data and that data will be the user itself so we're going to call set user past the data and we need to set loading to be false as well and inside catch we need to set loading to be false as well okay so we have that part ready and we can even have a look so if we just inspect this go in the network and click edit we should see requests made right here okay we do see this request made it's it's made twice but we know why why it's made twice because we are running react in strict mode and on component amount it calls the Callback twice so but we get the user information right here okay so I think we can now start working on the form display um view inputs right here so I'm going to change this into a fragment and inside there I will need H1 tag uh new user but if we are updating the user we need also update user and that should be username so I want to update this user so then I check if the user ID exists okay if that is not null then we show update user if the user ID does not exist and then we show new user okay and down below we have a div now let's give this one uh card class animated and fading down inside there I want to show a loading indicator so loading if that exists then let's create now leave give this one text Center and the text will be loading with three dots and down below I want to create the form as well uh form and maybe validation errors as well just like we have in the sign up form so if we go in the sign up form oops sign up we have the following errors so we can get the errors in the user form and paste it but we don't have errors so we should probably get this line as well and put this right here okay so with the clear errors and inside catch when we update when we update inside cage we need to set the servers but at the moment we haven't implemented the update yet so we're going to leave this as it is right now we have this errors portion ready and now let's create form the form needs to be displayed if the loading is false like this okay and we listen to on submit of the form and we can call on submit function as well and we need input which will have I think only thing what we need is the placeholder okay so we have a name and let's duplicate these few times we have email we have password and password confer [Music] confirmation okay so we need to do two things first we have to declare on submit and let's do this right here const on submit is a function we get an event and call even premium default second is to implement two-way data binding for these input Fields so basically I'm going to give them a value to be user dot whatever is the input so for the first one it's going to be name for the second one it's going to be email for this one uh well for a password and password confirmation we don't need to give some value back but instead we need to listen to change for all of them so on change on change we get an event okay and then I'm going to call set user okay set user accepts uh it's a function to set value inside the state and this one should accept an object so what I'm going to do is this take I'm going to pass an object but take an existing object a user object to structure that and then give additional value for each of the fields like for the first one it's going to be name event Target dot value so we have an event which is the event of this change Target corresponds to an input field and the value corresponds to its value so for the first line is correct for the second one we need to change update in email for the third one we need password and right here we need password confirmation and just like this we have two-way data binding implemented on the input fields and down below we need to display a button let's give this one text save and class name BTN okay so I save this and let's have a look so here's our form so name email password and password confirmation and Save and however we see right here new user we should see update user let's go back and click another one so we see new user why do we see if the user ID exists we should see update user if it doesn't exist we should see new user to reset the user properly so let's put a debugger right here to understand what is the user what we are setting let's just reload the page okay we get the data and yeah that this is the reason so we get the data and there is additional data inside inside the received actual data so there are too many data uh we're dealing to in data so if we go in the user resource PHP file so this is the resource which is returned and this one has a wrap property public static route property which by default is set to data and the user information is wrapped inside that that data so if we set this into false there will be no additional data right there and the data which we see will be this object if you don't believe I just reload the page and mouse over on this and we see this is the actual data okay and if I click continue now we see the user information okay update user misser some someone and then we have the information populated right here as well okay and because we have two-way data binding if I change something this one is also updated okay I think we can Implement already submit of the user form so what are we going to do on submission so we have two cases when we are creating new user or when we are updating the user so let's Implement both one if user ID exists we are updating so on access client we're gonna call put method uh on users slash uh user user.id and we're passing the entire user object and we need to listen to the successful response and in a then we need to redirect user to the users page okay whenever the user is updated let's let's use navigate use navigate that needs to be imported right here so const navigate equals use navigate then right here I'm going to call navigate and pass slash users so we are redirecting user to the slash users and we need to show notification okay what about in catch so in catch we need to get the error and right now let's do the same thing what we did for sign up so inside catch we get the errors still like this and we have to set the errors we are actually setting those errors and then we have to display those errors and we are displaying loaders okay let's move this down below like this okay so we have the catch ready let's I think remove this debugger and we navigate yeah everything looks good everything looks good let's implement the else state else case so in this case we're gonna make uh we're gonna make post requests on the just slash user's endpoint but pass the user and when to show notification still in navigate users and in catch we do something similar what we did above now let's try to update this user and I'm going to just click save let's bring up the um let's bring up the network Tab and I'm going to click save right here and what happens okay it works successfully and this is what we expected so even if we go and edit this one and add additional 2 right there and click save then it was saved and we see the updated data right here so we have just implemented the update let's click add new let's enter James James add example.com if we don't provide password let's click save let's have a look password field is required so we provide the password okay that is by the way doesn't have input type password so let's open user form and right here we have to provide type to be password for email we can give it also type to be email just like this and when I type no password it is hidden and just click the save and the user was created and the latest user appears right here okay so we have implemented fully functionally crud application now let's display the notifications okay whenever we delete or create or update we want the notification to be displayed why I'm doing this because that is another great example of the context API and state coming from the context API so let's go in the context provider and Define right here and notification maybe or message as you want okay so I'm going to call this a notification then down below I'm going to define the state const notification and set notification so we have use State and default will be in empty string then we have to expose notification and set notification from here and if we go in the a user form for example when we update or create new user and let's now use our state so use State context and we will need we will need set notification this is the only thing we need if we go in the context provider we have to provide set notification for auto completion purposes like this and then I'm using the set notification and this is loading data and right here I am going to call set notification past the string user was successfully updated let's copy this remove the to-do and paste this right here user was successfully created okay now if we go in the context provider and actually implement the set notification well let me actually call this underscore set notification and create set notification notification which will accept a message right here it will call underscore set notification and let's now use set timeout and after five seconds I want to set notification to be an empty string okay so this one will set the message and after five seconds this one will reset the message now if we go in the default layout right here I think we can use the notification and display it so just like we are using a user and token let's use the notification and inside the layout maybe right here I am going to use a div element I'm going to create a div element which will have class a notification inside there we will output notification and that should only be visible if the notification is set like this so if I now save this and have a look I click edit I click save and the notification is displayed okay user was successfully updated and it should disappear yep it disappears let's create new one Mary Mary at example.com some username and password not the username but just the password password confirmation doesn't match okay let's click on Save and the notification is displayed and the only thing remaining is to open users and from here when we delete the user right here let's put the set notification user will successfully deleted and the set notification needs to be used so use State context const set notification equals this okay now let's click on delete on James and we see the notification and the user is user disappears okay so we have fully functional crowd application using react hooks using context API we have the roads guest layout authorize users layout connected to the fully functional laravel rest API and if you find this video useful please please hit the like button because likes is what matters the most that helps the channel to grow and if you want to see similar videos on on this topic like laravel react building full stack applications subscribe to this channel because I'm trying to make my focus more on building projects all right we have finished building our awesome fullsec application with the laravel and react and I think it's time to deploy it on a custom domain we're going to create one domain for the front end which will be for react and second domain which will be for the rest API of laravel if you haven't taken the hosting you should you should take the hosting if you want to follow this tutorial till the very end so you have to sign up for hostinger get the premium shared hosting make sure you use the link which I mentioned in the video description and during the purchase of your hosting USD coupon code the code holic once you create an account for hostinger and then login you're gonna see the following control panel this is hostinger age panel so from here you can manage everything regarding the hostinger let me zoom out slightly so we have the website and hosting in emails domains VPS SSL and billing section I'm going to zoom in right now and I have those menu items on the right side okay so I have one pending premium shared hosting which I'm going to set up right now but I use the hostinger as I mentioned for all kind of personal stuff for all websites domains and emails I have everything right here so let's click setup and choose a domain and set up premium shared hosting okay I'm going to start now I'm going to skip right here I'm going to skip right here as well and let's claim our free domain let's click right here and let's search for domain for example laravel dashreact.com let's see if this domain.com is available oops let's remove it click search okay I think this is perfect domain so we have the domain available I'm going to click continue right here and here we can choose the server location you should probably choose a location which is close to you or close to the potential visitors of your website for which you're building your website I'm going to choose something in Europe and click change right here this is my domain my location and click finish setup so this will create a shared hosting setup but before that we have to provide some information about us if you are new to hostinger you should probably click add new profile and provide details about yourself this is necessary for the domain okay domain contact details can be changed at any time in the domain settings and let's just Clinic click right here finish registration once you click finish registration it's going to take a few seconds to finalize everything and your account will be created you're gonna probably you will probably receive a confirmation email about that as well and your also email account will be also created and you can set it up now if we type laravel dish react.com we will see our application running our website so this this is the default landing page for all new domains hosted on hostinger so this is the default page but we don't have SSL certificate okay so we need to install SSL certificate I'm going to click manage site which will open the control panel for my domain laravel react.com not only domain for my shared hosting and let's search for SSL right here under Advanced section and let's click on this so here we see that the status is failed on the right side we have this three dots I'm going to click on these and reinstall and click reinstall it's going to take few seconds until the SSL is actually installed let's click close And after about 10 15 seconds just reload the page and you're gonna see the status will be active if the status is still failed if you get a message for example that it could not install just try to reinstall it few times because when the domain is just created the domain DNS servers needs to be updated properly okay it might need you might need to wait about like a five minutes when you create your domain and then you should probably need to install SSL certificate okay but I just wait for five minutes five ten minutes maybe and then try to reinstall SSL and it will probably work okay now let's open new tab and type laravelreact.com and we see our domain under SSL certificate so we have domain we have SSL certificate we have also hosting now I think we can already start installing our front end as well as the API now let's have a look at quick overview of the age panel hostinger age panel because we will need a couple of things okay so from email section we can create business email address anything at laravelreact.com email we can take that from domains we can control the subdomains at another website control redirect this website section is mostly for WordPress related stuff from the file section we can have a look in the file manager and create pickups or FTP accounts uh down below we have a security section and then we have the databases so we can access the phpmyadmin and we can create MySQL databases which we are going to also do and from the advanced section which is the most interesting and exciting thing for me we have possibility to configure the PHP configure is extensions I'm going to click right here configure the version of the PHP and I'm going to by the way switch this to the latest one click confirm we can now configure which PHP extensions we want in our shared hosting to be activated and enabled we can even change the PHP options let's click on this and here we have pretty interesting and a lot of options basically okay and I really encourage you to explore all these parts we have possibility to configure the crown jobs we have SSH access which we will use in a minute we have the kit and SSL section as well and down below in other we have a few other important things so we're going to start with the SSH so we can explore our file system from the file manager as well and let's click right here and we have two options to access for our domain or for the premium web hosting entire hosting we can click for our domain which will give us the public HTML inside which we have this default PHP and that is the file which is displayed when we type laravel dashreact.com okay I don't want to use the file manager of the interface I don't want to use the FTP account I want to connect using SSH and column the project using git and deploy it like this but for the front-end for the react part maybe we can use for easily deployment maybe we can use that file manager okay now let's click on this file manager and actually open this and let's go inside and I'm going to delete this default PHP I don't need that and now if I type laravel react.com I'm going to see forbidden right here now when to deploy react application so let's open our project and let's go under react folder and we have to make a few modifications right here not the modifications but small additions so we have the en file which is ignore file and that has a URL for the local API we have to create another in a file which is going to be for production again if you want to know more about this read the documentation of the write about environment variables for our inside our DOT Eno production we're going to specify the actual domain which will be for the API so we have the main domain which is laravel react.com so let me actually type this but our API will be something like API dot lateralreact.com okay and this is the um this is what I'm going to use right here okay for production let's remove the Slash and now we have the EnV production and now I'm gonna bring up the terminal and from the react folder I'm going to run npm run build and it's going to build in for production and it's going to use the dot en production file and the base URL inside inside axios client right here will be for production domain okay let's hit the enter right here it's going to take a few seconds to build this and finally we will have HTML CSS and JavaScript okay that's all what we what we have and what we need so and that is available in the this folder so I'm going to open this in an Explorer right here go inside the disk and we have index.html and this is in JavaScript as I mentioned but we can also put divide SVG not sure if we need that now let's go in the browser open the file manager and I'm gonna drag and drop these files and folders right here okay and they have been successfully uploaded I think so okay now let's just let's close the API and let's just reload the main domain and we see our react application okay and if I inspect this right now and fill up some information and click login and have a look in the network the request is made on https API levelreact.com API log okay this is the URL on which the request was made however that URL does not exist yet okay but we have the react application deployed up and running however if we just reload this page we see not found okay that's because we have to configure uh and we have we have to create HD access file and configure the Apache to redirect every request to index HTML file to make this working let's go in the file manager right here and I'm going to create new file or let's actually create let's click new file and call this HT access and click create and then I'm going to paste the following content so I'm telling the Apache to enable the rewrite engine and anything using this rewrite condition anything this is not what is not a file name and that is not a directory it needs to be redirected to the index.html okay and basically everything whatever we type in the URL right here if it is not a file name so if we just type right here an existing CSS file for example the CSS file we just uploaded I'm going to mention this [Music] or if I just reload this just to make this really clear the enter it redirects to the login and if I inspect this and go in the network so it makes requests to CSS files as well right so here it is so and if I just open this in a new tab that is accessible and that displays the content okay and I I don't want these to be blocked I want this to be loaded so I'm telling you Apache anything that is not a file and that is not directory needs to be redirected into index.html so if I type something right here in an existing it's gonna be redirected to the index HTML okay I hope this makes sense so and we need to save this obviously and we have our HD access ready now if I go and just delete this we see the login page and if I reload we still see the login page because that was redirected and code by index.html and just like this we have a perfect setup for react application on custom domain now let's take care of the API which is a little bit more challenging let's close everything we don't need the file manager for for laravel we need to connect using SSH so I'm going to type SSH right here and this is the SSH section first of all we have to enable SSH access so let's click right here enable and we have it as a choice of SSH client I generally use on Linux I um I use the built-in SSH client on Windows I use git bash if you are on Windows and you have git pass you can stick with it but Powershell actually supports Powershell supports SSH I think so right here we have command which we need to execute in our SSH client this one ssh-p the port username and the IP address so I'm going to copy this and paste in our Powershell and hit the enter okay we have to agree this we have to take this certificate if you're on Linux again you can just type the same command if you are on Windows you can just open the Powershell and paste the comment and I'm going to hit yes right here and we have to provide the password but we have not specified the password yet so let's Click Change right here and let's actually generate some random password or just set our own password or whatever we need I'm going to type my own password right here and let's hit change it's going to take a few seconds we have that changed and let's try to provide this password and we are logged in so let's clear up let's clear up everything and let's type ls-l-a we are inside our hostinger server and we have this public HTML right here which is a symbolic link into domains a lateral react.com public HTML okay so we have to clone our project somewhere so we have to understand really well what we are going to do first of all we need an actually working sub domain under SSL if I just type right now API laravel react.com that does not do anything okay we we don't have the subdomain for this now let's go in our age panel and search for sub domains click right here and I want to create API subdomain okay and I want this to be by default in its own default folder if I tick the checkbox I can configure in which folder I want to create that subdomain and by default anything will be under public HTML we're going to adjust this okay we're going to adjust this and let's actually let's actually remove these and hit create so the subdomain was created now let's just reload the page it might take some time we have a DNS probe finished and yeah it might take few seconds or maybe up to one minute but we have to generate SSL certificate as well just make sure that whenever this is working I mean I'm going to pause the recording and whenever this is ready we need to install the SSO certificate okay after retrying a one or two minutes later we have the domain ready API laravel react.com under SSL certificate okay this is perfect now let's explore the file manager and what what change was made inside the file manager and I'm going to do this using terminal I'm not going to open in the browser so we are in our shared hosting at the moment and we see public HTML let's have a look again we have the public HTML now let's go under domains and in domains we only have one domain laravel react.com let's navigate into the the domain and have a look what we have here we have public HTML let's navigate inside public HTML and inside there we have this is important we have the assets HD access index.html and white and these three is just for react application but we have API folder as well in this API folder is for our laravel application if we go inside API and have a look we have default PHP and that default PHP is what is rendered right here okay now we need to uh we need to make it um it's a little bit tricky so we need to make you work around let's let's call it like this not to work around but we we just have to create a symbolic link okay I think it's better if I just show you what I'm gonna do let's go under uh One Directory back under domains okay I'm in domains and I have a lot of react.com I'm gonna put my project right here it's not a good practice to put your lateral project under API folder because anything that is in this folder is accessible through the domain okay so if I just open laravelreact.com and then specify API here okay look at this so this shows the sub domains landing page and if we take our whole application entire application and put this in API that's a terrible idea okay we should not do this we should only have inside API folder what is web accessible and what is web accessible having a look in our lateral application only thing that is web accessible is under public folder so the only thing that can be inside the API folder is to be one of the files or all the files from the public folder none of the files in none of the folders except the public should be inside API otherwise we have a big security problems in our application okay now let's use git and clone our application in a correct folder I'm going to open my GitHub in which I have my project you should probably using git if you are not using it I urge you to use that because you're going to need that as well so this is my project Lara will react starter I'm going to clone this using https and let's open Powershell and again I'm in the domains folder and I'm going to run git clone paste my URL and I'm going to call the domain to be API dot laravel example.com okay this is the domain I want my project to be cloned in let's hit the enter it's going to take few seconds okay it is actually already cloned and now let's navigate inside API larivalexample.com here I have all my laravel project files I have the app art design and everything everything okay and I need to do a few things first of all I have to create I have to run composer install this is the very first thing but actually if I type composer destination version I see that I have version one and look at this so right here I have version one can I increase the font size of this I think it's too small aunt okay let's set this into 20. okay I think that's much better okay so we have the composer version one but latest laravel needs composer version two so we have to install composer version 2 for this let's open browser and just type download composer let's hit the enter click on the very first link grab the following code and paste in our application okay and hit the enter so it downloaded and created locally composer far file we cannot globally modify composer command because this is installed by root users but what we can have is a local composer version too okay so the composer far right here is a local composer version too and if I just execute PHP composer far dish version that's going to give me version two right here okay and this is what I need and by the way when you change PHP version from hpanel remember we changed PHP version from here from Advanced configuration okay that should change the PHP version right here so we should have the latest version 8.1 okay now again let's check we are in the APA laravel example.com folder and let's just run composer install but again if you just run composer install it's going to use composer version 2. we have to use PHP composer far which is a local composer PHP composer far install let's hit the enter and now it's downloading all the dependencies of our project and installing that okay composer install finished successfully and we have to do a few things first let's create dot en file so if you have a look in the file manager we have the EnV example file but we don't have dot en file so let's just run copy en example into dot en hit the enter and now let's edit our en file veeam.en file so let's change the application name let's hit the I to go in the insert mode inside veeam and let's change the app name to be laravel um let's put this in the double quotations laravel react oops react and the environment so let's change this into prod the API key this is something we have to set let's disable debug set this into false and the up URL will be https API Dot laravelreact.com okay so this is our domain then everything else can be left at the moment we're going to configure the database and create that but let's leave this as this right now and to save and exceed from veeam we're going to hit the escape button then column W and Q let's hit the enter so we have just saved our DOT enf file and let's generate the key let's just run PHP Artisan key column generate dash dash a n s I hit the enter application key set successfully all right so we have installed application we have configured we have created.tn file but everything that happened in a different folder okay and the different folder is under APA laraveleexample.com and the subdomain basically let's close everything and check the subdomain the subdomain searches under API folder in our primary domain okay so let's go One Directory back and navigate into laravel react.com and here we have this public HTML and this is the API folder okay so now I'm going to create a symbolic link from our API laravel example.com slash public index.html or just maybe a public into this API okay if I have this index HTML right here in no sorry not the index.html but the index PHP so let me explain this very clearly if I manage to have a link of this index PHP which is the entry script the main script of lateral application into the API folder right here then our laravel API would be deployed perfectly okay so we have to create a symbolic link let's navigate into API and at the moment we don't have anything um yeah we have the default so let's delete this default PHP RM default PHP okay now we don't have anything there and I'm going to create now symbolic link Ln I think first we have to specify Ln dash dash help I always get confused I have to specify two arguments one is Source second is Target I always get confused which one is the first and which one is the second okay where is that Target and Link okay so we have to first specify the target second should be the link okay the target is my current folder okay I want to create link right here so Ln dash s and then the target will be index.php okay and then the link will be I guess let's go let's start from the home directory okay we have domains we have API laraveleexample.com we have public index PHP and let's hit the enter okay again I got confused so we had to do it vice versa so first let's actually do like okay ln-s from the home directory we need laravel sorry we need domains API laravel example.com public index PHP into index.php locally so I'm telling Now to create a link of this file here right here okay so the index PHP needs to be a link let's hit the enter and let's type lsds LA and we see that index PHP right now is a link to the following file okay and now if I access API laravel example.com we should see something and that something is working larval application with the latest version as well as the PHP latest version okay so we have the API ready now let's create mySQL database and configure that and run migrations MySQL let's click MySQL databases let's call it call this laravel underscore react copy these the username will be the same for password we can generate some password and let's just hit create now let's go in our application and you know the larval application is under domains API levelexample.com English open Dot enfile hit the I to go in the insert mode and change the database let's delete that change the username and password I have just copied the password so I'm going to put password right here for the database and username we have that written here so this is the database I'm gonna paste it here and I think the username is the same so I'm going to paste this here as well okay now hit Escape colon W and Q and let's run migrations PHP Artisan migrate let's hit the enter okay so the database migrations have been run successfully let's run actually database C there as well PHP Artisan DB colon seed hit enter seeding database now we know that we have created about 50 users in our database now let's check this in PHP my admin so if we go or click right here enter phpmyadmin that's going to take a few seconds to open past the authentication phase okay so this is our PHP my admin and click users and we have 50 users okay so the connection to our database Works successfully and now I think we can sign up and we can log in and let's actually try this let's inspect if we have any error we're going to know this immediately I'm going to type my name my email and hit sign up okay so we have error let's go in the network xhr and what error do we have Okay so we have the course error it looks like we have the course problem that doesn't seem to be working and if we just open our API and have a look so the problem is that the symbolic link to the index PHP I think is not enough okay that does not do what it should actually do so if I just try to access API we see this not found but we should not see that okay now let's do like this we are right now in the APL arrival example.com so let's go let's go One Directory back into laravel react.com and go inside public HTML and have a look and I'm going to actually delete the API folder and I'm going to create symbolic link where is the symbolic link command here it is so I'm going to create symbolic link of public folder into an API folder so previously I created a symbolic link of the index PHP but let's create a symbolic link to the folder okay I'm going to hit the enter now I have API to be a link to the public folder and let's have a look let's access the domain first and that works successfully and now access to the API and we see laravel not found okay we don't see hosting or not found we see larval not found which is actually awesome and if we try to access sign up and we see the laravel error which is exactly what we expect now if I just delete these and go in the network clear up this and hit the sign up we see validation error the password confirmation does not match so that's I think a minor problem if I provide my password correctly and hit sign up voila we are registered and logged in so we have we have the crowd for the users we have navigation into Pages or we can add new user if we want we can edit an existing user or maybe delete let's try all of them so I just deleted user let's say new user just make sure you test everything carefully before you decide that it is actually working let's click save the user was created here we see Mary let's update this hit save and it works fine and let's click log out and we are logged out from our application and just like this we have deployed the front end with the react and Li and the larval API and I should tell you that our application is not uh is not paid deployed it is deployed quite correctly and securely as well so the only accessible thing we have is right here inside this folder and anything that is inside this folder uh is web accessible and we don't have uh we don't have files and folders that should not be here okay this is very very important thing because sometimes beginner developers make this mistake on shared hosting put their entire laravel application in the domain folder and then everything what you see on the left side would be accessible from the browser like the git folder and app and vendor and your dot en file which will have the information about your database and everything and you should not have this you should consider you should consider the scenarios in the environment where you are deploying and as soon as you understand how the deployment actually works and how the server works then it's really easy to make a correct mapping of the folders and you have your application up up and running alright guys that's it for this video and thanks for watching if you liked the video hit the like button recently I made the decision to make my focus more on building projects building and deploying if this is something that interests you make sure you hit the Subscribe button and enable notifications if there is anything you want to discuss please let me know about this in the comment section down below and if you know a better decisions to make certain things definitely let me know about this in the comment section down below because I want to learn something new as well from you all right thanks for watching and I will see you in the next time

Channel: The Codeholic

Views: 281,513

Keywords: TheCodeholic, laravel full project, laravel full stack, react, laravel react, laravel react authentication, laravel react full project, laravel react full stack, Laravel Full Stack App, react tutorial, react laravel 9, react project, react full stack app, react laravel full stack app, Laravel 9 full stack app, laravel, vuejs laravel, full stack react, laravel react project, laravel react js full project, laravel react tutoral, laravel react js, laravel react build and deploy

Id: qJq9ZMB2Was

Length: 193min 18sec (11598 seconds)

Published: Fri Dec 09 2022