# StratOps Advisory Group — Production Deployment Guide

> **Complete guide to hosting the StratOps website on Afrihost (or any Node.js-capable host)**

---

## Quick Start (5 minutes)

```bash
# 1. Unzip the deployment package
unzip stratops-website-afrihost-deploy.zip
cd stratops-website

# 2. Install dependencies
npm install          # or: bun install

# 3. Configure environment
cp .env.example .env
# Edit .env and add your ZAI_API_KEY

# 4. Build for production
npm run build

# 5. Start the production server
npm run start
# → Site live at http://localhost:3000
```

---

## Afrihost Hosting Recommendation

### ⚠️ Important: This is a Next.js application, NOT a static website

The StratOps website is built on **Next.js 16** with server-side features (API routes for the AI chatbot, lead capture, server components). This means it **cannot be hosted on Afrihost's standard shared hosting** (which only serves static files or PHP/WordPress).

### Recommended Afrihost Packages (ranked)

#### 1. ★ BEST OPTION: Afrihost Cloud Hosting — "Cloud Express" or higher
- **URL**: https://www.afrihost.com/cloud-hosting
- **Price**: ~R99–R299/month
- **Why**: Full Node.js support, SSH access, PM2 process manager, scalable
- **Specs needed**: 1GB RAM minimum (2GB recommended for video assets)
- **Setup**: SSH in → upload files → `npm install` → `npm run build` → run with PM2

#### 2. BUDGET OPTION: Afrihost VPS (Virtual Private Server)
- **URL**: https://www.afrihost.com/vps
- **Price**: ~R129–R399/month
- **Why**: Full root access, install any runtime, complete control
- **Specs needed**: 2GB RAM, 20GB SSD storage
- **Setup**: Install Node.js 20+ → upload → build → run with PM2 or systemd

#### 3. MANAGED OPTION: Afrihost Managed Cloud
- **URL**: https://www.afrihost.com/managed-cloud
- **Price**: ~R399+/month
- **Why**: Afrihost manages the server, you just deploy
- **Best if**: You don't want to manage server updates/security yourself

### ❌ NOT Compatible: Afrihost Shared Hosting (cPanel)
Afrihost's standard shared hosting (R19–R99/month) runs on cPanel with Apache/LiteSpeed and only supports:
- Static HTML/CSS/JS files
- PHP applications (WordPress, Laravel, etc.)
- **It does NOT support Node.js applications**

If you purchase shared hosting, you would need to rebuild the site as a static export — which would **lose the AI chatbot, lead capture API, and all server-side features**.

---

## What's Included in This Package

```
stratops-website/
├── src/                         # All source code
│   ├── app/                     # Next.js App Router
│   │   ├── layout.tsx          # Root layout (fonts, theme, metadata)
│   │   ├── page.tsx             # Homepage (13 sections)
│   │   ├── globals.css          # Brand palette + utilities
│   │   └── api/                 # API routes (chat, leads)
│   ├── components/
│   │   ├── sections/            # 13 page sections
│   │   ├── stratops/            # AI chat + WhatsApp widgets
│   │   ├── ui-stratops/         # Reveal, video bg, time slots
│   │   ├── ui/                  # shadcn/ui primitives
│   │   └── site-header.tsx
│   ├── lib/
│   │   ├── content.ts           # ← EDIT THIS: all business copy
│   │   ├── db-lite.ts           # Lead persistence (JSON files)
│   │   └── utils.ts
│   └── hooks/
├── public/                      # Static assets (served as-is)
│   ├── brand/                   # StratOps logos
│   ├── video/                   # 6 looping background videos
│   ├── markets/                 # 13 sector images
│   └── works/                   # The Works restaurant assets
├── package.json                 # Dependencies + scripts
├── next.config.ts               # Next.js config (standalone output)
├── tsconfig.json
├── tailwind.config.ts
├── postcss.config.mjs
├── components.json              # shadcn/ui config
├── eslint.config.mjs
├── .env.example                 # ← Copy to .env and fill in
├── .gitignore
├── Caddyfile                    # Gateway config (if using Caddy)
└── DEPLOYMENT-GUIDE.md          # This file
```

---

## Prerequisites

| Requirement | Version | Notes |
|---|---|---|
| Node.js | 20.0+ | Required by Next.js 16 |
| npm or bun | npm 10+ / bun 1.1+ | Package manager |
| Storage | 200MB | Source + dependencies |
| RAM | 1GB minimum | 2GB recommended for video serving |

---

## Step-by-Step: Deploy on Afrihost Cloud/VPS

### Step 1: Provision Your Server

1. Log into Afrihost → purchase **Cloud Hosting** or **VPS**
2. Choose **Ubuntu 22.04 or 24.04** as the OS
3. Note your server IP and SSH credentials

### Step 2: Connect & Install Node.js

```bash
# SSH into your server
ssh root@your-server-ip

# Install Node.js 20 LTS via NodeSource
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt-get install -y nodejs

# Install PM2 (process manager — keeps the app running)
npm install -g pm2

# Install nginx (reverse proxy — serves on port 80)
apt-get install -y nginx
```

### Step 3: Upload the Website

```bash
# On your local machine — upload the zip
scp stratops-website-afrihost-deploy.zip root@your-server-ip:/var/www/

# On the server — unzip
cd /var/www
unzip stratops-website-afrihost-deploy.zip
mv stratops-website stratops
cd stratops
```

### Step 4: Install & Build

```bash
# Install dependencies
npm install

# Configure environment
cp .env.example .env
nano .env
# → Add your ZAI_API_KEY
# → Save (Ctrl+O, Enter, Ctrl+X)

# Build for production
npm run build
```

### Step 5: Start with PM2

```bash
# Start the Next.js production server
pm2 start npm --name "stratops" -- run start

# Save PM2 process list (auto-restart on reboot)
pm2 save
pm2 startup
# → Follow the instructions printed

# Check it's running
pm2 status
curl http://localhost:3000
```

### Step 6: Configure Nginx (Reverse Proxy)

```bash
# Create nginx config
nano /etc/nginx/sites-available/stratops
```

Paste this configuration:

```nginx
server {
    listen 80;
    server_name your-domain.co.za www.your-domain.co.za;

    # Next.js app
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # Static assets (videos, images) — serve directly for speed
    location /video/ {
        alias /var/www/stratops/public/video/;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    location /markets/ {
        alias /var/www/stratops/public/markets/;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    location /brand/ {
        alias /var/www/stratops/public/brand/;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # Gzip
    gzip on;
    gzip_types text/plain text/css application/json application/javascript;
    gzip_min_length 1000;
}
```

Enable and restart:

```bash
ln -s /etc/nginx/sites-available/stratops /etc/nginx/sites-enabled/
nginx -t          # test config
systemctl restart nginx
```

### Step 7: Add SSL (HTTPS) — Free via Let's Encrypt

```bash
# Install Certbot
apt-get install -y certbot python3-certbot-nginx

# Get SSL certificate
certbot --nginx -d your-domain.co.za -d www.your-domain.co.za

# Follow prompts — Certbot auto-renews
```

Your site is now live at **https://your-domain.co.za** ✅

---

## Environment Variables

| Variable | Required | Purpose |
|---|---|---|
| `ZAI_API_KEY` | ✅ Yes | Powers the Thabo AI chatbot |
| `RESEND_API_KEY` | ❌ Optional | Email lead notifications to founders |
| `EMAIL_FROM` | ❌ Optional | Sender address for lead emails |
| `NODE_ENV` | ✅ Yes | Set to `production` |
| `PORT` | Optional | Default: 3000 |

---

## Post-Deployment Checklist

- [ ] Site loads at https://your-domain.co.za
- [ ] Videos play in hero, approach, engagement, and industry showcase sections
- [ ] AI chatbot (Thabo) responds when you send a message
- [ ] WhatsApp widget opens wa.me links correctly
- [ ] Lead capture form saves to `db/leads.json`
- [ ] SSL certificate active (padlock in browser)
- [ ] PM2 process running (`pm2 status`)
- [ ] PM2 startup configured (`pm2 startup`)
- [ ] Nginx serving on port 80/443

---

## Maintenance Commands

```bash
# View logs
pm2 logs stratops

# Restart the app
pm2 restart stratops

# Update the site (after editing content.ts)
cd /var/www/stratops
git pull                    # if using git
npm run build
pm2 restart stratops

# Check disk space
df -h

# Check memory
free -m
```

---

## Cost Summary (Afrihost)

| Item | Monthly Cost | Notes |
|---|---|---|
| Cloud Express (1GB) | ~R99 | Minimum viable — may be slow with videos |
| Cloud Standard (2GB) | ~R199 | ★ Recommended — handles video serving well |
| VPS 2GB | ~R129 | Self-managed alternative |
| Domain (.co.za) | ~R75/year | Annual |
| SSL Certificate | FREE | Let's Encrypt |

**Total monthly: ~R199–R299/month** (hosting + domain amortised)

---

## Alternative: Deploy Without the Chatbot (Static Export)

If you want to use cheaper shared hosting (R19–R99/month), you can export a static version that drops the AI chatbot and API routes. The rest of the site (videos, images, all sections) will work fine.

```bash
# In next.config.ts, change output to "export"
# output: "export"

npm run build
# → Creates /out directory with static HTML/CSS/JS
# → Upload /out contents to shared hosting via cPanel File Manager or FTP
```

**What you lose**: AI chatbot (Thabo), lead capture API, WhatsApp action detection.
**What you keep**: All visual sections, videos, images, design, WhatsApp direct link.

---

## Troubleshooting

### "Port 3000 already in use"
```bash
pm2 delete stratops
pm2 start npm --name "stratops" -- run start
```

### "Videos not playing"
- Check file permissions: `chmod -R 755 /var/www/stratops/public/video/`
- Check nginx alias paths match your actual directory structure

### "Chatbot not responding"
- Verify `ZAI_API_KEY` is set in `.env`
- Check the API route: `curl https://your-domain.co.za/api/chat`
- View logs: `pm2 logs stratops`

### "Build fails"
```bash
# Clear Next.js cache
rm -rf .next
rm -rf node_modules
npm install
npm run build
```

---

## Support

For issues with this deployment package, contact the developer who built the site.
For Afrihost server issues, contact Afrihost support: https://www.afrihost.com/support