Vercel Website Deployment - Step by Step

Current Status

✅ Project is linked: kcolbchains-projects/website ✅ Repository: abhicris/CR8 ✅ Vercel config updated to use workspace commands

Step-by-Step Configuration

1. Go to Vercel Dashboard

1. Visit: https://vercel.com/kcolbchains-projects/website/settings
2. Or navigate: Dashboard → website → Settings

2. Configure Root Directory

IMPORTANT: Set Root Directory to the repository root, NOT packages/website

1. Go to Settings → General
2. Scroll to Root Directory
3. Click Edit
4. Set Root Directory to: . (repo root) or leave empty
5. Click Save

3. Configure Build Settings

1. Still in Settings → General
2. Scroll to Build & Development Settings
3. The vercel.json file will auto-configure these, but verify:
   • Framework Preset: Next.js
   • Build Command: npm run build --workspace=packages/website (from vercel.json)
   • Output Directory: packages/website/out (from vercel.json)
   • Install Command: Leave as default npm install (installs from root)
   • Node Version: 18.x or 20.x (recommended)

4. Connect to GitHub (if not already connected)

1. Go to Settings → Git
2. Verify repository: abhicris/CR8
3. If not connected:
   • Click Connect Git Repository
   • Select abhicris/CR8
   • Choose branch: main

5. Configure Automatic Deployments

1. Go to Settings → Git
2. Under Production Branch: Set to main
3. Enable Automatic deployments from Git
4. Enable Preview deployments for Pull Requests

6. Deploy

After configuring, you can:

Option A: Deploy via Dashboard

1. Go to Deployments tab
2. Click Redeploy on the latest deployment
3. Or push a commit to trigger automatic deployment

Option B: Deploy via CLI

cd packages/website
vercel --prod

How It Works

With Root Directory set to repo root (.):

1. ✅ Vercel runs npm install from repo root
2. ✅ npm workspaces installs all package dependencies
3. ✅ Build command runs: npm run build --workspace=packages/website
4. ✅ This builds the website package
5. ✅ Output is in packages/website/out
6. ✅ Vercel deploys from that directory

Expected Result

After configuration, when you push to main:

• ✅ Vercel detects the push
• ✅ Runs npm install from repo root
• ✅ Runs npm run build --workspace=packages/website
• ✅ Builds static site in packages/website/out
• ✅ Website is live at: https://website-kcolbchains-projects.vercel.app

Troubleshooting

Error: "Missing script: 'build'"

Cause: Root Directory was set to packages/website instead of repo root

Solution:

1. Go to Settings → General
2. Set Root Directory to . (repo root) or leave empty
3. Save and redeploy

Error: "routes-manifest.json couldn't be found"

Cause: Output Directory not set correctly

Solution:

1. Verify Output Directory is packages/website/out
2. Check vercel.json has correct outputDirectory
3. Verify next.config.js has output: 'export'

Error: "Cannot find module"

Cause: Dependencies not installed correctly

Solution:

1. Verify Root Directory is repo root (.)
2. Check that package.json exists in root with workspaces config
3. Verify npm workspaces are configured: "workspaces": ["packages/*"]

Build succeeds but site doesn't work

Cause: Output Directory might be wrong

Solution:

1. Verify Output Directory is packages/website/out
2. Check next.config.js has output: 'export'
3. Verify build creates packages/website/out directory

Verification Checklist

• [ ] Root Directory set to . (repo root) or empty
• [ ] Build Command: npm run build --workspace=packages/website
• [ ] Output Directory: packages/website/out
• [ ] Install Command: npm install (default, from root)
• [ ] Repository connected: abhicris/CR8
• [ ] Production branch: main
• [ ] Automatic deployments enabled
• [ ] Build completes successfully
• [ ] Website is accessible

Next Steps

After website is deployed:

1. Set up custom domain (optional)
2. Configure environment variables (if needed)
3. Set up the DApp deployment (separate project)