fix: Configure proper API URLs for production and development

- Add .env.production with production API URL (https://litter-api.psbailey.uk/api)
- Create getApiBaseUrl() helper function for static assets
- Update ReportDetailModal to use dynamic API URL
- Fix default API port to 3005 across all services
- Images will now load correctly in both dev and production
This commit is contained in:
2025-11-18 01:01:43 +00:00
parent 82521088c3
commit 4ac49d55e6
4 changed files with 12 additions and 3 deletions

3
.env.production Normal file
View File

@@ -0,0 +1,3 @@
# Production Environment Variables
VITE_API_BASE_URL=https://litter-api.psbailey.uk/api
VITE_CLERK_PUBLISHABLE_KEY=pk_live_Y2xlcmsubGl0dGVyc2NvdXRzLnBzYmFpbGV5LnVrJA

View File

@@ -2,6 +2,7 @@
import { useState } from 'react';
import type { ReportResponseDTO } from '@/types';
import { format } from 'date-fns';
import { getApiBaseUrl } from '@/services/api';
interface ReportDetailModalProps {
report: ReportResponseDTO;
@@ -128,7 +129,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
src={
report.photoUrls[currentPhotoIndex].startsWith('http')
? report.photoUrls[currentPhotoIndex]
: `http://localhost:3005${report.photoUrls[currentPhotoIndex]}`
: `${getApiBaseUrl()}${report.photoUrls[currentPhotoIndex]}`
}
alt={`Report photo ${currentPhotoIndex + 1}`}
className="w-full h-80 object-contain"

View File

@@ -120,7 +120,7 @@ class AnalyticsService {
const queryString = params.toString();
const response = await fetch(
`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api'}/analytics/export${queryString ? `?${queryString}` : ''}`,
`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api'}/analytics/export${queryString ? `?${queryString}` : ''}`,
{
method: 'GET',
headers: {

View File

@@ -1,7 +1,12 @@
// API service configuration and base client
import { useAuth } from '@clerk/clerk-react';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api';
// Export function to get the base URL without /api suffix for static assets
export const getApiBaseUrl = () => {
return (import.meta.env.VITE_API_BASE_URL || 'http://localhost:3005/api').replace('/api', '');
};
export interface ApiError {
code: string;