🚀 Vercel Deployment Guide - TruthChain

✅ Quick Deploy to Vercel

Deploy your TruthChain application to Vercel in just a few clicks!

🎯 Option 1: Deploy via Vercel Dashboard (Recommended)

Step 1: Go to Vercel

Visit Vercel:
- Go to: https://vercel.com/
Sign up / Log in:
- Use GitHub account (recommended)
- Click "Continue with GitHub"
- Authorize Vercel

Step 2: Import Your Repository

Click "Add New Project"
- Or go to: https://vercel.com/new
Import Git Repository:
- Click "Import Git Repository"
- Select "GitHub"
- Find An8akki/truthchain
- Click "Import"

Step 3: Configure Project

Framework Preset:

Vercel should auto-detect: Next.js

Root Directory:

Set to: frontend
Click "Edit" next to Root Directory
Enter: frontend

Build and Output Settings:

Build Command: npm run build (auto-detected)
Output Directory: .next (auto-detected)
Install Command: npm install (auto-detected)

Environment Variables:

Skip for now (optional, can add later)

Step 4: Deploy!

Click "Deploy"
- Vercel will start building
- Wait 2-3 minutes
Deployment Complete!
- You'll see: "Congratulations!"
- Your app is live!
Get Your URL:
- Format: https://truthchain-xxx.vercel.app
- Click "Visit" to see your live app

🎯 Option 2: Deploy via Vercel CLI

Step 1: Install Vercel CLI

npm install -g vercel

Step 2: Login to Vercel

vercel login

Choose your login method (GitHub recommended)
Authorize in browser

Step 3: Deploy

# Navigate to project root
cd d:\BlockChain\TruthChain

# Deploy
vercel

# Follow prompts:
# - Set up and deploy? Yes
# - Which scope? Your account
# - Link to existing project? No
# - Project name? truthchain
# - Directory? ./frontend
# - Override settings? No

Step 4: Production Deployment

# Deploy to production
vercel --prod

📋 Deployment Configuration

vercel.json (Already Created)

{
  "buildCommand": "cd frontend && npm install && npm run build",
  "outputDirectory": "frontend/.next",
  "devCommand": "cd frontend && npm run dev",
  "installCommand": "cd frontend && npm install",
  "framework": "nextjs",
  "regions": ["iad1"]
}

Project Structure for Vercel

TruthChain/
├── frontend/              ← Root directory for Vercel
│   ├── app/
│   ├── components/
│   ├── contexts/
│   ├── lib/
│   ├── public/
│   ├── package.json
│   └── next.config.js
├── contracts/
├── scripts/
├── vercel.json           ← Vercel configuration
└── README.md

🔧 Environment Variables (Optional)

If you want to add environment variables on Vercel:

Step 1: Go to Project Settings

Go to your Vercel dashboard
Select your project
Click "Settings"
Click "Environment Variables"

Step 2: Add Variables

Add these if needed:

NEXT_PUBLIC_CREATOR_REGISTRY_ADDRESS=0x...
NEXT_PUBLIC_TRUTHCHAIN_ADDRESS=0x...
NEXT_PUBLIC_NETWORK_NAME=polygonAmoy
NEXT_PUBLIC_CHAIN_ID=80002
NEXT_PUBLIC_RPC_URL=https://rpc-amoy.polygon.technology
NEXT_PUBLIC_PINATA_API_KEY=your_key
NEXT_PUBLIC_PINATA_SECRET_KEY=your_secret
NEXT_PUBLIC_PINATA_JWT=your_jwt

Note: For demo mode, these are optional!

🎨 Custom Domain (Optional)

Add Your Own Domain

Go to Project Settings:
- Click "Domains"
Add Domain:
- Enter your domain (e.g., truthchain.com)
- Follow DNS configuration instructions
Vercel Provides:
- Free SSL certificate
- Automatic HTTPS
- Global CDN

🚀 Deployment Process

What Happens When You Deploy:

Vercel Clones Your Repo
- From GitHub: An8akki/truthchain
Installs Dependencies
- Runs: npm install in frontend/
Builds Your App
- Runs: npm run build
- Creates optimized production build
Deploys to CDN
- Distributes globally
- Enables edge caching
Provides URL
- Format: https://truthchain-xxx.vercel.app
- Or your custom domain

📊 Expected Build Output

Building...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (5/5)
✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.2 kB         95 kB
├ ○ /admin                               8.1 kB         98 kB
├ ○ /creator                             12.3 kB        102 kB
├ ○ /explore                             7.8 kB         97 kB
└ ○ /verify                              9.5 kB         99 kB

○  (Static)  prerendered as static content

✓ Build completed successfully

✅ Verify Deployment

After Deployment:

Visit Your URL:
```
https://truthchain-xxx.vercel.app
```
Test All Pages:
- Home: /
- Verify: /verify
- Creator: /creator
- Explore: /explore
- Admin: /admin
Check Features:
- ✅ Cosmos background loads
- ✅ Navigation works
- ✅ Creator registration works
- ✅ Content upload works
- ✅ Verification works
- ✅ All features functional

🔄 Automatic Deployments

How It Works:

Push to GitHub:

git add .
git commit -m "Update feature"
git push

Vercel Auto-Deploys:
- Detects push to master branch
- Automatically builds and deploys
- Updates live site in 2-3 minutes
Preview Deployments:
- Every branch gets a preview URL
- Test before merging to master

🎯 Deployment Checklist

Before Deploying:

During Deployment:

Vercel project created
Root directory set to frontend
Build completes successfully
Deployment URL received

After Deployment:

🐛 Troubleshooting

Build Fails

Error: "Build failed"

Solution:

Check build logs in Vercel dashboard
Test build locally:
```
cd frontend
npm run build
```
Fix any errors
Push to GitHub
Vercel will auto-redeploy

404 on Routes

Error: "404 Not Found" on /creator, /verify, etc.

Solution:

Ensure root directory is set to frontend
Next.js should handle routing automatically
Check next.config.js if exists

Environment Variables Not Working

Error: "undefined" for environment variables

Solution:

Add variables in Vercel dashboard
Redeploy after adding variables
Ensure variables start with NEXT_PUBLIC_

Slow Loading

Issue: App loads slowly

Solution:

Vercel uses global CDN (should be fast)
Check image optimization
Enable caching headers
Use Vercel Analytics to diagnose

📈 Vercel Features You Get

Free Tier Includes:

✅ Unlimited Deployments
✅ Automatic HTTPS
✅ Global CDN
✅ Preview Deployments
✅ Auto-scaling
✅ 100GB Bandwidth/month
✅ Serverless Functions
✅ Analytics (optional)

Performance:

⚡ Edge Network: 70+ locations worldwide
⚡ Fast Builds: 2-3 minutes average
⚡ Instant Rollbacks: One-click revert
⚡ Zero Downtime: Atomic deployments

🔗 Useful Links

Vercel Dashboard:

Projects: https://vercel.com/dashboard
Deployments: https://vercel.com/deployments
Settings: https://vercel.com/account

Documentation:

Vercel Docs: https://vercel.com/docs
Next.js on Vercel: https://vercel.com/docs/frameworks/nextjs
CLI Reference: https://vercel.com/docs/cli

🎉 One-Click Deploy Button

Add this to your README.md:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/An8akki/truthchain&project-name=truthchain&repository-name=truthchain&root-directory=frontend)

This creates a button that deploys your app with one click!

📊 Deployment Summary

What You Get:

🌐 Live URL:          https://truthchain-xxx.vercel.app
🚀 Deploy Time:       2-3 minutes
🔄 Auto-Deploy:       On every push to master
🌍 Global CDN:        70+ edge locations
📊 Analytics:         Built-in (optional)
🔒 HTTPS:             Automatic SSL
💰 Cost:              FREE (Hobby plan)

✅ Quick Deploy Steps

TL;DR - Just Do This:

Go to: https://vercel.com/new
Import: An8akki/truthchain
Set Root Directory: frontend
Click: "Deploy"
Wait: 2-3 minutes
Done! Visit your live URL

🎯 Next Steps After Deployment

Share Your URL:
- Post on social media
- Share with friends
- Add to portfolio
Monitor Performance:
- Check Vercel Analytics
- Monitor build times
- Track visitor stats
Keep Updating:
- Push to GitHub
- Vercel auto-deploys
- Always stay current
Add Custom Domain:
- Buy a domain
- Point DNS to Vercel
- Get professional URL

🆘 Need Help?

Vercel Support: https://vercel.com/support
Vercel Community: https://github.com/vercel/vercel/discussions
Next.js Docs: https://nextjs.org/docs

🎉 Your TruthChain app is ready to deploy to Vercel! 🚀

Deploy Now: https://vercel.com/new

Last Updated: 2025-11-29
For TruthChain v1.0

FilesExpand file tree

VERCEL_DEPLOYMENT.md

Latest commit

History

VERCEL_DEPLOYMENT.md

File metadata and controls

🚀 Vercel Deployment Guide - TruthChain

✅ Quick Deploy to Vercel

🎯 Option 1: Deploy via Vercel Dashboard (Recommended)

Step 1: Go to Vercel

Step 2: Import Your Repository

Step 3: Configure Project

Step 4: Deploy!

🎯 Option 2: Deploy via Vercel CLI

Step 1: Install Vercel CLI

Step 2: Login to Vercel

Step 3: Deploy

Step 4: Production Deployment

📋 Deployment Configuration

vercel.json (Already Created)

Project Structure for Vercel

🔧 Environment Variables (Optional)

Step 1: Go to Project Settings

Step 2: Add Variables

🎨 Custom Domain (Optional)

Add Your Own Domain

🚀 Deployment Process

What Happens When You Deploy:

📊 Expected Build Output

✅ Verify Deployment

After Deployment:

🔄 Automatic Deployments

How It Works:

🎯 Deployment Checklist

Before Deploying:

During Deployment:

After Deployment:

🐛 Troubleshooting

Build Fails

404 on Routes

Environment Variables Not Working

Slow Loading

📈 Vercel Features You Get

Free Tier Includes:

Performance:

🔗 Useful Links

Vercel Dashboard:

Documentation:

🎉 One-Click Deploy Button

📊 Deployment Summary

What You Get:

✅ Quick Deploy Steps

TL;DR - Just Do This:

🎯 Next Steps After Deployment

🆘 Need Help?