Connecting Vercel

Set up Vercel deployment for your VibeHub projects

Overview

Vercel is the platform behind Next.js, optimized for frontend frameworks and full-stack applications. Connect your Vercel account to deploy directly from VibeHub.

Prerequisites

Before connecting:

• A Vercel account (free tier works)
• Owner access to your VibeHub project

Connecting Your Vercel Account

1. Open VibeHub Settings

   Click your profile icon and go to Settings

2. Find Connected Platforms

   Scroll to the Connected Platforms section

3. Click Connect for Vercel

   Click the Connect button next to Vercel

4. Authorize in Vercel

   You’ll be redirected to Vercel. Log in and authorize VibeHub to access your account.

5. Return to VibeHub

   After authorization, you’ll be redirected back. Vercel is now connected!

You only need to connect Vercel once. After that, you can use it for any project.

Configuring a Project for Vercel

After connecting your account, configure each project:

1. Open Project Settings

   Go to your project and click the Settings tab

2. Find Deployment Section

   Scroll to the Deployment section

3. Select Vercel

   Choose Vercel as your deployment platform

4. Choose a Project

   Select an existing Vercel project or create a new one

5. Save Configuration

   Click Save to store your deployment settings

Creating a New Vercel Project

If you don’t have an existing project:

1. In the project selection, click Create New Project
2. Enter a name for your project
3. Click Create
4. The new project is automatically selected

Your site will be available at your-project.vercel.app.

Deploying to Vercel

Once configured, deploying is simple:

1. Go to your project dashboard
2. Click the Deploy button
3. Watch the deployment progress
4. Click the URL to view your live site

Framework Detection

Vercel automatically detects common frameworks:

Framework	Auto-Detected
Next.js	Yes
React (CRA)	Yes
Vue.js	Yes
Nuxt	Yes
Svelte	Yes
Static HTML	Yes

Vercel’s build system automatically configures settings for detected frameworks. For custom setups, configure build settings in the Vercel dashboard.

Deployment Settings

Setting	Description
Project	Which Vercel project to deploy to
Build Command	Override the auto-detected build command
Output Directory	Override the auto-detected output folder

Viewing Deployment Status

After deploying, you’ll see:

• Status - Building, Deploying, Ready, or Error
• URL - Link to your deployed site
• Deploy Time - When the deployment completed

Vercel Features Available

When deploying via VibeHub, you get access to:

• Preview URLs - Unique URLs for each deployment
• Edge Network - Global CDN for fast delivery
• Serverless Functions - API routes work automatically
• Environment Variables - Configure in Vercel dashboard

Troubleshooting

Authorization Failed

If the OAuth flow fails:

1. Make sure you’re logged into Vercel
2. Clear your browser cookies
3. Try connecting again

Deployment Failed

If a deployment fails:

1. Check the Vercel dashboard for build logs
2. Verify your framework is supported
3. Check for missing dependencies
4. Review environment variables

Project Not Appearing

If your Vercel projects don’t show up:

1. Verify Vercel is connected in Settings
2. Check that you have projects in your Vercel account
3. Ensure you authorized the correct Vercel team/account
4. Try disconnecting and reconnecting

Disconnecting Vercel

To disconnect your Vercel account:

1. Go to VibeHub Settings
2. Find Connected Platforms
3. Click Disconnect next to Vercel

Disconnecting won’t delete your Vercel projects or deployments, but you won’t be able to deploy from VibeHub until you reconnect.

Next Steps

Deploy Your Project

Learn the deployment workflow

Connect Netlify

Set up an alternative platform