# Deployment Guide

## Pre-Deployment Checklist

### 1. Code Quality
- [ ] All TypeScript errors resolved
- [ ] ESLint warnings addressed
- [ ] Build completes successfully
- [ ] No console errors in production build

### 2. Environment Configuration
- [ ] `.env.production` configured with production API URL
- [ ] All required environment variables set
- [ ] API endpoints tested and accessible
- [ ] CORS configured on backend for production domain

### 3. Security
- [ ] HTTPS enabled (SSL/TLS certificate)
- [ ] Security headers configured (CSP, HSTS, X-Frame-Options)
- [ ] Authentication tokens secured (consider httpOnly cookies)
- [ ] API keys and secrets not exposed in client code
- [ ] Rate limiting configured on backend
- [ ] Input validation on all forms

### 4. Performance
- [ ] Code splitting implemented (check vite.config.ts)
- [ ] Images optimized
- [ ] Lazy loading for routes (if needed)
- [ ] Bundle size analyzed and optimized
- [ ] CDN configured for static assets (optional)

### 5. Monitoring & Error Tracking
- [ ] Error boundary implemented ✓
- [ ] Error tracking service configured (Sentry, LogRocket, etc.)
- [ ] Analytics configured (Google Analytics, Plausible, etc.)
- [ ] Logging strategy defined
- [ ] Uptime monitoring configured

### 6. Testing
- [ ] Manual testing completed on staging
- [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge)
- [ ] Mobile responsiveness verified
- [ ] Authentication flow tested
- [ ] API error handling tested

### 7. Documentation
- [ ] README.md updated ✓
- [ ] Environment variables documented ✓
- [ ] Deployment instructions clear ✓
- [ ] API documentation available

## Deployment Options

### Option 1: Docker + Cloud Provider (Recommended)

1. Build Docker image:
```bash
docker build -t yaltopia-admin:latest .
```

2. Test locally:
```bash
docker run -p 8080:80 yaltopia-admin:latest
```

3. Push to container registry:
```bash
# For Docker Hub
docker tag yaltopia-admin:latest username/yaltopia-admin:latest
docker push username/yaltopia-admin:latest

# For AWS ECR
aws ecr get-login-password --region region | docker login --username AWS --password-stdin account-id.dkr.ecr.region.amazonaws.com
docker tag yaltopia-admin:latest account-id.dkr.ecr.region.amazonaws.com/yaltopia-admin:latest
docker push account-id.dkr.ecr.region.amazonaws.com/yaltopia-admin:latest
```

4. Deploy to cloud:
   - AWS ECS/Fargate
   - Google Cloud Run
   - Azure Container Instances
   - DigitalOcean App Platform

### Option 2: Traditional VPS (Ubuntu/Debian)

1. SSH into your server

2. Install Node.js and nginx:
```bash
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs nginx
```

3. Clone repository:
```bash
git clone <your-repo-url>
cd yaltopia-ticket-admin
```

4. Install dependencies and build:
```bash
npm ci
npm run build:prod
```

5. Configure nginx:
```bash
sudo cp nginx.conf /etc/nginx/sites-available/yaltopia-admin
sudo ln -s /etc/nginx/sites-available/yaltopia-admin /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```

6. Copy build files:
```bash
sudo cp -r dist/* /var/www/html/
```

## Post-Deployment

### 1. Verification
- [ ] Application loads correctly
- [ ] All routes work (test deep links)
- [ ] API calls successful
- [ ] Authentication works
- [ ] No console errors
- [ ] Performance acceptable (Lighthouse score)

### 2. Monitoring Setup
- [ ] Error tracking active
- [ ] Analytics tracking
- [ ] Uptime monitoring configured
- [ ] Alert notifications set up

### 3. Backup & Rollback Plan
- [ ] Previous version tagged in git
- [ ] Rollback procedure documented
- [ ] Database backup (if applicable)

## Continuous Deployment

### GitHub Actions (Automated)

The `.github/workflows/ci.yml` file is configured for CI, and `.github/workflows/deploy.yml` builds production artifacts.

For automated deployment, you can extend the workflow to:

1. **Push Docker image to registry:**
```yaml
- name: Login to Docker Registry
  uses: docker/login-action@v3
  with:
    registry: ${{ secrets.DOCKER_REGISTRY }}
    username: ${{ secrets.DOCKER_USERNAME }}
    password: ${{ secrets.DOCKER_PASSWORD }}

- name: Build and push Docker image
  uses: docker/build-push-action@v5
  with:
    context: .
    push: true
    tags: |
      ${{ secrets.DOCKER_REGISTRY }}/yaltopia-admin:latest
      ${{ secrets.DOCKER_REGISTRY }}/yaltopia-admin:${{ github.sha }}
```

2. **Deploy to your server via SSH:**
```yaml
- name: Deploy to production server
  uses: appleboy/ssh-action@v1.0.0
  with:
    host: ${{ secrets.DEPLOY_HOST }}
    username: ${{ secrets.DEPLOY_USER }}
    key: ${{ secrets.DEPLOY_SSH_KEY }}
    script: |
      cd /opt/yaltopia-admin
      docker pull ${{ secrets.DOCKER_REGISTRY }}/yaltopia-admin:latest
      docker-compose down
      docker-compose up -d
```

## Troubleshooting

### Build Fails
- Check Node.js version (18+)
- Clear node_modules and reinstall: `rm -rf node_modules package-lock.json && npm install`
- Check for TypeScript errors: `npm run type-check`

### Blank Page After Deploy
- Check browser console for errors
- Verify API URL is correct
- Check nginx/server configuration for SPA routing
- Verify all environment variables are set

### API Calls Failing
- Check CORS configuration on backend
- Verify API URL in environment variables
- Check network tab in browser DevTools
- Verify authentication token handling

### Performance Issues
- Analyze bundle size: `npm run build -- --mode production`
- Check for large dependencies
- Implement code splitting
- Enable compression (gzip/brotli)
- Use CDN for static assets

## Security Hardening

### 1. Content Security Policy (CSP)

Add to nginx.conf or hosting platform headers:

```
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https://api.yourdomain.com;
```

### 2. Additional Security Headers

```
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()
```

### 3. Rate Limiting

Implement on backend and consider using Cloudflare or similar CDN with DDoS protection.

## Maintenance

### Regular Tasks
- [ ] Update dependencies monthly: `npm update`
- [ ] Security audit: `npm audit`
- [ ] Review error logs weekly
- [ ] Monitor performance metrics
- [ ] Backup configuration and data

### Updates
1. Test updates in development
2. Deploy to staging
3. Run full test suite
4. Deploy to production during low-traffic period
5. Monitor for issues

## Support

For issues or questions:
- Check logs in error tracking service
- Review browser console errors
- Check server logs
- Contact backend team for API issues