# Frontend Deployment Guide

## Overview
This guide explains how to deploy the CyberHawk frontend application and ensure all static assets (images, icons) are properly served.

## Issues Fixed
- **Static Asset Serving**: Updated nginx configuration to properly serve images and icons
- **Image Path Resolution**: Fixed `getImagePath` utility to use consistent absolute paths
- **Vite Configuration**: Updated build configuration for better production compatibility
- **Routing Issues**: Fixed blank page on refresh with enhanced nginx configuration and error boundaries
- **Authentication Flow**: Improved ProtectedRoute component with proper loading states

## Deployment Steps

### 1. Build the Application
```bash
cd frontend
npm install
npm run build
```

### 2. Docker Deployment
```bash
# Build the Docker image
docker build -t cyberhawk-frontend .

# Run the container
docker run -p 80:80 cyberhawk-frontend
```

### 3. Manual Deployment
If deploying without Docker:

1. Copy the `dist` folder contents to your web server
2. Ensure nginx configuration is updated with the provided `nginx.conf`
3. Restart nginx: `sudo systemctl restart nginx`

## Key Configuration Changes

### Nginx Configuration (`nginx.conf`)
- Added specific location blocks for `/image/` and `/assets/` paths
- Configured proper caching headers for static assets
- Enhanced SPA routing with proper `try_files` directive
- Added error page handling and security headers
- Enabled gzip compression for better performance

### Vite Configuration (`vite.config.js`)
- Changed base URL to `/` for consistent absolute paths
- Maintained asset optimization settings

### Image Path Utility (`src/lib/utils.js`)
- Updated to use absolute paths in both development and production
- Ensures consistent image serving regardless of deployment path

### Authentication & Routing (`src/components/ProtectedRoute.jsx`)
- Added loading states to prevent blank pages during authentication check
- Proper error handling with useEffect and timeout
- Graceful fallback for authentication issues

### Error Handling (`src/App.jsx` & `src/main.jsx`)
- Added error boundaries for better error recovery
- Suspense wrapper for improved loading experience
- User-friendly error messages and recovery options

## Verification

After deployment, verify that the following assets are accessible:
- Logo: `http://your-domain/image/pushpakAI-logo.svg`
- User icon: `http://your-domain/image/user-circle-icon.svg`
- Arrow icons: `http://your-domain/image/arrow-up.svg`, `http://your-domain/image/down-arrow-icon.svg`
- Back arrow: `http://your-domain/image/left-arrow-icon.svg`

## Troubleshooting

### Images Not Loading
1. Check nginx logs: `sudo tail -f /var/log/nginx/error.log`
2. Verify file permissions on the `image` directory
3. Ensure nginx configuration is properly loaded

### 404 Errors for Static Assets
1. Verify the `dist` folder contains the `image` directory
2. Check that nginx is serving from the correct root directory
3. Ensure location blocks in nginx.conf are properly configured

### React Router Issues
1. Verify the `try_files` directive in nginx.conf includes `/index.html`
2. Check that the React app is properly built and deployed
3. Test refresh functionality on all routes
4. Check browser console for JavaScript errors
5. Verify authentication flow works correctly

## Environment Variables

No environment variables are required for static asset serving, but ensure:
- `NODE_ENV=production` during build
- Proper base URL configuration in Vite

## Performance Optimization

The nginx configuration includes:
- 1-year cache headers for static assets
- Immutable cache control for better performance
- Proper MIME type handling

## Security Considerations

- Static assets are served with appropriate cache headers
- No sensitive information is exposed through static assets
- Consider implementing CSP headers for additional security
