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:
3
.env.production
Normal file
3
.env.production
Normal 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
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import type { ReportResponseDTO } from '@/types';
|
import type { ReportResponseDTO } from '@/types';
|
||||||
import { format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
|
import { getApiBaseUrl } from '@/services/api';
|
||||||
|
|
||||||
interface ReportDetailModalProps {
|
interface ReportDetailModalProps {
|
||||||
report: ReportResponseDTO;
|
report: ReportResponseDTO;
|
||||||
@@ -128,7 +129,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
|
|||||||
src={
|
src={
|
||||||
report.photoUrls[currentPhotoIndex].startsWith('http')
|
report.photoUrls[currentPhotoIndex].startsWith('http')
|
||||||
? report.photoUrls[currentPhotoIndex]
|
? report.photoUrls[currentPhotoIndex]
|
||||||
: `http://localhost:3005${report.photoUrls[currentPhotoIndex]}`
|
: `${getApiBaseUrl()}${report.photoUrls[currentPhotoIndex]}`
|
||||||
}
|
}
|
||||||
alt={`Report photo ${currentPhotoIndex + 1}`}
|
alt={`Report photo ${currentPhotoIndex + 1}`}
|
||||||
className="w-full h-80 object-contain"
|
className="w-full h-80 object-contain"
|
||||||
|
|||||||
@@ -120,7 +120,7 @@ class AnalyticsService {
|
|||||||
|
|
||||||
const queryString = params.toString();
|
const queryString = params.toString();
|
||||||
const response = await fetch(
|
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',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
|
|||||||
@@ -1,7 +1,12 @@
|
|||||||
// API service configuration and base client
|
// API service configuration and base client
|
||||||
import { useAuth } from '@clerk/clerk-react';
|
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 {
|
export interface ApiError {
|
||||||
code: string;
|
code: string;
|
||||||
|
|||||||
Reference in New Issue
Block a user