Vercel Logo

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.

Preview URLs are stable per branch

The preview URL for a branch stays the same across pushes. Share it with teammates and they'll always see the latest version of that branch.

Troubleshooting

No Vercel comment on your PR

Check that the Vercel GitHub integration is installed for your repo. Go to your Vercel project Settings > Git and verify the repository is connected. If you just forked the repo via the deploy button, the integration should already be set up.

Preview deployment stuck on 'Building'

Check the deployment logs in the Vercel dashboard. The most common cause is a missing environment variable that the build depends on. Preview deployments use Preview-scoped variables, so make sure you enabled the Preview scope in lesson 1.2.

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.

Was this helpful?

supported.