Transcription
Hey guys, how's it going? Welcome back to another video. And in today's video, I'm going to be showing you guys how to deploy a React Vite application using Vercel as the hosting platform.
This is a continuation of my series of videos where I show you guys how to deploy different types of React apps into different platforms in a very quick and easy way. So, in order to start deploying your React Vite application, you need to have that application with you. I have here an application that I didn't build. I got this from a public repository, which if you want to, uh, check it out, I'll put it in the description. But this is what the application builds. It's just a simple dashboard, uh, UI, and, uh, all the code is inside of this project.
So, the first thing we want to do is we want to have an account on both Vercel and on GitHub. So, we want to have a GitHub account and a Vercel account. Uh, ideally, you will want to connect your GitHub account to Vercel. So, you should go to vercel.com, login. I'll put the link for all of this in the description. And you want to click on "Continue with GitHub." After you authenticate with GitHub, you'll be prompted with an overview containing all the projects that you have in this account. And if this is the first time you're creating an account with Vercel, you'll not see anything over here.
But what we want to do is we want to click on "Add new" and then click on "Project." Now, when we get to this point, you'll see that it will ask us to import a Git repository. And because I connected my GitHub account with Vercel, it is automatically fetching all the repositories, both private and public, that I have in my, uh, GitHub account. So, what we want is we want to actually push a new repository for our project. So, I'm going to come over here and I'm going to just call this "react-vite-deploy." And, uh, I can make it private, I can make it public. I'll make it public just so you guys can see it. And I'm going to click on "Create repository."
Then I'm going to grab all of this over here and I'm going to deploy this, uh, or push this code into that, uh, Git repository. So, I'm going to open this up. I'm going to run `git init` to initialize a Git repository inside of this project. Then I'm going to run `git add .` to add all the files into it. And I'm going to just paste all of these, uh, things that I copied from GitHub inside of here so that it can push everything to GitHub. Now that it's done pushing, let's go back over here, let's refresh this page, and we should see that, yes, it has been pushed. Again, uh, this I pushed this from this person. You guys should check them out. Uh, but when we're done with this, we should now see this new Git repository appearing as an option in Vercel.
So, I'm going to click here to import. And, uh, it's going to prompt up this, uh, page over here. We want to choose the framework preset to be Vite. So, we'll go down here, we'll find wherever, uh, it says Vite and we'll choose it. Then it's going to ask us to choose our root repository. We're not root directory. We're not going to do anything on that. Uh, then our build commands. In case you're using different build commands, one thing that is important though is environment variables. So, if you have any environment variables in your project right now, you want to put them over here because, uh, if you don't, then those environment variables will be available, uh, in your local development, but they won't be available in production. So, you want to put all of them over here. It is safe to do so, so I wouldn't worry about doing that.
And on top of all the ones you've had, you also want to add an extra environment variable called `VITE_BASE_PATH` and we want to pass the value as an empty slash. And on top of that, we want to go back to our code over here and we want to go to our `vite.config.js` or `ts`, whatever you're using. And inside of here, we want to add a new property called `base`. Now, this `base` will have, uh, a value of `process.env.VITE_BASE_PATH`, which is that thing that we passed in the, uh, Vercel deployment. But, uh, if that's not existent, then we want to pass a value that is equal to our GitHub repo name. So, you go to your GitHub repository and you copy this part of the URL over here and you just paste it inside of here.
And we want to push this again. So, I'll say `git add .`, `git commit -m "fix"`, and I'll say `git push`. And, uh, we should go back over here, go to Vercel, and we'll click "Deploy." Now, it should start deploying our application. We should wait a second to see, but everything throughout the process of deployment will be shown over here, together with all the logs and everything that might happen. One thing to point out though is if you have TypeScript in your application, uh, any TypeScript errors that might be occurring will prevent a successful deployment. So, make sure that you fix any type issues or TypeScript errors before you try deploying.
Perfect. As you can see, uh, it just finished deploying. It didn't take longer than 30 seconds. And we can click on "Continue to dashboard." What this will do is it will prompt us the dashboard for this project. Now, this will include things like all the deployments that you've had, analytics, uh, insights about the, the speed of, of your application, and stuff like that. Obviously, I'm using Vercel's free version here, but you could upgrade to Pro for a lot more features.
Now, to actually check out if your app is deployed, just click on the link that they provide for you. And you should see that if you click on "Visit," the app should be available. Now, you guys can go to this app over here. Again, I didn't build this. This is not a real app, but it is available publicly and it is deployed for anyone to, to use.
Now, there's other parts of deployment in case you want to deal with like setting up your own domain and stuff like that, but those are pretty easy to, uh, figure out inside of Vercel. You should see here that, uh, they have a pretty good UI for this. So, uh, and it's not the point of the video. The point of the video is just deployment. So, I really hope you guys enjoyed this video. If you enjoyed it, please leave a like down below and comment what you want to see next. Subscribe because I'm posting every week and I would massively appreciate if you could help support the channel. And I'll see you guys next time.
[Music]
[Music]