navidocs/docs/STACKCP_QUICKSTART.md
ggq-admin 90ccb8b4ec feat: Complete frontend UI polish with Meilisearch-inspired design
Major Updates:
- Implement Meilisearch-inspired design system (purple/pink gradients)
- Complete frontend polish for all views (Home, Search, Document, Jobs)
- Add PDF.js document viewer with full page navigation
- Create real-time Jobs dashboard with auto-refresh
- Fix Meilisearch authentication (generated secure master key)
- Configure Vite for WSL2 → Windows browser access (host: 0.0.0.0)

Frontend Components:
- HomeView: Hero section, gradient search bar, feature cards, footer
- SearchView: Real-time search, highlighted matches, result cards
- DocumentView: PDF.js viewer, dark theme, page controls
- JobsView: NEW - Real-time job tracking, progress bars, status badges

Design System:
- Colors: Purple (#d946ef) & Pink (#f43f5e) gradients
- Typography: Inter font family (300-900 weights)
- Components: Gradient buttons, backdrop blur, smooth animations
- Responsive: Mobile-friendly layouts with Tailwind CSS

Infrastructure:
- Service management scripts (start-all.sh, stop-all.sh)
- Comprehensive documentation in docs/handover/
- Frontend quickstart guide for WSL2 users
- Master roadmap with verticals & horizontals strategy

Documentation:
- Complete handover documentation
- Frontend polish summary with all changes
- Branding creative brief for designers
- Yacht management features roadmap
- Platform strategy (4 verticals, 17 horizontals)

Build Status:
- Clean build with no errors
- Bundle size: 150KB gzipped
- Dev server on port 8080 (accessible from Windows)
- Production ready

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-19 16:40:48 +02:00

6.3 KiB

NaviDocs on StackCP: Quick Start Guide

Prerequisites

  • StackCP shared hosting account with SSH access
  • Redis Cloud free account (5 min setup)
  • Google Cloud account with Vision API enabled (5 min setup)

1. One-Time Setup (10 minutes)

SSH Access

# From your local machine
ssh your-username@ssh-node-gb.lhr.stackcp.net

# Load helpers
source ~/stackcp-setup.sh

Redis Cloud (Free Tier)

# 1. Sign up: https://redis.com/try-free/
# 2. Create database (30MB free)
# 3. Save connection details:
REDIS_HOST=redis-xxxxx.c1.region.ec2.redis.cloud
REDIS_PORT=xxxxx
REDIS_PASSWORD=your-password

Google Cloud Vision API

# 1. Go to: https://console.cloud.google.com
# 2. Create project → Enable Vision API
# 3. Create service account → Download JSON credentials
# 4. Upload credentials:
scp google-credentials.json stackcp:~/navidocs/google-credentials.json

2. Deploy NaviDocs (15 minutes)

# SSH into StackCP
ssh stackcp
source ~/stackcp-setup.sh

# Create directories
mkdir -p ~/navidocs/{uploads,db,logs}
mkdir -p /tmp/navidocs

# Clone repository (replace with your repo URL)
cd /tmp/navidocs
git clone https://github.com/yourusername/navidocs.git .

# Install dependencies (takes ~2 minutes)
cd server
/tmp/npm install --production

cd ../client
/tmp/npm install

# Configure environment
cat > /tmp/navidocs/server/.env << 'EOF'
NODE_ENV=production
PORT=8001

# Database
DATABASE_PATH=/home/sites/7a/c/cb8112d0d1/navidocs/db/navidocs.db

# Redis Cloud
REDIS_HOST=redis-xxxxx.redis.cloud
REDIS_PORT=xxxxx
REDIS_PASSWORD=your-password

# Meilisearch (already running locally!)
MEILISEARCH_HOST=http://127.0.0.1:7700
MEILISEARCH_MASTER_KEY=find-existing-key
MEILISEARCH_INDEX_NAME=navidocs-pages

# OCR - Google Cloud Vision API
PREFERRED_OCR_ENGINE=google-vision
GOOGLE_APPLICATION_CREDENTIALS=/home/sites/7a/c/cb8112d0d1/navidocs/google-credentials.json

# File Upload
MAX_FILE_SIZE=50000000
UPLOAD_DIR=/home/sites/7a/c/cb8112d0d1/navidocs/uploads

# JWT
JWT_SECRET=$(openssl rand -base64 32)
JWT_EXPIRES_IN=7d
EOF

# Initialize database
cd /tmp/navidocs/server
/tmp/node db/init.js

# Build frontend
cd /tmp/navidocs/client
/tmp/npm run build

# Copy to web root
cp -r dist/* ~/public_html/

3. Start Services (2 minutes)

Option A: Quick Start (Testing)

source ~/stackcp-setup.sh
navidocs-start
navidocs-status

Option B: Production (StackCP Manager)

1. Log into StackCP control panel
2. Go to: Advanced → Node.js Applications
3. Add Application:
   - Name: NaviDocs
   - Path: /tmp/navidocs/server
   - Startup: index.js
   - Node: 20.x
   - Port: 8001
4. Click "Start"
5. Configure reverse proxy:
   - Domain: yoursite.com
   - Target: http://127.0.0.1:8001
   - SSL: Enable (Let's Encrypt)

4. Test Upload (2 minutes)

# Create test user
curl -X POST http://127.0.0.1:8001/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@navidocs.com",
    "password": "Test123!",
    "name": "Test User"
  }'

# Login
TOKEN=$(curl -X POST http://127.0.0.1:8001/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@navidocs.com",
    "password": "Test123!"
  }' | jq -r '.token')

# Upload PDF
curl -X POST http://127.0.0.1:8001/api/documents/upload \
  -H "Authorization: Bearer $TOKEN" \
  -F "file=@test.pdf" \
  -F "title=Test Manual" \
  -F "category=manuals"

5. Access Application

Frontend

https://yoursite.com

API

https://yoursite.com/api/health

Management Commands

# Source helpers first
source ~/stackcp-setup.sh

# Start services
navidocs-start

# Stop services
navidocs-stop

# Check status
navidocs-status

# View logs
tail -f ~/navidocs/logs/server.log
tail -f ~/navidocs/logs/worker.log

# Restart after code changes
navidocs-stop
cd /tmp/navidocs
git pull
cd server && /tmp/npm install
cd ../client && /tmp/npm run build && cp -r dist/* ~/public_html/
navidocs-start

Troubleshooting

npm Permission Denied

# ❌ Don't do this:
~/bin/npm install

# ✅ Do this instead:
/tmp/npm install

Native Module Build Fails

# Ensure you're in /tmp, not home directory:
cd /tmp/navidocs/server
/tmp/npm install better-sqlite3

Services Won't Start

# Check logs
tail -100 ~/navidocs/logs/server.log

# Check ports
netstat -tln | grep -E "3001|7700|6379"

# Kill stuck processes
pkill -f "node index.js"
pkill -f "node workers/ocr-worker.js"

Meilisearch Auth Error

# Find the master key from running process
ps aux | grep meilisearch

# Or restart Meilisearch with known key
pkill meilisearch
cd /tmp
./meilisearch --master-key="your-key-here" \
  --db-path=~/.meilisearch_data \
  --http-addr=127.0.0.1:7700 \
  --env=production > ~/navidocs/logs/meilisearch.log 2>&1 &

Performance Tips

1. Use Cloud Services

  • Redis Cloud (free 30MB) instead of local
  • Google Vision (free 1K pages/month) instead of Tesseract
  • Meilisearch Cloud if local instance is slow

2. Monitor Resource Usage

# Check disk space
df -h ~

# Check memory
free -h

# Check processes
ps aux | grep $(whoami)

3. Optimize Database

# Regular SQLite maintenance
cd /tmp/navidocs/server
/tmp/node -e "const db = require('better-sqlite3')('~/navidocs/db/navidocs.db'); db.pragma('optimize'); db.close();"

Cost Summary

Service Cost What You Get
StackCP Hosting $X/month Everything (already paying)
Redis Cloud $0 30MB free tier
Google Vision API $0 1,000 pages/month free
Total $X/month Full NaviDocs deployment

After free tier:

  • Redis: $0.20/GB/month ($6/month for 30GB)
  • Vision API: $1.50 per 1,000 pages

Support

  • StackCP: support@20i.com
  • NaviDocs: Check GitHub issues
  • This Guide: /home/setup/navidocs/docs/STACKCP_QUICKSTART.md

Next Steps

  1. Configure Backups: ~/navidocs/db/navidocs.db
  2. Setup Monitoring: Use StackCP's built-in monitoring
  3. Configure Domain: Point your domain to StackCP
  4. SSL Certificate: Enable Let's Encrypt in StackCP
  5. Test OCR: Upload handwritten documents to verify Google Vision

Deployment Time: ~30 minutes total Difficulty: 3/10 (straightforward with this guide) Performance: Good for small-medium workloads