# Frontend Service

This directory contains the frontend service for ClassroomCopilot, including the web application and static file serving configuration.

## Directory Structure

```
frontend/
├── src/                     # Frontend application source code
└── Dockerfile.dev          # Development container configuration
└── Dockerfile.prod         # Production container configuration
```

## Configuration

### Environment Variables

The frontend service uses the following environment variables:

- `VITE_FRONTEND_SITE_URL`: The base URL of the frontend application
- `VITE_APP_NAME`: The name of the application
- `VITE_SUPER_ADMIN_EMAIL`: Email address of the super admin
- `VITE_DEV`: Development mode flag
- `VITE_SUPABASE_URL`: Supabase API URL
- `VITE_SUPABASE_ANON_KEY`: Supabase anonymous key
- `VITE_STRICT_MODE`: Strict mode flag
- Other environment variables are defined in the root `.env` file

### Server Configuration

The frontend container uses a simple nginx configuration that:
- Serves static files on port 80
- Handles SPA routing
- Manages caching headers
- Denies access to hidden files

SSL termination and domain routing are handled by Nginx Proxy Manager (NPM).

## Usage

### Development

1. Start the development environment:
   ```bash
   NGINX_MODE=dev ./init_macos_dev.sh up
   ```

2. Configure NPM:
   - Create a new proxy host for app.localhost
   - Forward to http://frontend:80
   - Enable SSL with a self-signed certificate
   - Add custom locations for SPA routing

3. Access the application:
   - HTTPS: https://app.localhost

### Production

1. Set environment variables:
   ```bash
   NGINX_MODE=prod
   ```

2. Start the production environment:
   ```bash
   ./init_macos_dev.sh up
   ```

3. Configure NPM:
   - Create a new proxy host for app.classroomcopilot.ai
   - Forward to http://frontend:80
   - Enable SSL with Cloudflare certificates
   - Add custom locations for SPA routing

## Security

- SSL termination handled by NPM
- Static file serving with proper caching headers
- Hidden file access denied
- SPA routing with fallback to index.html

## Troubleshooting

### Connection Issues
- Check NPM logs in the admin interface
- Verify frontend container is running
- Ensure NPM proxy host is properly configured
- Check network connectivity between NPM and frontend

### SPA Routing Issues
- Verify NPM custom locations are properly configured
- Check frontend container logs
- Ensure all routes fall back to index.html

## Maintenance

### Log Files
Located in `/var/log/nginx/`:
- `access.log`: General access logs
- `error.log`: Error logs

### Configuration Updates
1. Modify Dockerfile.dev or Dockerfile.prod as needed
2. Rebuild and restart the container:
   ```bash
   docker compose up -d --build frontend
   ```