Deploy DApp to Vercel - Step by Step

Quick Setup

Option 1: Via Vercel Dashboard (Recommended)

1. Go to Vercel Dashboard

   • Visit: https://vercel.com/dashboard
   • Click "Add New Project"

2. Import Repository

   • Select: abhicris/CR8
   • Click "Import"

3. Configure Project

   • Project Name: cr8-dapp (or your choice)
   • Framework Preset: Next.js
   • Root Directory: . (repo root) or leave empty
   • Build Command: npm run build --workspace=packages/dapp
   • Output Directory: packages/dapp/.next
   • Install Command: npm install

4. Environment Variables Click "Add" for each:

   NEXT_PUBLIC_CHAIN_ID=11155111
   NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id
   NEXT_PUBLIC_CR8_TOKEN_ADDRESS=0xE808092649524be59337815D57cd2CFa457E2263
   NEXT_PUBLIC_CR8_STAKING_ADDRESS=0x64352520ac1F83f1447cF72E42819010D2359537
   NEXT_PUBLIC_TOKEN_VESTING_ADDRESS=0xCCcadaD8Bd3C32811e3dd194128d4E3A90e2f315
   NEXT_PUBLIC_AGENT_DEPOSIT_ADDRESS=0xB3E801EAce32f616c67B0Ac29Cd0eb1677587C28

5. Deploy

   • Click "Deploy"
   • Wait for build to complete

Option 2: Via Vercel CLI

cd packages/dapp
vercel link
# Follow prompts to create/link project
vercel --prod

Important Settings

Root Directory

• Set to: . (repo root) or empty
• This allows npm workspaces to work

Build Command

• Use: npm run build --workspace=packages/dapp
• This runs from repo root using workspace command

Output Directory

• Use: packages/dapp/.next
• This is where Next.js builds to

Environment Variables Required

All variables must start with NEXT_PUBLIC_ to be accessible in the browser:

NEXT_PUBLIC_CHAIN_ID=11155111
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id
NEXT_PUBLIC_CR8_TOKEN_ADDRESS=0xE808092649524be59337815D57cd2CFa457E2263
NEXT_PUBLIC_CR8_STAKING_ADDRESS=0x64352520ac1F83f1447cF72E42819010D2359537
NEXT_PUBLIC_TOKEN_VESTING_ADDRESS=0xCCcadaD8Bd3C32811e3dd194128d4E3A90e2f315
NEXT_PUBLIC_AGENT_DEPOSIT_ADDRESS=0xB3E801EAce32f616c67B0Ac29Cd0eb1677587C28

Troubleshooting

Build Fails: "Cannot find module"

• Verify Root Directory is . or empty
• Check that Build Command uses workspace syntax

Build Fails: "Missing script: build"

• Root Directory must be repo root (.)
• Build Command must be: npm run build --workspace=packages/dapp

Environment Variables Not Working

• Must start with NEXT_PUBLIC_
• Redeploy after adding variables
• Check variable names match exactly

After Deployment

Your DApp will be live at:

• Production: https://your-project.vercel.app
• Preview: Each PR gets a preview URL

Next Steps

1. ✅ Deploy to Vercel
2. ✅ Test wallet connection
3. ✅ Test contract interactions
4. ✅ Set up custom domain (optional)