From b9d2e1fee6db89c5a2eef7f2297ab8e3f714c4b7 Mon Sep 17 00:00:00 2001 From: waseem khadri Date: Thu, 9 Jul 2026 11:08:54 +0530 Subject: [PATCH] feat: enhance environment configuration with multiple setups and update documentation --- .env | 11 ++++ .env.example | 5 ++ .gitignore | 7 +++ ENV_SETUP.md | 137 +++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 14 ++++- vite.config.ts | 39 +++++++++++--- 6 files changed, 205 insertions(+), 8 deletions(-) create mode 100644 .env.example create mode 100644 ENV_SETUP.md diff --git a/.env b/.env index 833dae8..baa8378 100644 --- a/.env +++ b/.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 diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..7efc5a9 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index a547bf3..c1f5a9c 100644 --- a/.gitignore +++ b/.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 diff --git a/ENV_SETUP.md b/ENV_SETUP.md new file mode 100644 index 0000000..f29d1cc --- /dev/null +++ b/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 diff --git a/package.json b/package.json index b733ef3..87f4a85 100644 --- a/package.json +++ b/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", diff --git a/vite.config.ts b/vite.config.ts index 0e729f6..baafdc3 100644 --- a/vite.config.ts +++ b/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({ - plugins: [ - react(), - tailwindcss() - ], - server: { - port: 5174, +export default defineConfig(({ mode }) => { + // Environment-specific configuration + const envConfig = { + local: { + port: 5174, + strictPort: false, + }, + 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), + }, } })