Pennyzo-Frontend-corrected/API_ENDPOINT_FIXES.md

API Endpoint Configuration Fixes

This document summarizes the fixes applied to correctly configure API endpoints and URLs throughout the Pennyzo Web application.

Issues Identified

Based on the provided configuration showing localhost:8000 settings and CORS origins, the following issues were identified and fixed:

1. Hardcoded Production URLs: All API services were using hardcoded production URLs
2. No Environment-Based Configuration: No support for development vs production environments
3. Missing Environment Variables: No .env configuration for different environments
4. Inconsistent API Endpoints: Different files using different base URLs

Fixes Applied

1. Environment-Aware Configuration (src/config.ts)

Before:

export const API_BASE_URL = "https://api.pennyzo.com/api/v1/general";

After:

// Environment detection
const isDevelopment = import.meta.env.DEV;
const isProduction = import.meta.env.PROD;

// API Base URL configuration
export const API_BASE_URL =
  import.meta.env.VITE_API_BASE_URL ||
  (isDevelopment
    ? "http://localhost:8000"
    : "https://api.pennyzo.com/api/v1/general");

// API Configuration
export const API_CONFIG = {
  BASE_URL: API_BASE_URL,
  TIMEOUT: 30000,
  RETRY_ATTEMPTS: 3,
  DEVELOPMENT_PORT: 8000,
  PRODUCTION_URL: "https://api.pennyzo.com/api/v1/general",
};

2. Updated PennyzoApiService (src/services/PennyzoApiService.ts)

Changes:

• Now imports and uses API_CONFIG from config file
• Automatically detects environment and uses appropriate URL
• Added configurable timeout settings

import { API_CONFIG } from "../config";

// In constructor:
this.apiClient = axios.create({
  baseURL: API_CONFIG.BASE_URL,
  timeout: API_CONFIG.TIMEOUT,
  // ...
});

3. Updated API Status Checker Scripts

Both scripts now use environment-based URLs:

const BASE_URL =
  process.env.API_BASE_URL ||
  process.env.VITE_API_BASE_URL ||
  (process.env.NODE_ENV === "production"
    ? "https://api.pennyzo.com/api/v1/general"
    : "http://localhost:8000");

4. Environment Configuration Files

Created .env (development default):

VITE_API_BASE_URL=http://localhost:8000
NODE_ENV=development
DEBUG=true
LOG_LEVEL=INFO

Updated .env.example:

# Development (default)
VITE_API_BASE_URL=http://localhost:8000

# Production
# VITE_API_BASE_URL=https://api.pennyzo.com/api/v1/general

NODE_ENV=development
DEBUG=true
LOG_LEVEL=INFO

5. TypeScript Environment Definitions

Created src/vite-env.d.ts:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string;
  readonly MODE: string;
  readonly DEV: boolean;
  readonly PROD: boolean;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

6. Environment Management Script (scripts/set-env.ps1)

Features:

• Switch between development and production environments
• Automatically configure appropriate API URLs
• Show current configuration
• Validate environment selections

Usage:

npm run env:dev    # Set localhost:8000
npm run env:prod   # Set api.pennyzo.com
npm run env:show   # Show current config

7. Updated npm Scripts (package.json)

Added environment management scripts:

{
  "env:dev": "powershell -ExecutionPolicy Bypass -File scripts/set-env.ps1 dev",
  "env:prod": "powershell -ExecutionPolicy Bypass -File scripts/set-env.ps1 prod",
  "env:show": "powershell -ExecutionPolicy Bypass -File scripts/set-env.ps1 -Show"
}

URL Mappings

Environment	API Base URL	Usage
Development	http://localhost:8000	Local development server
Production	https://api.pennyzo.com/api/v1/general	Production API

CORS Configuration Alignment

The configuration now aligns with the CORS settings shown in the attachment:

Allowed Origins (Development):

• http://localhost:3000 (React default)
• http://127.0.0.1:3000
• http://localhost:5173 (Vite default)
• http://127.0.0.1:5173

Trusted Hosts:

• localhost
• 127.0.0.1

Benefits of the Fixes

1. Environment Separation: Clear distinction between dev and prod environments
2. Easy Configuration: Simple npm scripts to switch environments
3. Consistent URLs: All services use the same configuration source
4. Development Friendly: Defaults to localhost for development
5. Type Safety: TypeScript definitions for environment variables
6. Documentation: Clear documentation of all endpoints and configurations

Usage Instructions

For Development

# Set development environment
npm run env:dev

# Start development server
npm run dev

# Test API connectivity
npm run api:check

For Production

# Set production environment
npm run env:prod

# Build for production
npm run build

# Test production API
npm run api:check

Checking Current Configuration

npm run env:show

All API services, status checkers, and the main application now use environment-aware configuration and will automatically connect to the appropriate backend server based on the current environment setting.