Deploying Your Project to Vercel

What is Deployment?

Deployment is the process of making your application accessible to users on the internet. A project that only runs on your laptop is not useful to anyone else.

Vercel is a cloud platform designed specifically for frontend projects. It provides instant deployments, automatic HTTPS (Hypertext Transfer Protocol Secure), global CDN (Content Delivery Network) distribution, and free hosting for personal projects.

Git and GitHub Basics

Vercel deploys from a Git repository. If you have not used Git before, here is the essential workflow:

# Initialise a new Git repository in your project folder
git init

# Stage all files for your first commit
git add .

# Create your first commit
git commit -m "Initial commit: portfolio project"

# Connect to a GitHub repository (create the repo on github.com first)
git remote add origin https://github.com/yourusername/my-portfolio.git

# Push your code to GitHub
git push -u origin main

After the First Push

Every subsequent change follows this pattern:

git add .
git commit -m "Add projects section"
git push

Connecting GitHub to Vercel

1. Go to vercel.com and sign in with your GitHub account
2. Click "Add New Project"
3. Import your GitHub repository
4. Vercel automatically detects that it is a Vite React project and sets the correct build settings:
   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist
5. Click "Deploy"

Your project will be live at https://my-portfolio.vercel.app within 30-60 seconds.

Automatic Deployments

After the initial connection, every git push to your main branch automatically triggers a new deployment on Vercel. The workflow becomes:

# 1. Make changes to your code
# 2. Commit your changes
git add .
git commit -m "Update hero section copy"

# 3. Push to GitHub
git push

# 4. Vercel automatically deploys — no further action needed

Preview Deployments

Every pull request (PR) on GitHub gets its own preview deployment URL — a full copy of your site with just those changes. This is invaluable for reviewing changes before merging to production.

main branch:    https://my-portfolio.vercel.app
PR branch:      https://my-portfolio-git-feature-branch.vercel.app

Environment Variables in Vercel

Add your API keys and secrets in the Vercel dashboard (never commit them to Git):

1. Go to your project on vercel.com
2. Settings tab, then "Environment Variables"
3. Add your key (e.g., VITE_WEATHER_API_KEY) and value
4. Select which environments it applies to: Production, Preview, Development

# Vercel also has a CLI to pull environment variables to your local machine
npx vercel env pull .env.local

Custom Domains

By default, Vercel gives you a .vercel.app subdomain. To use a custom domain:

1. In your project settings, go to "Domains"
2. Enter your domain (e.g., amara.dev)
3. Vercel provides DNS records to add to your domain registrar
4. HTTPS is automatic — Vercel provisions and renews SSL (Secure Sockets Layer) certificates for free

vercel.json Configuration

For most Vite React projects, no configuration is needed. But for advanced use cases, vercel.json gives you control:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

The rewrite rule is important for client-side routed SPAs (Single-Page Applications): without it, navigating directly to /about returns a 404 because Vercel looks for an about.html file that does not exist. The rewrite serves index.html for all paths, letting React Router handle the routing.

Key Takeaways

• Deployment makes your project accessible to the world; Vercel provides free, instant deployments for frontend projects
• Use Git to track changes and GitHub to host your repository; Vercel connects to GitHub for automatic deployments
• Every push to the main branch triggers a new production deployment on Vercel
• Pull requests get preview deployments — unique URLs for reviewing changes before they go live
• Add API keys via the Vercel dashboard environment variables, never via Git commits
• SPAs (Single-Page Applications) using React Router need a vercel.json rewrite rule to handle direct URL navigation

Practice Exercise

1. Create a GitHub repository for your portfolio project (make it public)
2. Push your project code using the Git commands from this lesson
3. Import the repository into Vercel and deploy it
4. Add a vercel.json file with the SPA rewrite rule if you are using React Router
5. Add your Vercel deployment URL to your GitHub repository description