Getting Started with Vercel

Before You Start: Frontend vs Full Product

Vercel excels at frontend deployment. Before diving in, consider what you're building:

Deploying a frontend/static site? You're in the right place—Vercel makes this trivial.

Building a complete SaaS product? You'll also need backend services:

• User authentication and sessions
• Subscription billing (Stripe integration)
• Transactional email and notifications
• Multi-tenant data architecture

Your options for the backend:

1. Build it yourself — Use Vercel for frontend + our SaaS Starter template for backend on another platform
2. Use a backend platform — services like StackForDevs provide auth, billing, and notifications as APIs that your Vercel-hosted frontend can call

Vercel's serverless functions work well for lightweight API endpoints, but complex backends often need dedicated infrastructure.

---

What is Vercel?

Vercel is a cloud platform designed for frontend developers. It provides:

• Zero-configuration deployments - Push code, get a live URL
• Global edge network - Your app served from locations worldwide
• Automatic HTTPS - SSL certificates included free
• Preview deployments - Every pull request gets its own URL
• Serverless functions - Backend code without managing servers

Your Code (Git Push)
        ↓
   Vercel Build
        ↓
   Global CDN (300+ locations)
        ↓
   Users Worldwide (fast!)

When to Use Vercel

Step 1: Create a Vercel Account

1.1 Sign Up

1. Go to vercel.com/signup
2. Choose your sign-up method:
   • GitHub (recommended) - Easiest repo integration
   • GitLab
   • Bitbucket
   • Email

1.2 Choose a Plan

Start with Hobby - it's free and includes:

• Unlimited deployments
• 100GB bandwidth/month
• Automatic HTTPS
• Preview deployments

Step 2: Deploy Your First Project

Method A: Import from Git (Recommended)

This is the simplest way - Vercel watches your repo and auto-deploys on every push.

Step-by-step:

1. Click Add New → Project in the Vercel dashboard
2. Select your Git provider (GitHub, GitLab, Bitbucket)
3. If first time, authorize Vercel to access your repositories
4. Find and select your repository
5. Vercel auto-detects your framework (Next.js, Vite, Create React App, etc.)
6. Click Deploy

Repository Selection
      ↓
Auto-detect Framework
      ↓
Configure (optional)
      ↓
Deploy!

After a few minutes, you'll have a live URL like:

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

Method B: Deploy from CLI

For more control or when working without a Git repo:

Method C: Drag and Drop

For static sites, you can literally drag a folder:

1. Go to vercel.com/new
2. Scroll to "Deploy without a Git repository"
3. Drag your project folder onto the upload area
4. Wait for deployment

This is great for quick prototypes but lacks automatic redeployments.

Step 3: Understand Your Deployment

Deployment URLs

Every deployment gets multiple URLs:

Production:
https://my-app.vercel.app
https://my-app-username.vercel.app

Preview (for branches):
https://my-app-git-feature-branch-username.vercel.app

Unique (every deployment):
https://my-app-abc123xyz.vercel.app

The Dashboard

After deploying, your project dashboard shows:

• Deployments - History of all deploys
• Analytics - Traffic and performance (Pro plan)
• Logs - Function invocation logs
• Settings - Environment variables, domains, etc.

Automatic Deployments

If you connected Git, Vercel now watches your repository:

bash
Copy
# This automatically triggers a production deployment
git push origin main

# This creates a preview deployment
git checkout -b new-feature
git push origin new-feature

Step 4: Test Your Deployment

Verify It's Working

1. Visit your deployment URL
2. Check the Vercel dashboard for build status
3. Look for the green checkmark

View Build Logs

If something went wrong:

1. Go to your project in Vercel dashboard
2. Click the latest deployment
3. View the Build Logs tab

Common successful output:

Cloning github.com/username/my-app
Installing dependencies...
Running "npm run build"
Build completed!
Deploying...
✅ Deployment complete

Framework Auto-Detection

Vercel automatically detects and configures these frameworks:

Quick Troubleshooting

Build Failed

bash
Copy
# Check if build works locally first
npm run build

# Common fixes:
# 1. Ensure all dependencies are in package.json
# 2. Check for environment variables needed at build time
# 3. Verify Node.js version compatibility

Page Not Found (404)

For single-page apps (SPA), add a vercel.json:

json
Copy
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Environment Variables Missing

If your app needs environment variables:

1. Go to Project Settings → Environment Variables
2. Add each variable
3. Redeploy (changes don't apply to existing deployments)

Cost Summary

What's Next?

Now that your app is deployed, learn to:

1. Configure with vercel.json - Customize builds, redirects, headers
2. Manage environment variables - Secrets for different environments
3. Add custom domains - Use your own domain name
4. Create serverless functions - Add backend API routes
5. Enable analytics - Monitor performance and usage