Deploying React App on Render Hosting Platform | Step-by-Step Tutorial

foreign in this video we will see how to deploy react application into the render hosting platform so render is the cloud-based platform uh where you can deploy your content applications back-end servers and many kind of things so uh you can see we can instantly deploy your apps with the simple steps by selecting the service type and specifying the commands and the best thing is whenever you have you push changes to your repository a render will automatically detect the changes and it will redeploy automatically your changes to the site so what are all you can run on this platform so you can deploy our backend apis uh using this web service you can deploy react applications and front-end applications into the static sites and you can run many more for example you can run a cloud hosted postgres SQL database on this render platform so let's jump on to our uh deployment so here I have a react application so I have uh created a simple react react app using uh create react app command so it is currently running on my Local Host um as you can see I have started in my local host okay so now once you sign up and log into the dashboard you can see on the dashboard you will you will have the ability to create a new service so once you click on your uh on the new button like you can select the service so in our case we need to deploy our reacts application right so we need to select the static site and here you can see uh you you need to configure your GitHub so here I have already configured my GitHub background so that's why we can see my repositories here so let's jump on to GitHub account and let's create a new repository for our react application so I'm naming it as uh right so it can be public or private it's up to you so let's create the Repository okay so since we have already created a our react application using the react command so we need to configure the remote repository with our local prefer so let's uh let's check the git status okay so let's add the remote origin okay so now I'm pushing this uh board in our local machine so the remote repository on guitar okay so the code has been pushed so let's check our uh render dashboard so it should it should uh show our repository so so as you can see it has the detected the repo so I'm selecting this one so here we need to provide a unique name for our site so so here I am giving foreign [Music] node modules right into our repository so we need to install the packages first so npm install and then npm Runway so once our code has been built then since we are here using the build directory published directory is built so it will take that distributed build and it will try to uh render on this side so now uh in case if we have to add any environment variables so here on the advanced section uh we can go ahead and add environment variables if any so here I'm not adding anything right so now we can simply click on create static select so this may take a up to uh three to five minutes so once this is done uh we can go ahead and check this link Okay so the deployment has been completed so our site is live now so we can go ahead and take this link as you can see the name of the domain is the name of the service that we have given YouTube reactor right so this is how like you will name your domain you can also add a custom domain as well so let's go to this URL that as you can see uh so I'll react application is deployed onto hosting platforms yeah so that's all for this video so we will see you in the next video thank you

Channel: Web Wizard

Views: 11,619

Keywords:

Id: Pjcr7gNOkuU

Length: 7min 52sec (472 seconds)

Published: Tue May 09 2023