Vercel Deployment Guide

Overview

The CR8 monorepo has two Next.js applications that need separate Vercel deployments:

1. DApp (packages/dapp) - Blockchain interaction interface
2. Website (packages/website) - Landing page and documentation

Deployment Steps

For DApp (packages/dapp)

1. Go to Vercel Dashboard
2. Click "Add New Project"
3. Import your GitHub repository: abhicris/CR8
4. Configure the project:
   • Framework Preset: Next.js
   • Root Directory: packages/dapp ⚠️ IMPORTANT
   • Build Command: Leave as default (npm run build)
   • Output Directory: Leave as default (.next)
   • Install Command: Leave empty or set to npm install (Vercel will handle it)
5. Add Environment Variables:
   • NEXT_PUBLIC_CHAIN_ID = 11155111 (or your chain ID)
   • NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID = Your WalletConnect project ID
6. Click "Deploy"

For Website (packages/website)

1. Go to Vercel Dashboard
2. Click "Add New Project"
3. Import the same GitHub repository: abhicris/CR8
4. Configure the project:
   • Framework Preset: Next.js
   • Root Directory: packages/website ⚠️ IMPORTANT
   • Build Command: Leave as default (npm run build)
   • Output Directory: out (for static export)
   • Install Command: Leave empty (Vercel will handle it)
5. Click "Deploy"

Important: Root Directory Setting

The Root Directory setting is critical!

When you set Root Directory to packages/dapp or packages/website, Vercel will:

1. Change to that directory
2. Run npm install in that directory
3. Run the build command from that directory

Since we're using npm workspaces, Vercel will automatically install all workspace dependencies when it runs npm install from the package directory (because it detects the workspace configuration).

Troubleshooting

Error: "Tracker 'idealTree' already exists"

This happens when npm install is run multiple times. Solution:

• Remove any custom Install Command from project settings
• Let Vercel use the default npm install
• Make sure Root Directory is set correctly

Error: "Cannot find module"

Solution:

• Ensure Root Directory is set to the correct package directory
• Vercel should automatically detect and install workspace dependencies
• Check that package.json in the package directory has the correct dependencies

Build Fails

Solution:

1. Check build logs in Vercel dashboard
2. Verify Root Directory is set correctly
3. Ensure all dependencies are listed in the package's package.json
4. Check that npm workspaces are configured in root package.json

Vercel Configuration Files

The vercel.json files in each package are minimal and let Vercel auto-detect settings:

• packages/dapp/vercel.json - DApp configuration
• packages/website/vercel.json - Website configuration

Note: The Root Directory must be set in Vercel Dashboard project settings, not in vercel.json.

Environment Variables

DApp Environment Variables

Set these in Vercel Dashboard → Project Settings → Environment Variables:

• NEXT_PUBLIC_CHAIN_ID - Blockchain network ID (e.g., 11155111 for Sepolia)
• NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID - WalletConnect project ID

Website Environment Variables

No environment variables needed for the website (static site).

How Vercel Handles Monorepos

When Root Directory is set to a subdirectory:

1. Vercel changes to that directory
2. Runs npm install - npm detects the workspace and installs from root
3. Runs the build command from that directory
4. Uses the specified output directory

This works because npm workspaces automatically hoist dependencies and link packages.

Custom Domains

After deployment, you can add custom domains:

1. Go to Project Settings → Domains
2. Add your custom domain
3. Follow DNS configuration instructions

Automatic Deployments

Vercel automatically deploys when you push to:

• main branch → Production
• Other branches → Preview deployments

Preview Deployments

Every pull request gets a preview deployment URL automatically.

Support

For issues:

1. Check Vercel build logs
2. Verify Root Directory is set correctly in project settings
3. Ensure npm workspace configuration is correct
4. Check that package.json files are valid