Skip to content

DEPLOYMENT.md

Latest commit

 

History

History
120 lines (91 loc) · 3.93 KB

DEPLOYMENT.md

File metadata and controls

120 lines (91 loc) · 3.93 KB
Raw

Deployment Guide

Step 1: Create GitHub Repository

  1. Go to https://github.com/new
  2. Repository name: portfolio-chatbot-widget
  3. Description: "Self-hosted RAG chatbot widget for portfolio website"
  4. Choose Private or Public (your choice)
  5. DO NOT initialize with README, .gitignore, or license (we already have these)
  6. Click "Create repository"

Step 2: Push to GitHub

After creating the repo, run these commands:

cd /Users/arnob_t78/Projects/NextJS/portfolio-chatbot-widget
git remote add origin https://github.com/arnobt78/portfolio-chatbot-widget.git
git branch -M main
git push -u origin main

Step 3: Deploy to Vercel

  1. Go to https://vercel.com/new
  2. Import the portfolio-chatbot-widget repository
  3. Configure environment variables (see .env.local for all required keys):
    • UPSTASH_REDIS_URL
    • UPSTASH_REDIS_TOKEN
    • HUGGING_FACE_API_KEY
    • GOOGLE_GEMINI_API_KEY
    • OPENROUTER_API_KEY
    • GROQ_API_KEY (optional)
    • OPENAI_API_KEY (optional, if you have it)
    • NEXT_PUBLIC_CHATBOT_URL - Leave this EMPTY for first deployment (it has a fallback, and you'll update it after deployment)
    • SEED_SECRET - Random secret for protecting the /api/seed endpoint (required)
  4. Click "Deploy"
  5. Wait for deployment to complete
  6. Copy your Vercel deployment URL (e.g., https://portfolio-chatbot-widget.vercel.app)

Step 4: Seed the FAQ Database

After deployment, run the seed endpoint (requires SEED_SECRET):

curl -X POST https://your-vercel-url.vercel.app/api/seed \
  -H "Authorization: Bearer $SEED_SECRET"

Or use the header form:

curl -X POST https://your-vercel-url.vercel.app/api/seed \
  -H "x-seed-secret: $SEED_SECRET"

You should see: {"success":true,"count":20}

Step 5: Update Environment Variable

  1. Go back to Vercel dashboard → Your project → Settings → Environment Variables
  2. Add or update NEXT_PUBLIC_CHATBOT_URL to your actual Vercel URL (e.g., https://portfolio-chatbot-widget.vercel.app)
  3. Save the environment variable
  4. Vercel will automatically trigger a new deployment, or you can manually redeploy

Step 6: Test the Widget

  1. Open your Vercel URL in a browser
  2. The widget button should appear in the bottom-right corner
  3. Click it and test a question like "Tell me about Arnob Mahmud"
  4. Verify RAG search and AI responses work

Step 6b: Enable Vercel Firewall (dashboard — no redeploy required)

After first deploy, open Vercel → Project → Firewall → Bot Management:

  1. Bot Protection → Challenge (not merely ON) — blocks automated crawlers; normal browsers pass through
  2. AI Bots → Deny — blocks GPTBot, CCBot, and similar scrapers
  3. Attack Mode → OFF — only enable during an active attack (adds friction to all visitors)

These settings protect edge/API usage from bot burn without limiting how much real users can chat.

Step 7: Integrate into Portfolio

Once testing is successful, update your portfolio (portfolio-arnob-new):

  1. Edit app/layout.tsx in your portfolio project
  2. Add the widget script:
<script
  dangerouslySetInnerHTML={{
    __html: `
      window.CHATBOT_BASE_URL = "https://your-vercel-url.vercel.app";
      window.CHATBOT_TITLE = "Arnob's Assistant";
      window.CHATBOT_GREETING = "👋 How can I help you today?";
      window.CHATBOT_PLACEHOLDER = "Ask about Arnob...";
    `,
  }}
/>
<script
  src="https://your-vercel-url.vercel.app/widget.js"
  async
></script>
  1. Test locally: npm run dev in your portfolio project
  2. Deploy portfolio to Vercel

Step 8: Future VPS Deployment (Optional)

Once everything works on Vercel, you can deploy to your VPS via Coolify:

  1. Push to GitHub (already done)
  2. In Coolify, create a new application
  3. Connect to your GitHub repo
  4. Set all environment variables
  5. Deploy
  6. Update NEXT_PUBLIC_CHATBOT_URL to your VPS domain
  7. Update portfolio widget script to point to VPS domain