# Deployment Guide

## Pre-Deployment Checklist

### Environment Variables
- [ ] Copy `.env.example` to `.env.local` or `.env.production`
- [ ] Set `VITE_ETHERSCAN_API_KEY` (get from https://etherscan.io/apis)
- [ ] Set `VITE_CHAIN_138_RPC` to your Chain 138 RPC endpoint
- [ ] Set `VITE_SAFE_SERVICE_URL` if using Safe SDK features
- [ ] Set `VITE_SENTRY_DSN` if using error tracking
- [ ] Set `VITE_WALLETCONNECT_PROJECT_ID` if using WalletConnect

### Build Configuration
- [ ] Run `pnpm run build` successfully
- [ ] Verify TypeScript compilation (0 errors)
- [ ] Check bundle size and optimize if needed
- [ ] Test production build locally: `pnpm run preview`

### Security
- [ ] Verify CSP headers in `public/_headers`
- [ ] Enable HSTS if using HTTPS
- [ ] Review and update security headers
- [ ] Audit dependencies: `npm audit`
- [ ] Update vulnerable packages if any

### Testing
- [ ] Run test suite: `pnpm run test`
- [ ] Check test coverage: `pnpm run test:coverage`
- [ ] Manually test critical admin functions
- [ ] Test on different browsers (Chrome, Firefox, Safari)

## Deployment Steps

### 1. Build for Production

```bash
pnpm run build
```

This will:
- Compile TypeScript
- Bundle assets with Vite
- Output to `dist/` directory

### 2. Deploy to Hosting Platform

#### Vercel/Netlify
The `public/_headers` file will automatically configure security headers.

1. Connect your repository
2. Set environment variables in platform dashboard
3. Build command: `pnpm run build`
4. Output directory: `dist`
5. Install command: `pnpm install` (if needed)
6. Deploy

#### Custom Server
1. Copy `dist/` contents to your web server
2. Configure web server to:
   - Serve `index.html` for all routes (SPA routing)
   - Apply security headers from `public/_headers`
   - Enable gzip compression
   - Set appropriate cache headers

### 3. Post-Deployment Verification

- [ ] Verify admin panel loads correctly
- [ ] Test wallet connection
- [ ] Verify contract interactions work
- [ ] Check real-time monitoring (if enabled)
- [ ] Test error boundaries
- [ ] Verify mobile responsiveness
- [ ] Check browser console for errors

## Environment-Specific Configuration

### Development
```env
VITE_ENV=development
VITE_ETHERSCAN_API_KEY=YourApiKeyToken
VITE_CHAIN_138_RPC=http://192.168.11.250:8545
```

### Staging
```env
VITE_ENV=staging
VITE_ETHERSCAN_API_KEY=YourStagingApiKey
VITE_CHAIN_138_RPC=https://staging-rpc.example.com
```

### Production
```env
VITE_ENV=production
VITE_ETHERSCAN_API_KEY=YourProductionApiKey
VITE_CHAIN_138_RPC=https://production-rpc.example.com
VITE_SENTRY_DSN=your_sentry_dsn
```

## Monitoring and Maintenance

### Recommended Monitoring
- Error tracking (Sentry)
- Performance monitoring
- User analytics
- Uptime monitoring

### Regular Maintenance
- Update dependencies monthly
- Review audit logs weekly
- Monitor gas prices
- Check contract states regularly

---

**Last Updated**: 2025-01-22