Yaltopia-Ticket-Admin/dev-docs/DEPLOYMENT.md

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: Vercel (Recommended for Quick Deploy)

1. Install Vercel CLI:

npm i -g vercel

2. Login to Vercel:

vercel login

3. Deploy:

vercel --prod

4. Set environment variables in Vercel dashboard:
   • Go to Project Settings → Environment Variables
   • Add VITE_API_URL with your production API URL

Option 2: Netlify

1. Install Netlify CLI:

npm i -g netlify-cli

2. Login:

netlify login

3. Deploy:

netlify deploy --prod

4. Set environment variables in Netlify dashboard

Option 3: Docker + Cloud Provider

1. Build Docker image:

docker build -t yaltopia-admin:latest .

2. Test locally:

docker run -p 8080:80 yaltopia-admin:latest

3. Push to container registry:

# 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 4: Traditional VPS (Ubuntu/Debian)

1. SSH into your server

2. Install Node.js and nginx:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs nginx

3. Clone repository:

git clone <your-repo-url>
cd yaltopia-ticket-admin

4. Install dependencies and build:

npm ci
npm run build:prod

5. Configure nginx:

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:

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.

For CD, add deployment step:

- name: Deploy to Vercel
  if: github.ref == 'refs/heads/main'
  run: |
    npm i -g vercel
    vercel --prod --token=${{ secrets.VERCEL_TOKEN }}    

Or for Netlify:

- name: Deploy to Netlify
  if: github.ref == 'refs/heads/main'
  run: |
    npm i -g netlify-cli
    netlify deploy --prod --auth=${{ secrets.NETLIFY_AUTH_TOKEN }} --site=${{ secrets.NETLIFY_SITE_ID }}    

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