Spaces:
Sleeping
Sleeping
File size: 4,426 Bytes
01f0120 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
# 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 |