# Environment Setup Guide

## API Configuration

The frontend connects to the backend API. You can configure the API URL using environment variables for different environments.

### Development API (Default)

**API Endpoint**: `https://api.madibengwebsite.kitsonomouscorp.co.za/api`

This is the **development** API endpoint configured as the default in the application.

### Setting Up Environment Variables

The app uses different environment files for different scenarios:

#### 1. Development Environment (Default)

**File**: `.env.development`

```env
# Development API (Remote)
NEXT_PUBLIC_API_URL=https://api.madibengwebsite.kitsonomouscorp.co.za/api
```

This file is already configured and will be used when you run `npm run dev`.

#### 2. Local Backend Development

**File**: `.env.local` (create this if running backend locally)

```env
# Local Backend API
NEXT_PUBLIC_API_URL=http://localhost:3039/api
```

This overrides all other environment files and is useful when developing the backend locally.

#### 3. Production Environment

**File**: `.env.production` (create for production builds)

```env
# Production API
NEXT_PUBLIC_API_URL=https://api.madibengwebsite.kitsonomouscorp.co.za/api
```

This will be used when you run `npm run build` and deploy to production.

### Environment Variables Reference

| Variable | Description | Default (Development) |
|----------|-------------|-----------------------|
| `NEXT_PUBLIC_API_URL` | Backend API base URL | `https://api.madibengwebsite.kitsonomouscorp.co.za/api` |

### Environment Priority

Next.js loads environment files in this order (later files override earlier ones):

1. `.env` - All environments (base)
2. `.env.development` or `.env.production` - Specific to NODE_ENV
3. `.env.local` - Local overrides (not committed to git)
4. `.env.development.local` or `.env.production.local` - Environment-specific local overrides

### Files That Use API Configuration

The following files have been configured to use the API endpoint:

#### Core API Client
- `src/lib/api.ts` - Main API client (Axios)
- `src/config/api.ts` - Centralized API configuration

#### Admin Portal
- `src/app/admin/page.tsx` - Login page
- `src/app/admin/users/page.tsx` - User management
- `src/app/admin/news-articles/page.tsx` - News articles management

All API calls will automatically use the configured endpoint.

### Switching Between Environments

#### Current Setup:

| Environment | File | API URL | Command |
|-------------|------|---------|---------|
| **Development** (Remote API) | `.env.development` | `https://api.madibengwebsite.kitsonomouscorp.co.za/api` | `npm run dev` |
| **Local Backend** | `.env.local` | `http://localhost:3039/api` | `npm run dev` |
| **Production** | `.env.production` | Your production API URL | `npm run build && npm start` |

#### Switching Process:

**To use remote development API** (default):
```bash
# Already configured in .env.development
npm run dev
```

**To use local backend**:
1. Create `.env.local`:
```bash
echo "NEXT_PUBLIC_API_URL=http://localhost:3039/api" > .env.local
```
2. Run dev server:
```bash
npm run dev
```

**To prepare for production**:
1. Create `.env.production`:
```bash
echo "NEXT_PUBLIC_API_URL=https://api.madibengwebsite.kitsonomouscorp.co.za/api" > .env.production
```
2. Build and deploy:
```bash
npm run build
npm start
```

#### Method 2: Manual Configuration

If no environment variable is set, the app defaults to:
```
https://api.madibengwebsite.kitsonomouscorp.co.za/api
```

### Verification

To verify your API connection:

1. **Start the frontend**:
```bash
npm run dev
```

2. **Check the console** for API requests

3. **Test the admin login** at `http://localhost:3040/admin`

### Troubleshooting

#### CORS Errors

If you see CORS errors, ensure:
- Backend has CORS enabled for your frontend domain
- API URL is correct (https vs http)

#### API Not Responding

Check:
- Backend server is running
- API endpoint is accessible
- No firewall blocking requests
- SSL certificate is valid (for https)

#### Authentication Issues

Ensure:
- Backend API is running on the configured URL
- JWT tokens are being stored correctly
- Token is included in Authorization header

### Backend Configuration

The backend should be configured to accept requests from:
- `http://localhost:3040` (development)
- Your production frontend domain

Check `backend/server.js` for CORS configuration.

### Production Deployment

When deploying to production:

1. Set `NEXT_PUBLIC_API_URL` as an environment variable in your hosting platform
2. Ensure HTTPS is enabled
3. Configure CORS on backend for production domain
4. Test all API endpoints after deployment

### Need Help?

- Check backend is running: Visit `https://api.madibengwebsite.kitsonomouscorp.co.za/api/health`
- Review backend logs for errors
- Contact IT support: it@madibeng.gov.za