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:

   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:

   NGINX_MODE=prod
   

2. Start the production environment:

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

   docker compose up -d --build frontend