# Deployment Guide

## Prerequisites

- Node.js 18+ and npm/yarn
- Backend API running on configured port (default: 3000)

## Development

```bash
cd frontend
npm install
npm run dev
```

The app will be available at `http://localhost:3001`

## Building for Production

```bash
npm run build
```

This creates an optimized production build in the `dist/` directory.

## Environment Variables

Create a `.env` file:

```env
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_NAME=DBIS Admin Console
VITE_REAL_TIME_UPDATE_INTERVAL=5000
```

For production, update `VITE_API_BASE_URL` to your production API URL.

## Production Deployment

### Option 1: Static Hosting (Recommended)

The build output is static files that can be served by any web server:

1. Build the application:
   ```bash
   npm run build
   ```

2. Deploy the `dist/` directory to:
   - **Nginx**: Copy `dist/` contents to `/var/www/html/`
   - **Apache**: Copy `dist/` contents to web root
   - **CDN**: Upload to S3/CloudFront, Azure Blob, etc.
   - **Vercel/Netlify**: Connect repository and deploy

### Option 2: Docker

Create a `Dockerfile`:

```dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

Build and run:
```bash
docker build -t dbis-admin-console .
docker run -p 80:80 dbis-admin-console
```

### Option 3: Serve with Node.js

Install `serve`:
```bash
npm install -g serve
```

Serve the build:
```bash
serve -s dist -l 3001
```

## Nginx Configuration

Example `nginx.conf`:

```nginx
server {
    listen 80;
    server_name admin.dbis.local;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API proxy (if needed)
    location /api {
        proxy_pass http://backend:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

## Environment-Specific Builds

### Development
```bash
npm run dev
```

### Staging
```bash
VITE_API_BASE_URL=https://staging-api.dbis.local npm run build
```

### Production
```bash
VITE_API_BASE_URL=https://api.dbis.local npm run build
```

## Health Checks

The application includes error boundaries and error handling. Monitor:
- API connectivity
- Authentication token validity
- Error rates in console/logs

## Performance Optimization

- Code splitting is enabled
- Assets are minified and optimized
- Lazy loading ready for routes
- Efficient data polling (10-15s intervals)

## Security Considerations

- JWT tokens stored in localStorage (consider httpOnly cookies for production)
- CORS configured on backend
- XSS protection via React
- CSRF protection via token validation
- Security headers in nginx config

## Monitoring

Recommended monitoring:
- Error tracking (Sentry, LogRocket)
- Performance monitoring (Web Vitals)
- API response times
- User session tracking

## Troubleshooting

### Build fails
- Check Node.js version (18+)
- Clear `node_modules` and reinstall
- Check for TypeScript errors

### API connection issues
- Verify `VITE_API_BASE_URL` is correct
- Check CORS settings on backend
- Verify network connectivity

### Authentication issues
- Check token expiration
- Verify backend auth endpoints
- Check browser console for errors