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:

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

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:

NEXT_PUBLIC_HF_API_URL=https://your-space-name.hf.space/api/predict

3. Netlify Configuration

1. Create netlify.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:

cd frontend
npm install

2. Test build:

npm run build

6. Netlify Deployment

1. Install Netlify CLI:

npm install -g netlify-cli

2. Initialize Netlify:

netlify init

3. Deploy:

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