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>
6.3 KiB
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
- Configure Backups:
~/navidocs/db/navidocs.db - Setup Monitoring: Use StackCP's built-in monitoring
- Configure Domain: Point your domain to StackCP
- SSL Certificate: Enable Let's Encrypt in StackCP
- 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