Vercel Deployment Guide (Single Project / Multi-Env)¶
This guide documents the configuration for deploying both main (Production) and stage (Staging) from a single Vercel project.
1. Project Structure¶
- One Project:
merp25 - Production Branch:
main - Preview Branch:
stage
2. Environment Variables (The Key Step)¶
To ensure Staging hits the Staging Backend and Production hits Production, use Vercel's Environment Variable Scoping.
Go to Settings -> Environment Variables. Add separate entries for the same variable name:
| Variable | Scoped To | Value |
|---|---|---|
VITE_API_URL |
☑️ Production | https://merp25-api.up.railway.app |
VITE_API_URL |
☑️ Preview | https://merp25-backend.onrender.com |
VITE_SUPABASE_URL |
☑️ Production | https://prod.supabase.co |
VITE_SUPABASE_URL |
☑️ Preview | https://stage.supabase.co |
Ensure you uncheck "Development" if not needed.
3. Domain Assignment¶
Environment Settings Method (Recommended)¶
- Go to Project -> Settings -> Environment.
- Select the Preview (Pre-Production) environment.
- Scroll down to see the Domains section and click Add Domain.
- Enter your subdomain (e.g.,
staging.merp25.com).
"Production First" Workaround¶
If the above method isn't available or fails:
1. Add the domain to Production first via Settings -> Domains.
2. Edit the domain entry.
3. Change Git Branch to stage.
4. Save.
4. Updates¶
- Push to
main: Updates Production. - Push to
stage: Updates Staging (Preview Deployment).
6. Troubleshooting: "Login to Vercel" Prompt¶
If your Staging URL asks for a password/login: 1. Go to Settings -> Deployment Protection. 2. Find Vercel Authentication. 3. Change it to Disabled (or "Standard Protection" with a known password). 4. Click Save. By default, Vercel protects Preview environments so the public cannot see them.