Deploying Your App to Vercel

Deploying Your App to Vercel

From Local Code to Live URL in Minutes

By AI Learning Assistant  ·  Git  ·  GitHub  ·  Vercel  ·  CI/CD

Right now, your React app only runs on your computer (http://localhost:3000). No one else can see it. Deployment is the process of moving your code from your local machine to a server — a powerful computer that is always online. Once deployed, anyone with the URL can visit your app, from anywhere in the world, 24/7.

Think of deployment like this: your computer is your private workshop where you build furniture. A deployed server is a public showroom where customers can see and use your furniture. Vercel is a platform that gives you a free showroom.

Git is a tool that tracks changes to your code over time. Think of it as a "time machine" for your files. Every time you git commit, you take a snapshot of your project. If you break something later, you can go back to a working snapshot.

GitHub is a website where you upload your Git repositories to the cloud. It's like Google Drive for code, but with powerful collaboration features. GitHub stores your code safely online, lets you share it with others, and — most importantly for us — connects directly to Vercel for automatic deployment.

git init                // Creates a new Git repository in your project folder
git add .               // Stages all files — tells Git which changes to track
git commit -m "message" // Takes a snapshot with a description
git push                // Uploads your commits to GitHub
git pull                // Downloads latest changes from GitHub
    

Prerequisites:

• A React app ready to deploy
• A free GitHub account (github.com)
• A free Vercel account (vercel.com)
• Git installed on your computer (git-scm.com)

Step 1 — Initialize Git and Commit Your Code

# Navigate to your project folder
cd webbo3-project

# Initialize Git (creates a hidden .git folder)
git init

# Stage all files (prepare them for the snapshot)
git add .

# Take the snapshot with a message describing what changed
git commit -m "Webbo3 JS Mastery - my first full project"
    

💡 The `-m` flag means "message". Always write meaningful commit messages so future you knows what changed!

Step 2 — Create a Repository on GitHub

• Go to github.com and sign in
• Click the green "New" button
• Name your repository (e.g., `webbo3-project`)
• Keep it Public (free for everyone to see)
• Do NOT initialize with a README (we already have code)
• Click "Create repository"

Step 3 — Connect Your Local Repository to GitHub

# Add the remote repository (replace YOUR_USERNAME with your GitHub username)
git remote add origin https://github.com/YOUR_USERNAME/webbo3-project.git

# Push your code to GitHub (upload it)
git push -u origin main
    

Step 4 — Deploy to Vercel (The Magic Step)

• Go to vercel.com and sign in with GitHub (so Vercel can see your repositories)
• Click "New Project" or "Add New" → "Project"
• Find your repository (`webbo3-project`) and click "Import"
• Vercel automatically detects it's a React app and fills in the build settings
• Click "Deploy"
• Wait 20‑60 seconds…
• 🎉 Your app is live at `your-project.vercel.app`!

CI/CD is a fancy term for "automatic updates". When you push code to GitHub, Vercel automatically:

1. Detects the new code (Continuous Integration)
2. Builds the project (`npm run build`)
3. Deploys the built files to their servers (Continuous Deployment)
4. Makes the new version live immediately

Without CI/CD, you'd have to manually upload files every time you make a change — slow and error-prone. With CI/CD, deployment happens automatically, often within a minute of pushing to GitHub.

1. You run: git add . && git commit -m "fixed button styling" && git push
2. GitHub receives the new commit
3. Vercel detects the change (via webhook)
4. Vercel downloads the latest code
5. Vercel runs: npm install (if dependencies changed)
6. Vercel runs: npm run build
7. Vercel uploads the build folder to their CDN
8. Your live site updates (usually within 60 seconds)
    

Your GitHub repository is your coding portfolio. A great README tells visitors what your project does, how to run it, and why it matters. Use AI to generate a professional README in seconds.

# AI Prompt for README (copy and paste to ChatGPT)

Create a professional GitHub README for my React project called "Webbo3 JS Mastery".
Include:
- Project title and description
- Live demo link (my Vercel URL)
- Technologies used (React, Tailwind CSS, etc.)
- Setup instructions (clone, npm install, npm start)
- Screenshot placeholder
- Features list
- Author section

Make it look modern with badges and emojis.
    

Quick Reference — Git Commands

• Challenge 1: Deploy your AI Chat Assistant from Day 25 to Vercel.
• Challenge 2: Set up a custom domain (buy one for $10/year) and connect it to Vercel.
• Challenge 3: Add a `.gitignore` file to exclude `node_modules` before your first commit.
• Challenge 4: Make a small change to your app, push to GitHub, and verify the live site updates automatically.
• Challenge 5: Use AI to generate a README for your project, add screenshots, and push to GitHub.

AI-Assisted JavaScript Learning · Deploying Your App to Vercel · Go Live!