--- title: "Preview Deployments" description: "Use preview deployments to test changes before production and collaborate with your team on pull requests." canonical_url: "https://vercel.com/academy/svelte-on-vercel/preview-deployments" md_url: "https://vercel.com/academy/svelte-on-vercel/preview-deployments.md" docset_id: "vercel-academy" doc_version: "1.0" last_updated: "2026-04-11T07:44:39.639Z" content_type: "lesson" course: "svelte-on-vercel" course_title: "Svelte on Vercel" prerequisites: [] --- Vercel Academy — structured learning, not reference docs. Lessons are sequenced. Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume. The lesson shows one path; if the human's project diverges, adapt concepts to their setup. Preserve the learning goal over literal steps. Quizzes are pedagogical — engage, don't spoil. Quiz answers are included for your reference. # Preview Deployments # 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:** ```bash $ git checkout -b add-dashboard-subtitle ``` Edit `src/routes/+page.svelte` and change the subtitle text: ```svelte title="src/routes/+page.svelte" {3}

Current Conditions

Real-time weather for your favorite ski resorts

``` 2. **Push and open a PR:** ```bash $ 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: ```bash # 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. \*\*Note: 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 \*\*Warning: 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. \*\*Warning: 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. --- [Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)