# Environment Configuration Guide

This project supports multiple environment configurations for local development, development server, testing, and UAT environments.

## Environment Files

- `.env.example` - Template file with all available environment variables
- `.env.local` - Local development environment (default)
- `.env.dev` - Development server environment
- `.env.test` - Test/QA environment
- `.env.uat` - User Acceptance Testing environment

## Setup Instructions

1. **Copy the example file to create your environment file:**
   ```bash
   cp .env.example .env.local
   ```

2. **Update the API URLs and configuration in your chosen environment file** with actual server URLs.

3. **Commit only `.env.example` to version control** - all `.env.*` files are gitignored.

## Running the Application

### Development Servers

- **Dev Environment (Port 9501):**
  ```bash
  npm run dev
  ```

- **Test Environment (Port 9502):**
  ```bash
  npm run test
  ```

- **UAT Environment (Port 5176):**
  ```bash
  npm run uat
  ```

- **Local Development (Port 5174):**
  ```bash
  npm run dev:local
  ```

### Building for Production

- **Build for Dev:**
  ```bash
  npm run build
  ```

- **Build for Test:**
  ```bash
  npm run build:test
  ```

- **Build for UAT:**
  ```bash
  npm run build:uat
  ```

- **Build for Local:**
  ```bash
  npm run build:local
  ```

### Preview Production Build

- **Preview Dev Build:**
  ```bash
  npm run preview
  ```

- **Preview Test Build:**
  ```bash
  npm run preview:test
  ```

- **Preview UAT Build:**
  ```bash
  npm run preview:uat
  ```

- **Preview Local Build:**
  ```bash
  npm run preview:local
  ```

## Environment Variables

Each environment file contains these variables:

- `VITE_API_URL` - Backend API endpoint URL
- `VITE_ENV` - Environment name (local, dev, test, uat)
- `VITE_APP_NAME` - Application name/title

You can add more variables as needed. They should be prefixed with `VITE_` to be accessible in the browser.

## Accessing Environment Variables in Code

Access environment variables in your React components:

```typescript
const apiUrl = import.meta.env.VITE_API_URL
const environment = import.meta.env.VITE_ENV
const appName = import.meta.env.VITE_APP_NAME
```

Example in ApiClient.ts:
```typescript
const baseURL = import.meta.env.VITE_API_URL
```

## Development Ports

Each environment runs on a different port:

| Environment | Port  | Command       |
|------------|-------|---------------|
| Dev        | 9501  | `npm run dev` |
| Test       | 9502  | `npm run test`|
| UAT        | 5176  | `npm run uat` |
| Local      | 5174  | `npm run dev:local` |

## Notes

- All environment files except `.env.example` are gitignored
- Never commit sensitive API keys or credentials to version control
- Use `.env.example` as a template for new environment setup
- Vite automatically loads the correct `.env.*` file based on the mode flag