Preview Deployments

Pushing directly to production and hoping for the best is a bad habit. Let's fix that. Every branch you push to GitHub gets its own live URL on Vercel: a full deployment with your app running, your environment variables loaded, and a unique URL you can share with your team.

Outcome

Create a preview deployment by pushing a branch and verify it runs with its own URL and environment.

Fast Track

1. Create a feature branch and push it to GitHub
2. Open a pull request. Vercel deploys automatically and comments with the preview URL
3. Test the preview deployment and verify it has its own environment

How Preview Deployments Work

main branch ──push──→ Production deployment (ski-alerts.vercel.app)
                       │
feature branch ──push──→ Preview deployment (ski-alerts-git-feature-xyz.vercel.app)
                       │
another branch ──push──→ Preview deployment (ski-alerts-git-another-abc.vercel.app)

Every non-production branch gets its own deployment. Preview deployments:

• Use Preview-scoped environment variables (set in lesson 1.2)
• Get a unique URL based on the branch name
• Update on every push to that branch
• Show up as GitHub PR checks with a direct link

Hands-on exercise 1.3

Create a preview deployment for a small change to the ski-alerts app:

Requirements:

1. Create a new branch from main
2. Make a visible change (update the dashboard title or add a resort)
3. Push the branch and open a pull request on GitHub
4. Verify the preview deployment URL works

Implementation hints:

• A simple text change in src/routes/+page.svelte is enough to see the preview work
• Vercel's GitHub integration automatically adds a comment to PRs with the preview URL
• Preview deployments use Preview-scoped environment variables, so your API key works if you enabled that scope

Try It

1. Create a branch and make a change:

   $ git checkout -b add-dashboard-subtitle

   Edit src/routes/+page.svelte and change the subtitle text:

   src/routes/+page.svelte

   <div class="mb-6">
     <h1 class="text-2xl font-bold text-slate-900">Current Conditions</h1>
     <p class="text-slate-600">Real-time weather for your favorite ski resorts</p>
   </div>

2. Push and open a PR:

   $ git add src/routes/+page.svelte
   $ git commit -m "update dashboard subtitle"
   $ git push -u origin add-dashboard-subtitle

   Open a pull request on GitHub. Within a minute, Vercel adds a comment with:

   ✅ Preview deployment ready
   https://ski-alerts-git-add-dashboard-subtitle-yourteam.vercel.app
   

3. Visit the preview URL:

   • Verify your subtitle change is visible
   • The conditions dashboard should load with live weather data
   • This deployment is completely separate from your production deployment

4. Check the PR checks:

   • The Vercel check shows green with a "Visit Preview" link
   • Click it to open the preview directly from the PR

Wrap Up

Once you've verified the preview deployment works, merge the PR on GitHub. The merge triggers a production deployment with your change. You can then delete the feature branch, and Vercel cleans up the preview deployment automatically.

Done-When

• Feature branch is pushed to GitHub
• PR has a Vercel comment with a preview URL
• Preview URL loads and shows your change
• Production URL is unchanged (still shows original subtitle)

Solution

The full workflow:

# Create branch
git checkout -b add-dashboard-subtitle
 
# Make a change to +page.svelte (update the subtitle)
 
# Commit and push
git add src/routes/+page.svelte
git commit -m "update dashboard subtitle"
git push -u origin add-dashboard-subtitle
 
# Open PR on GitHub (or use gh CLI)
gh pr create --title "Update dashboard subtitle" --body "Testing preview deployments"

After merging, the change deploys to production automatically. You can delete the branch and Vercel cleans up the preview deployment.

Troubleshooting

Advanced: Protected Preview Deployments

By default, preview deployments are publicly accessible. If your app contains sensitive data or you want to restrict access:

1. Go to Settings → Deployment Protection
2. Enable Vercel Authentication for preview deployments
3. Only team members with Vercel accounts can access preview URLs

This prevents external users from stumbling onto in-progress features.