Dad Joke Visualizer

# 🚀 Vercel Deployment Guide for Dad Joke Visualizer ## ✅ Prerequisites 1. **GitHub Repository**: Your code must be pushed to GitHub 2. **Vercel Account**: Sign up at [vercel.com](https://vercel.com) 3. **Environment Variables**: Set up your `.env` variables in Vercel ## 🔧 Setup Steps ### 1. Connect Repository to Vercel 1. Go to [vercel.com/dashboard](https://vercel.com/dashboard) 2. Click **"Add New..."** → **"Project"** 3. **Import** your `DadJokeVisualizer` repository 4. Vercel will automatically detect the configuration ### 2. Configure Build Settings **Framework Preset**: `Other` (or leave blank) **Build Command**: ```bash npm run build ``` **Output Directory**: ``` dist ``` **Root Directory**: ``` . ``` ### 3. Set Environment Variables In Vercel dashboard, go to **Settings** → **Environment Variables** and add: ``` NANOBANANA_API_KEY=your_api_key_here NANOBANANA_BASE_URL=https://api.nanobanana.com PORT=3000 WEB_BASE_URL=https://your-app-name.vercel.app MCP_SERVER_NAME=dad-joke-visualizer MCP_SERVER_VERSION=1.0.0 NODE_ENV=production ``` ### 4. Enable Automatic Deployments ✅ **Automatic deployments are enabled by default!** Every time you push to your `main` branch, Vercel will: - Trigger a new build - Deploy the latest version - Update your live site ## 🎯 How It Works ### Updated File Structure ``` DadJokeVisualizer/ ├── api/ │ └── index.js # 📋 Vercel API handler ├── vercel.json # ⚙️ Vercel configuration ├── dist/ # 🏗️ Compiled TypeScript ├── web/ # 🌐 Static web files └── src/ # 📝 Source TypeScript ``` ### Deployment Flow 1. **Push to GitHub** → `git push origin main` 2. **Vercel detects changes** → Starts build process 3. **Build runs** → `npm run build` (compiles TypeScript + copies web files) 4. **Deploy** → Creates serverless functions 5. **Live!** → Your app is accessible at `https://your-project.vercel.app` ## 🔄 Continuous Deployment ### Triggering Deployments **Automatic** (recommended): - Push to `main` branch → Auto-deployment **Manual**: - Go to Vercel dashboard - Click **"Deploy"** button **Preview Deployments**: - Push to any branch → Creates preview URL - Perfect for testing before merging to main ## 🛠️ Troubleshooting ### Build Fails 1. Check **Functions** tab in Vercel for errors 2. Verify `buildCommand` in `vercel.json` 3. Check all dependencies are in `package.json` ### Environment Variables 1. Go to **Settings** → **Environment Variables** 2. Ensure all variables are set for **Production** environment 3. Redeploy after adding variables ### Domain Issues - Default: `your-project-name.vercel.app` - Custom domains available: **Settings** → **Domains** ## 🎉 Success Indicators ✅ **Working deployment shows**: - Clean build logs - Functions deployed successfully - Accessible URL in Vercel dashboard - Web interface loads properly ## 📋 Next Steps After Deployment 1. **Test the web interface** at your Vercel URL 2. **Verify image generation** (will use SVG fallback due to Nano-banana SSL issues) 3. **Share your Dad Joke Visualizer** with friends! 4. **Monitor deployments** in Vercel dashboard --- 🎭 **Your Dad Joke Visualizer should now automatically deploy whenever you push to GitHub!** 🎭