How to Deploy a Frontend React App on Vercel in Minutes

hey guys welcome back it's been a while but in this video I'll be showing you how you can deploy a front-end react app to versal if you don't know about versal reversal is a hosting platform and you may be familiar with other hosting platforms like netlify and Heroku and versal is just another one of uh those so it basically allows developers to deploy their applications with ease and provides a streamlined workflow for continuous deployment automatic SSL certificates and instant Robux and with virtual developers can focus on actually building their app without having to worry about infrastructure and it also allows for hosting with zero configuration and in my opinion is a great platform to use and today I'm going to be showing you how to use it to host your front-end react app and I'll go over every step from signing up to deploying your app so let's begin okay so first of all we're gonna need to sign up for versal so in order to do that you can just go to versal.com and then click sign up on the uh top right corner of the navigation menu so when you click sign up you can select either hobby or Pro and for the sake of this video I'm just going to click Hobby and for my name I'll just go with my full name and then I'll hit continue and there are various ways to sign up so you can either sign up through your GitHub account gitlab bitbucket or with your email so I'll just hit continue with email and once you guys are done signing up I'm going to show you how you can actually deploy it all right so now that you guys have signed up you will be redirected to a dashboard that looks like this and I'm going to mention two ways you can deploy your app so if you already have a git repository for your application then what you can do is Select create a new project and like I mentioned if you already have a repository for your app you can select any of these three platforms right here GitHub gitlab and bitbucket depending on which platform the repository exists on to publish your application and once you've done that it's pretty self-explanatory from there on out however in this video I will be specifically going over how to deploy your app using the virtual CLI because I'm aware that you get you guys may not have a repository to publish from so to deploy the C CLI I'm going to first show you the app that I'm going to be pulling and then we'll teach you how to install the CLI so if you look at this second tab that I have right here on my browser um this is the app that I'm going to be deploying and it's just a basic react app I made using npx Create react app and it just has information regarding the web page and has a promo for this YouTube channel um in this link right here okay and it only has a front end which is what this video is intended for and if I go to my code editor and if you're new here I use vs code and I'm going to be using the integrated terminal to run all the commands so I'm going to first stop my react server clear everything out first and I'm going to do sudo npm I Dash G conversion okay and I'm using sudo because I'm on a Mac and since we're going to be installing the virtual CLI we need to install globally on our machine which is what this um G option is for okay so if you're using Windows I'll have the command on the screen for you guys to install the CLI so I'll hit enter and give it a few seconds to finish installing so I'm going to first need to type in my password I forgot about that and now it's going to begin installing the CLI and if you just give it a few seconds it'll finish on its own okay so I've cleared my terminal and what I'll do now is log into the versal CLI to deploy our app and to do that I can simply type in reversal now that we've installed the CLI globally I can just enter it and once I do that what it's going to do is give me a few ways to log into my account now earlier in this video I showed you guys how to sign up and for the purpose of this video I used my email to sign up so you guys will need to select whatever platform you chose in order to log into the CLI so for me I'm just going to choose my email so I'll just select email right then once I hit enter it's going to ask me to enter in my email address and what it's going to do is basically give me some steps to um login so I'm going to go ahead and do that and then I'll come back so once I have logged in to the CLI it's going to ask if we want to deploy the code inside the directory um of our project so you just need to make sure that this path right here is correct and make sure that this is a path where your project is currently in and for me it is so I'll just type in y for yes okay and then it's going to ask about the scope and your scope is basically the account username and when I signed up using my email it automatically generated one matching my email so I'll just hit enter and then it's going to ask me if I want to link this project to an existing project that I may already have on Virtual and since we're just doing the development or the deployment of a singular front-end app for the first time I'm going to put no and I'm assuming this is what most of you most of you guys will have as well so I'll hit nope and it's going to ask for the project name and by default it'll be the name of the Parent Directory which is virtual friend app deployment and I'm completely fine with that so I'll do that but if you guys want to customize your name then you can do that as well by typing it in but I'll just hit enter and then it's going to ask the directory in which the code is located in and since we are in the directory of our application which is versal front-end app deployment um I can just hit enter which will automatically point to the folder that I'm in with this dot slash right here okay so I'll hit enter and then it's going to set up the project okay um and then it's basically going to as you can see right here it says uploading okay and here since I created my project using Create react app it's going to ask if we want to override the build settings of create react app and if you guys also created your project with npx create react app there's no need to override anything since this is how we are meant to um build and deploy the application so you can just type in N for no and then once you hit enter it will actually build and deploy our application um or deploy the build actually so you can basically give it a few seconds and your application will be ready and online so once you have finished deploying it will show you the URL of your application so right here if you look to the right of where it says production you can see the URL of your application and this right here is the name of our application and the of course the hosting platform that we're using is virtual so it's going to have.versal.app now if I click on this right here and open it you can see that this is the exact app that I deployed and it's online and live and just to make sure this is the same app that we created if you go and look back at the Local Host right here it's the same content and yeah so that's basically how to deploy your application reversal and that's about it for this video um I hope you guys found this informative and helpful and if you did and were able to successfully deploy your application to production uh make sure to leave a like And subscribe to the channel if you haven't already and congratulations for deploying if you have any questions or comments um I'll feel free feel free to comment them and if you want to chat with me privately you can email me and I'll do my best to reply to you and if you are a returning viewer and have watched my videos in the past I do apologize for not being able to upload I've just been really busy with school and internships so I haven't been able to produce much content but I will be continuing to um make more content so yeah I hope this was informative and as always have a nice day and take care thank you

Channel: Arpan Neupane

Views: 28,241

Keywords: deploy react app to vercel, web development, how to code, react, react tutorial, what is api, what are apis, programming tutorials, react frontend, how to learn react js, how ot learn next js, how to leanr javascript, how to deploy a react app to netlify, how to deploy a react app to vercel, react app deployment, easy react app deployment, javascript tutorial, deploy a web app, deploying react apps, deploying python apps, node js tutorials, node js deployment, reactjs app

Id: FvsvHzcwOmQ

Length: 9min 37sec (577 seconds)

Published: Thu Mar 23 2023