Vercel

What is Vercel integration?

Vercel integration connects your App2 workspace to your Vercel account, enabling production deployments with automatic builds on every code change.

What Vercel provides:

• Production hosting: Fast, global CDN

• Automatic deployments: Build on every GitHub push

• Custom domains: Use your own domain names

• Preview URLs: Test before going live

• Environment variables: Secure configuration management

• Analytics: Performance and visitor insights

How integration works:

1. Add Vercel team credentials to your workspace

2. Link App2 project to Vercel

3. Code changes trigger automatic deployments

4. Get production URL instantly

Note: Vercel integration requires Pro subscription and user-owned GitHub repository (not App2-managed).

Why connect Vercel?

Vercel transforms your App2 projects into production-ready applications.

With Vercel, you get:

Professional hosting:

• Fast global CDN

• 99.99% uptime

• Automatic HTTPS

• Optimized builds

• Edge network

Automatic deployments:

• Deploy on every code change

• No manual deployment steps

• Build logs and status

• Rollback to previous versions

Custom domains:

• Use your own domain (app.yourdomain.com)

• Professional branding

• SSL certificates included

• Multiple domains supported

Environment management:

• Secure environment variables

• Development vs production configs

• Team collaboration

• API key management

Prerequisites

Before connecting Vercel:

1. Pro subscription: Vercel integration requires Pro or Lifetime tier ($25/month minimum)

2. Vercel account: Free or paid account at vercel.com

3. User-owned GitHub repository: Must migrate from App2-managed to your GitHub org (Pro feature)

4. Vercel team: Personal or team account in Vercel

5. API token: Generated from Vercel dashboard

6. Workspace role: Owner or Admin permissions

Important: Vercel requires user-owned GitHub repositories. If your project uses App2-managed GitHub repo, migrate it to your GitHub account first.

Setup steps

Step 1: Get Vercel credentials

Find your Team ID and create an API token.

Finding Team ID:

1. Log into vercel.com/dashboard

2. Select your team

3. Go to Settings → General

4. Copy Team ID (or use personal account ID)

Creating API token:

1. Go to Account Settings → Tokens

2. Enter token name (e.g., "App2 Integration")

3. Select scopes (choose your team scope)

4. Set expiration (or no expiration)

5. Click "Create"

6. Copy token immediately (shown once)

Tip: Create scoped tokens for better security. Limit to specific teams if you have multiple.

Step 2: Add Vercel team to workspace

Add your Vercel team credentials to your App2 workspace.

1. Go to Workspace Settings → Integrations → Vercel

2. Click "Add Vercel Team"

3. Enter Team ID from Step 1

4. Enter API Token from Step 1

5. Click "Validate and Save"

App2 validates your credentials with Vercel.

Success indicators:

• Team name appears

• "Configured" status shown

• Green indicator

Step 3: Link project to Vercel

Deploy your App2 project to Vercel.

Requirements:

• Project must have user-owned GitHub repository

• If using App2-managed repo, migrate to your GitHub first

Linking process:

1. Open your App2 project

2. Go to Project Settings → General → Vercel Deployments

3. Select Vercel team from dropdown

4. Click "Link Vercel deployment"

5. Wait for setup (~30 seconds)

What happens:

• vercel.json added to your repository

• Vercel project created in your team

• Code pushed to GitHub

• First deployment triggered

• Production URL assigned

Step 4: Wait for first deployment

Vercel builds and deploys your project.

Build process:

• Vercel detects framework (Vite or Expo)

• Installs dependencies

• Builds production bundle

• Deploys to edge network

• Assigns production URL

Timeline:

• Web projects (Vite): 2-5 minutes

• Mobile projects (Expo): 3-7 minutes

Deployment complete:

• Production URL available

• Visit deployment to test

• Configure custom domain (optional)

Managing teams

Viewing teams

See all Vercel teams connected to your workspace.

Where to view:Workspace Settings → Integrations → Vercel

What you'll see:

• Team names

• Team IDs

• Linked projects count

• Configuration status

Multiple teams

Workspaces can connect multiple Vercel teams.

Why multiple teams:

• Separate personal and company accounts

• Different teams for different projects

• Client-specific Vercel accounts

• Development vs production teams

Example:

• Team 1: Personal Vercel account (side projects)

• Team 2: Company Vercel team (client work)

• Team 3: Client's Vercel account (direct deployment)

Updating API tokens

Rotate Vercel API tokens for security.

How to update:

1. Go to Workspace Settings → Integrations → Vercel

2. Find team to update

3. Click "Edit" or "Update token"

4. Enter new API token

5. Click "Validate and Save"

When to update:

• Token expired

• Security best practice (periodic rotation)

• Token compromised

• Changing team ownership

Removing teams

Delete Vercel teams you no longer need.

How to remove:

1. Verify no projects link to this team

2. Go to Workspace Settings → Integrations → Vercel

3. Find team to remove

4. Click "Delete" or "Remove"

5. Confirm deletion

What gets deleted:

• Team configuration in App2

• Encrypted API token

What stays:

• Your Vercel account (unchanged)

• Vercel projects (remain in Vercel)

• Deployments (continue running)

Linking projects

Requirements for linking

Before you can link:

1. GitHub repository must be user-owned (not App2-managed)

2. Project must be in Ready status

3. Vercel team must be configured in workspace

If using App2-managed repo:

1. Go to Project Settings → GitHub Repository

2. Migrate to your own GitHub organization

3. Wait for migration (~1 minute)

4. Then link to Vercel

One team per project

Rule: Each project links to one Vercel team at a time.

Why:

• Clear deployment target

• No configuration conflicts

• Single source of truth

To switch teams:

• Unlink current team

• Link different team

• Vercel project recreated

Automatic deployments

Vercel automatically deploys your project when code changes.

Deployment triggers:

• AI generates code in App2

• Code synced to GitHub

• GitHub webhook notifies Vercel

• Vercel builds and deploys

• Production URL updates

Build process:

• Install dependencies (npm install)

• Run build command (npm run build)

• Optimize assets

• Deploy to edge network

Deployment status:

• View in Vercel dashboard

• Build logs available

• Success/failure notifications

• Rollback options

Preview vs production:

• Production: Main branch deployments

• Preview: Branch and PR deployments

Custom domains

Add your own domain name to Vercel deployments.

Overview:

• Configure in Vercel dashboard

• DNS setup at your registrar

• Automatic SSL certificates

• Multiple domains supported

Complete guide: See Custom Domains for detailed instructions on:

• Adding domains

• DNS configuration

• Verification process

• SSL certificates

• Troubleshooting

Best practices

Deployment strategy

Development workflow:

1. Build features in App2

2. Test in App2 preview

3. Code automatically syncs to GitHub

4. Vercel deploys to production

5. Test production deployment

6. Share production URL

Branch strategy:

• Main branch → Production

• Feature branches → Preview deployments

• Test before merging to main

Security

Protect your deployments:

• Use scoped API tokens

• Rotate tokens periodically

• Monitor Vercel dashboard

• Review deployment logs

• Set up environment variables properly

Environment variables:

• Store secrets in Vercel dashboard

• Never commit to git

• Use different values for dev/prod

• Reference in code via process.env

Team management

Multiple teams:

• Use personal team for side projects

• Company team for client work

• Client teams for direct deployment

• Clear naming conventions

Performance

Optimize builds:

• Minimize bundle size

• Enable Vercel analytics

• Monitor build times

• Use caching effectively

Troubleshooting

Can't add Vercel team (not Pro)

Issue: Vercel integration settings show upgrade prompt.

Solution: Vercel integration requires Pro subscription ($25/month). Upgrade to access deployment features.

Can't link Vercel (App2-managed GitHub repo)

Issue: "Link Vercel deployment" button disabled or error shows.

Solution: Vercel requires user-owned GitHub repository. Go to Project Settings → GitHub Repository and migrate to your own GitHub organization first (Pro feature).

Vercel team validation failed

Issue: "Invalid credentials" error when adding team.

Solutions:

1. Verify Team ID is correct (from Vercel Settings → General)

2. Check API token is valid and not expired

3. Ensure API token has proper scopes

4. Generate new API token if needed

5. Verify you have access to the team

Deployment failed

Issue: Build fails or deployment errors.

Solutions:

1. Check build logs in Vercel dashboard

2. Verify vercel.json configuration

3. Ensure dependencies are correctly specified

4. Check environment variables are set

5. Review error messages in Vercel

Production URL not updating

Issue: Code changes in App2 but production site doesn't update.

Solutions:

1. Verify Vercel project is linked

2. Check GitHub sync is working

3. Review deployment status in Vercel

4. Wait for build to complete (2-7 minutes)

5. Check Vercel build logs for errors

FAQ

Can Free tier users use Vercel?

No. Vercel integration requires Pro subscription ($25/month). Additionally, it requires user-owned GitHub repository, which is also a Pro feature.

Do I need to pay for Vercel separately?

Vercel has its own pricing. Check vercel.com/pricing for current plans. Vercel offers a generous free tier for personal projects.

Can I use one Vercel team for multiple projects?

Yes. One Vercel team can deploy multiple App2 projects. Each project gets its own Vercel deployment.

What if my Vercel API token expires?

Projects stop deploying. Update the API token in App2 workspace settings to restore deployment functionality.

Can I deploy without Vercel?

Yes. Your code is in GitHub—deploy anywhere you want (Netlify, AWS, self-hosted, etc.). Vercel integration is optional.

How do I add custom domains?

Link Vercel first, then add custom domains in Vercel dashboard. See Custom Domains for complete guide.

Will Vercel deployments consume App2 credits?

No. Deployments are handled by Vercel. You pay Vercel directly for hosting. App2 credits are only for AI code generation.

Can I have different Vercel teams for different projects?

Yes. Link different projects to different Vercel teams. Useful for client work or separating personal/company deployments.

What happens to deployments if I disconnect Vercel?

Existing deployments continue running in Vercel. New code changes won't deploy automatically until you reconnect.

Can I manage deployments in Vercel dashboard?

Yes. Full access to Vercel dashboard for builds, domains, analytics, settings, and environment variables.

Related links

• Custom Domains - Add your own domain

• GitHub Integration - Required for Vercel

• Projects - Linking deployments

• Plans and Credits - Pro subscription

• Getting Started