docs/implementation-plan/netlify-frontend-deployment.md

# Netlify Frontend Deployment with Hugging Face API Integration

## Background and Motivation
The Sri Lankan Clinical Assistant's frontend needs to be deployed to Netlify while maintaining connection to our existing Hugging Face Spaces backend. This will provide a production-ready, scalable frontend hosting solution with automatic deployments.

## Branch Name
`feat/netlify-deployment`

## Key Challenges and Analysis
1. Environment Variables Management
   - Need to securely handle Hugging Face API tokens
   - Configure CORS settings on Hugging Face Space
   - Set up environment variables in Netlify

2. API Integration
   - Create API client for Hugging Face Spaces
   - Handle API responses and errors
   - Implement proper error handling and loading states

3. Build Configuration
   - Configure Next.js for production build
   - Set up Netlify build settings
   - Ensure all dependencies are properly handled

## High-level Task Breakdown

### 1. Frontend API Configuration
- [ ] Create API client configuration
  - Success Criteria: API client properly configured with environment variables
  - Files to modify: `frontend/src/lib/api.ts`

### 2. Environment Setup
- [ ] Create environment variable files
  - Success Criteria: `.env.local` and `.env.production` files created with proper variables
  - Files to create:
    - `frontend/.env.local`
    - `frontend/.env.production`

### 3. Netlify Configuration
- [ ] Create Netlify configuration files
  - Success Criteria: Netlify build settings properly configured
  - Files to create:
    - `frontend/netlify.toml`

### 4. CORS Configuration
- [ ] Update Hugging Face Space CORS settings
  - Success Criteria: API accessible from Netlify domain
  - Location: Hugging Face Space settings

### 5. Frontend Build and Test
- [ ] Test production build locally
  - Success Criteria: `npm run build` succeeds without errors
  - Command: `cd frontend && npm run build`

### 6. Netlify Deployment
- [ ] Deploy to Netlify
  - Success Criteria: Site successfully deployed and accessible
  - Steps documented in deployment section

## Project Status Board
- [ ] Task 1: Frontend API Configuration
- [ ] Task 2: Environment Setup
- [ ] Task 3: Netlify Configuration
- [ ] Task 4: CORS Configuration
- [ ] Task 5: Frontend Build and Test
- [ ] Task 6: Netlify Deployment

## Detailed Implementation Steps

### 1. Frontend API Configuration
1. Create new API client file:
```typescript
// frontend/src/lib/api.ts
const HF_API_URL = process.env.NEXT_PUBLIC_HF_API_URL;
const HF_API_TOKEN = process.env.NEXT_PUBLIC_HF_API_TOKEN;

export async function queryAPI(input: string) {
  try {
    const response = await fetch(HF_API_URL!, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${HF_API_TOKEN}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ inputs: input }),
    });
    
    if (!response.ok) {
      throw new Error(`API error: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
}
```

### 2. Environment Setup
1. Create `.env.local`:
```env
NEXT_PUBLIC_HF_API_URL=https://your-space-name.hf.space/api/predict
NEXT_PUBLIC_HF_API_TOKEN=your_token_here
```

2. Create `.env.production`:
```env
NEXT_PUBLIC_HF_API_URL=https://your-space-name.hf.space/api/predict
```

### 3. Netlify Configuration
1. Create `netlify.toml`:
```toml
[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

[build.environment]
  NEXT_USE_NETLIFY_EDGE = "true"
```

### 4. CORS Configuration
1. Add Netlify domain to Hugging Face Space CORS settings:
   - Navigate to Space settings
   - Add `*.netlify.app` to allowed origins
   - Add your custom domain if using one

### 5. Frontend Build and Test
1. Install dependencies:
```bash
cd frontend
npm install
```

2. Test build:
```bash
npm run build
```

### 6. Netlify Deployment
1. Install Netlify CLI:
```bash
npm install -g netlify-cli
```

2. Initialize Netlify:
```bash
netlify init
```

3. Deploy:
```bash
netlify deploy --prod
```

## Executor's Feedback or Assistance Requests
- Note any build issues encountered
- Document any CORS-related problems
- Record deployment URLs and status

## Lessons Learned
- Document any issues encountered during deployment
- Note any optimizations needed
- Record successful configuration patterns