feat: replace hardcoded ports/URLs with environment variables

- Add environment variable support for backend server configuration
  (BACKEND_HOST, BACKEND_PORT)
- Add environment variable support for sync microservice configuration
  (SYNC_MICROSERVICE_HOST, SYNC_MICROSERVICE_PORT, SYNC_MICROSERVICE_URL)
- Update frontend to use Vite environment variables with fallback defaults
  (VITE_BACKEND_URL, VITE_SYNC_MICROSERVICE_URL)
- Update .env.example with documentation for all new environment variables

This allows:
- Running multiple instances on the same machine
- Deploying to cloud platforms with dynamic ports
- Easy switching between dev/staging/production environments

Fixes #1134

Author: saakshigupta2002

.env.example

@@ -1,2 +1,36 @@
+# =============================================================================
+# PictoPy Environment Configuration
+# =============================================================================
+# Copy this file to .env and modify values as needed.
+# All variables have sensible defaults for local development.
+
+# -----------------------------------------------------------------------------
+# Backend Server Configuration
+# -----------------------------------------------------------------------------
+# Host and port for the main PictoPy backend server
+BACKEND_HOST=localhost
+BACKEND_PORT=52123
+
+# -----------------------------------------------------------------------------
+# Sync Microservice Configuration
+# -----------------------------------------------------------------------------
+# Host and port for the sync microservice
+SYNC_MICROSERVICE_HOST=localhost
+SYNC_MICROSERVICE_PORT=52124
+
+# Optional: Override the full URLs (if not set, constructed from host:port)
+# PRIMARY_BACKEND_URL=http://localhost:52123
+# SYNC_MICROSERVICE_URL=http://localhost:52124
+
+# -----------------------------------------------------------------------------
+# Frontend Configuration (Vite)
+# -----------------------------------------------------------------------------
+# These are used by the frontend during build/development
+VITE_BACKEND_URL=http://localhost:52123
+VITE_SYNC_MICROSERVICE_URL=http://localhost:52124
+
+# -----------------------------------------------------------------------------
+# Signing Keys (for Tauri updater)
+# -----------------------------------------------------------------------------
 private = dW50cnVzdGVkIGNvbW1lbnQ6IHJzaWduIGVuY3J5cHRlZCBzZWNyZXQga2V5ClJXUlRZMEl5TjRQaUpFRXRad0dDbkNpTHlVNFBOWmZCaDRRWGNDcDdHQ3c5a0hRSUE3NEFBQkFBQUFBQUFBQUFBQUlBQUFBQVhoT1pUY2xvak01d0ZKeVVYdlVnQnlGQXlkUFhuRkdBMEY0QmdYWCtXUCtvaDMvS2tNYnJHSytXcGluQytFQWxPYm1UbVZNdU85aU53aEdJT1IveE82LzB2K2swS0MyZlFybmt5SG51aEt3YlVmMWdDSHBkN1llelU2L0JKT1puVGZFc3liNXplRlk9Cg==
 public = dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDY1MDM5OUIzNDQ5MTNEOTMKUldTVFBaRkVzNWtEWlRxWWJCeXhtMTV6ZXZ3OUs0SXhzQzBreVRoekl5bjdXS3hkZlZzQ3VvTkgK

backend/app/config/settings.py

@@ -1,12 +1,21 @@
 from platformdirs import user_data_dir
 import os
 
+# Server Configuration
+BACKEND_HOST = os.getenv('BACKEND_HOST', 'localhost')
+BACKEND_PORT = int(os.getenv('BACKEND_PORT', '52123'))
+
+# Microservice Configuration
+SYNC_MICROSERVICE_HOST = os.getenv('SYNC_MICROSERVICE_HOST', 'localhost')
+SYNC_MICROSERVICE_PORT = int(os.getenv('SYNC_MICROSERVICE_PORT', '52124'))
+SYNC_MICROSERVICE_URL = os.getenv(
+    'SYNC_MICROSERVICE_URL',
+    f'http://{SYNC_MICROSERVICE_HOST}:{SYNC_MICROSERVICE_PORT}'
+)
+
 # Model Exports Path
 MODEL_EXPORTS_PATH = "app/models/ONNX_Exports"
 
-# Microservice URLs
-SYNC_MICROSERVICE_URL = "http://localhost:52124"
-
 CONFIDENCE_PERCENT = 0.6
 # Object Detection Models:
 SMALL_OBJ_DETECTION_MODEL = f"{MODEL_EXPORTS_PATH}/YOLOv11_Small.onnx"

backend/main.py

@@ -6,7 +6,12 @@
 import os
 import json
 
-from app.config.settings import DATABASE_PATH, THUMBNAIL_IMAGES_PATH
+from app.config.settings import (
+    DATABASE_PATH,
+    THUMBNAIL_IMAGES_PATH,
+    BACKEND_HOST,
+    BACKEND_PORT,
+)
 from uvicorn import Config, Server
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
@@ -77,7 +82,7 @@ async def lifespan(app: FastAPI):
         "url": "https://www.postman.com/aossie-pictopy/pictopy/overview",
     },
     servers=[
-        {"url": "http://localhost:52123", "description": "Local Development server"}
+        {"url": f"http://{BACKEND_HOST}:{BACKEND_PORT}", "description": "Local Development server"}
     ],
 )
 
@@ -148,8 +153,8 @@ async def root():
 
     config = Config(
         app=app,
-        host="localhost",
-        port=52123,
+        host=BACKEND_HOST,
+        port=BACKEND_PORT,
         log_level="info",
         log_config=None,  # This is crucial - disable Uvicorn's default logging config
     )

frontend/src/config/Backend.ts

@@ -1,2 +1,4 @@
-export const BACKEND_URL = 'http://localhost:52123';
-export const SYNC_MICROSERVICE_URL = 'http://localhost:52124';
+export const BACKEND_URL =
+  import.meta.env.VITE_BACKEND_URL || 'http://localhost:52123';
+export const SYNC_MICROSERVICE_URL =
+  import.meta.env.VITE_SYNC_MICROSERVICE_URL || 'http://localhost:52124';

sync-microservice/app/config/settings.py

@@ -1,10 +1,24 @@
 from platformdirs import user_data_dir
 import os
 
+# Backend Configuration
+BACKEND_HOST = os.getenv('BACKEND_HOST', 'localhost')
+BACKEND_PORT = int(os.getenv('BACKEND_PORT', '52123'))
+PRIMARY_BACKEND_URL = os.getenv(
+    'PRIMARY_BACKEND_URL',
+    f'http://{BACKEND_HOST}:{BACKEND_PORT}'
+)
+
+# Sync Microservice Configuration
+SYNC_MICROSERVICE_HOST = os.getenv('SYNC_MICROSERVICE_HOST', 'localhost')
+SYNC_MICROSERVICE_PORT = int(os.getenv('SYNC_MICROSERVICE_PORT', '52124'))
+SYNC_MICROSERVICE_URL = os.getenv(
+    'SYNC_MICROSERVICE_URL',
+    f'http://{SYNC_MICROSERVICE_HOST}:{SYNC_MICROSERVICE_PORT}'
+)
+
 # Model Exports Path
 MODEL_EXPORTS_PATH = "app/models/ONNX_Exports"
-PRIMARY_BACKEND_URL = "http://localhost:52123"
-SYNC_MICROSERVICE_URL = "http://localhost:52124"
 
 # Object Detection Models:
 SMALL_OBJ_DETECTION_MODEL = f"{MODEL_EXPORTS_PATH}/YOLOv11_Small.onnx"

sync-microservice/main.py

@@ -1,6 +1,10 @@
 import logging
 import os
-from app.config.settings import DATABASE_PATH
+from app.config.settings import (
+    DATABASE_PATH,
+    SYNC_MICROSERVICE_HOST,
+    SYNC_MICROSERVICE_PORT,
+)
 from fastapi import FastAPI
 from uvicorn import Config, Server
 from app.core.lifespan import lifespan
@@ -51,8 +55,8 @@
 
     config = Config(
         app=app,
-        host="localhost",
-        port=52124,
+        host=SYNC_MICROSERVICE_HOST,
+        port=SYNC_MICROSERVICE_PORT,
         log_level="info",
         log_config=None,  # Disable uvicorn's default logging config
     )