feat: enhance environment configuration with multiple setups and update documentation

.env

@@ -1 +1,12 @@
+# Default environment file - DO NOT commit sensitive data
+# Use environment-specific files instead:
+# - .env.local (Local Development)
+# - .env.dev (Development Server)
+# - .env.test (Test/QA Environment)
+# - .env.uat (UAT Environment)
+#
+# Run with: npm run dev:local | npm run dev:dev | npm run dev:test | npm run dev:uat
+
 VITE_API_URL=http://localhost:3001/api
+VITE_ENV=local
+VITE_APP_NAME=AeroResolve

.env.example

@@ -0,0 +1,5 @@
+# Example environment configuration
+# Copy this file to .env.local, .env.dev, .env.test, or .env.uat and update values
+
+VITE_API_URL=http://localhost:3001/api
+VITE_ENV=local

.gitignore

@@ -12,6 +12,13 @@ dist
 dist-ssr
 *.local
 
+# Environment files - keep .env.example in repo, ignore specific env files
+.env
+.env.local
+.env.dev
+.env.test
+.env.uat
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

ENV_SETUP.md

@@ -0,0 +1,137 @@
+# 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 (Local)
+
+- **Local Development (Port 5174):**
+  ```bash
+  npm run dev:local
+  ```
+  or simply:
+  ```bash
+  npm run dev
+  ```
+
+- **Dev Environment (Port 5174):**
+  ```bash
+  npm run dev:dev
+  ```
+
+- **Test Environment (Port 5175):**
+  ```bash
+  npm run dev:test
+  ```
+
+- **UAT Environment (Port 5176):**
+  ```bash
+  npm run dev:uat
+  ```
+
+### Building for Production
+
+- **Build for Local:**
+  ```bash
+  npm run build:local
+  ```
+
+- **Build for Dev:**
+  ```bash
+  npm run build:dev
+  ```
+
+- **Build for Test:**
+  ```bash
+  npm run build:test
+  ```
+
+- **Build for UAT:**
+  ```bash
+  npm run build:uat
+  ```
+
+### Preview Production Build
+
+- **Preview Local Build:**
+  ```bash
+  npm run preview:local
+  ```
+
+- **Preview Dev Build:**
+  ```bash
+  npm run preview:dev
+  ```
+
+- **Preview Test Build:**
+  ```bash
+  npm run preview:test
+  ```
+
+- **Preview UAT Build:**
+  ```bash
+  npm run preview:uat
+  ```
+
+## 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 to allow running multiple instances:
+
+| Environment | Port  |
+|------------|-------|
+| Local      | 5174  |
+| Dev        | 5174  |
+| Test       | 5175  |
+| UAT        | 5176  |
+
+## 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

package.json

@@ -5,9 +5,21 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:local": "vite --mode local",
+    "dev:dev": "vite --mode dev",
+    "dev:test": "vite --mode test",
+    "dev:uat": "vite --mode uat",
     "build": "tsc -b && vite build",
+    "build:local": "tsc -b && vite build --mode local",
+    "build:dev": "tsc -b && vite build --mode dev",
+    "build:test": "tsc -b && vite build --mode test",
+    "build:uat": "tsc -b && vite build --mode uat",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "preview:local": "vite preview --mode local",
+    "preview:dev": "vite preview --mode dev",
+    "preview:test": "vite preview --mode test",
+    "preview:uat": "vite preview --mode uat"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.0",

vite.config.ts

@@ -3,12 +3,37 @@ import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [
+  // Environment-specific configuration
-    react(),
+  const envConfig = {
-    tailwindcss()
+    local: {
-  ],
+      port: 5174,
-  server: {
+      strictPort: false,
-    port: 5174,
+    },
+    dev: {
+      port: 9501,
+      strictPort: false,
+    },
+    test: {
+      port: 9502,
+      strictPort: false,
+    },
+    uat: {
+      port: 5176,
+      strictPort: false,
+    },
+  }
+
+  const serverConfig = envConfig[mode as keyof typeof envConfig] || envConfig.local
+
+  return {
+    plugins: [
+      react(),
+      tailwindcss()
+    ],
+    server: serverConfig,
+    define: {
+      __APP_ENV__: JSON.stringify(mode),
+    },
   }
 })