How to Deploy a React App on Vercel in Under 5 Minutes

👋 Hey there!

If you’ve just built your first React app and are wondering, “Now how do I share this with the world?” — you’re in the right place.

In this post, I’ll walk you through how to deploy a React app to Vercel, step-by-step. It’s free, super fast, and beginner-friendly — even if it’s your very first project!

---

🧰 What You Need Before We Start

Just a few basic things:

• A React app (created using create-react-app or similar)
• A GitHub account (free)
• 5 minutes of your time!

---

🛠️ Step 1: Push Your React App to GitHub

Before deploying, we need to upload your project to GitHub.

Already done this? Skip to Step 2!

Here’s how to do it (if you’re using VS Code):

1. Open your project folder.
2. Initialize Git (open terminal):

git init

3. Add and commit your code:

git add .
git commit -m "Initial commit"

4. Go to github.com and create a new repository.
5. Copy the commands GitHub gives you (like git remote add origin ...) and paste them into your terminal.
6. Push the code:

git push -u origin main

---

🌍 Step 2: Sign in to Vercel

1. Go to vercel.com.
2. Click “Login” and sign in with GitHub.
3. Authorize Vercel to access your repositories.

---

🚀 Step 3: Import Your Project

1. Once logged in, click “Add New Project”.
2. Select your React project from the list.
3. Vercel will detect it’s a React app automatically. Just click “Deploy”.

That’s it! Vercel will now build and host your app. In a few seconds, your site will be live 🎉

---

🔗 Step 4: Get Your Live Link

After deployment finishes, Vercel gives you a live link like:

https://your-app-name.vercel.app

You can now share it with your friends, family, or potential clients!

---

🧠 Extra Tips

• Want to use a custom domain? Vercel lets you add it for free!
• Every time you push new code to GitHub, Vercel auto-updates your site — no extra work needed.
• You can also add things like analytics, password protection, and more — all from your Vercel dashboard.

---

✅ Final Words

Deploying used to be complicated, but tools like Vercel make it super beginner-friendly.

If you’ve followed these steps, give yourself a pat on the back — you just took your project live like a pro!

Need help or got stuck? Drop a comment or DM me — I’ve been there too, and I’m happy to help!