134 lines
2.8 KiB
Markdown
134 lines
2.8 KiB
Markdown
# 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
|