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: Docker + Cloud Provider (Recommended)

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 2: 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, and .github/workflows/deploy.yml builds production artifacts.

For automated deployment, you can extend the workflow to:

1. Push Docker image to registry:

- 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:

- 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