scriptshare-cursor-clone/DEPLOYMENT.md

# 🚀 ScriptShare - Platform Deployment Guide

## Overview

ScriptShare is a modern React application with a Node.js API backend, designed to work seamlessly with any deployment platform including **Vercel**, **Coolify**, **DigitalOcean App Platform**, **Railway**, **Render**, and others.

## 📦 Application Structure

### Frontend (React + Vite)
- **Dockerfile**: `Dockerfile` 
- **Build**: Vite-based React application
- **Output**: Static files served by Nginx
- **Port**: 80

### Backend API (Node.js + Express)
- **Dockerfile**: `Dockerfile.api`
- **Runtime**: Node.js 18 with TypeScript
- **Port**: 3000
- **Health Check**: `/api/health`

## 🔧 Deployment Options

### Option 1: Vercel (Recommended for Frontend)

**Frontend Deployment:**
1. Connect your repository to Vercel
2. Set build command: `npm run build`
3. Set output directory: `dist`
4. Configure environment variables:
   ```
   VITE_APP_NAME=ScriptShare
   VITE_APP_URL=https://your-domain.vercel.app
   VITE_ANALYTICS_ENABLED=true
   ```

**API Deployment:**
- Deploy API separately to platforms like Railway, Render, or DigitalOcean
- Or use Vercel Functions (requires code modification)

### Option 2: Coolify (Full Stack)

**Deploy both frontend and API:**
1. Create application from Git repository
2. **Frontend**: 
   - Use `Dockerfile` 
   - Port: 80
3. **API**: 
   - Use `Dockerfile.api`
   - Port: 3000
4. Configure environment variables

### Option 3: DigitalOcean App Platform

Create `app.yaml`:
```yaml
name: scriptshare
services:
- name: frontend
  source_dir: /
  dockerfile_path: Dockerfile
  github:
    repo: your-username/scriptshare-cursor
    branch: main
  http_port: 80
  routes:
  - path: /
- name: api
  source_dir: /
  dockerfile_path: Dockerfile.api
  github:
    repo: your-username/scriptshare-cursor
    branch: main
  http_port: 3000
  routes:
  - path: /api
  envs:
  - key: NODE_ENV
    value: production
  - key: DATABASE_URL
    value: ${DATABASE_URL}
databases:
- name: scriptshare-db
  engine: MYSQL
  version: "8"
```

### Option 4: Railway

1. **Frontend**: Connect repo, Railway auto-detects Dockerfile
2. **API**: Deploy from same repo using `Dockerfile.api`
3. **Database**: Add MySQL service
4. Configure environment variables

### Option 5: Render

1. **Frontend**: 
   - Static Site
   - Build Command: `npm run build`
   - Publish Directory: `dist`
2. **API**: 
   - Web Service
   - Docker build using `Dockerfile.api`
3. **Database**: Add MySQL database

## 🏗️ Build Commands

### Frontend
```bash
# Install dependencies
npm install

# Build for production
npm run build

# Preview build
npm run preview
```

### API
```bash
# Install dependencies
npm install

# Build TypeScript
npm run build:api

# Start API server
npm run start:api
```

## 🔐 Environment Variables

### Frontend (Build-time)
- `VITE_APP_NAME` - Application name
- `VITE_APP_URL` - Frontend URL
- `VITE_ANALYTICS_ENABLED` - Enable analytics (true/false)

### API (Runtime)
- `NODE_ENV` - Environment (production/development)
- `PORT` - Server port (default: 3000)
- `DATABASE_URL` - MySQL connection string
- `JWT_SECRET` - JWT secret key
- `CORS_ORIGIN` - Allowed CORS origins

## 🗄️ Database Setup

### MySQL Connection String Format:
```
DATABASE_URL=mysql://username:password@host:port/database
```

### Required Tables:
The application uses Drizzle ORM. Run migrations after deployment:
```bash
npm run db:migrate
```

## 🔍 Health Checks

### Frontend Health Check:
```
GET /health
```

### API Health Check:
```
GET /api/health
```

## 📝 Platform-Specific Notes

### Vercel
- Frontend deploys automatically
- Use Vercel Functions for API (requires modification)
- Environment variables in Vercel dashboard

### Coolify
- Supports full Docker deployment
- Easy environment variable management
- Built-in SSL and domain management

### DigitalOcean App Platform
- Use `app.yaml` for configuration
- Automatic HTTPS
- Managed database available

### Railway
- Auto-deployment from Git
- Environment variables in dashboard
- Add-on database services

### Render
- Separate frontend (static) and backend (web service)
- Auto-deployment from Git
- Environment variables in dashboard

## 🐳 Docker Commands

### Build Frontend:
```bash
docker build -t scriptshare-frontend .
docker run -p 3000:80 scriptshare-frontend
```

### Build API:
```bash
docker build -f Dockerfile.api -t scriptshare-api .
docker run -p 3001:3000 scriptshare-api
```

### Local Development:
```bash
docker-compose up
```

## 🔧 Local Development

### Frontend:
```bash
npm run dev
```

### API:
```bash
npm run build:api
npm run start:api
```

### Database:
```bash
npm run db:studio  # Drizzle Studio
npm run db:migrate # Run migrations
```

## 🚀 Quick Deploy Examples

### Deploy to Vercel (Frontend):
```bash
vercel --prod
```

### Deploy to Railway:
```bash
railway deploy
```

### Deploy to Render:
Connect GitHub repository in Render dashboard

## 📞 Support

- **Documentation**: Check platform-specific documentation
- **Environment**: Ensure all required environment variables are set
- **Health Checks**: Monitor `/health` and `/api/health` endpoints
- **Logs**: Check platform logs for deployment issues

---

**Your ScriptShare application is ready for deployment on any modern platform! 🎉**

Choose the platform that best fits your needs - from simple static hosting to full-stack container deployments.