From 38947ccc200b7eaf396d3db40ffd9999596ad9b2 Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Sun, 2 Aug 2026 15:49:09 +0200
Subject: [PATCH] Voeg VITE_API_BASE_URL toe voor lokale API-calls naar een
 losse backend

Lokaal (.env.local, niet gecommit) kan VITE_API_BASE_URL op
https://localhost:7223 gezet worden zodat /api/v1/... calls naar een
lokaal draaiende backend gaan i.p.v. hetzelfde origin. Op test/productie
blijft de variabele ongezet, dus blijven calls relatief zoals voorheen.
---
 .env.example                                           |  5 +++++
 .../landing/__tests__/PackagesSection.test.tsx         |  9 ++++++++-
 src/features/landing/hooks/usePackagesQuery.ts         | 10 ++++++++--
 src/vite-env.d.ts                                      |  2 ++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index 5459364..dbcfd70 100644
--- a/.env.example
+++ b/.env.example
@@ -15,3 +15,8 @@ VITE_SENTRY_DSN=
 # script sowieso nooit geladen, ongeacht deze waarden (zie UmamiAnalytics.tsx).
 VITE_UMAMI_SCRIPT_URL=https://analytics.slpsoftware.nl/script.js
 VITE_UMAMI_WEBSITE_ID=
+
+# API base URL override, alleen voor lokale development met een lokaal draaiende backend.
+# Laat leeg/weg op test en productie: dan blijven API-calls relatief (`/api/v1/...`),
+# zodat ze resolven tegen hetzelfde domein als de site (test.slpsoftware.nl / slpsoftware.nl).
+VITE_API_BASE_URL=https://localhost:7223
diff --git a/src/features/landing/__tests__/PackagesSection.test.tsx b/src/features/landing/__tests__/PackagesSection.test.tsx
index 2d146dd..04ba12c 100644
--- a/src/features/landing/__tests__/PackagesSection.test.tsx
+++ b/src/features/landing/__tests__/PackagesSection.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { PackagesSection } from '../components/PackagesSection';
 import { packages } from '../data/content';
@@ -23,8 +23,15 @@ function mockFetchOnce(response: Response) {
 }
 
 describe('PackagesSection', () => {
+  beforeEach(() => {
+    // Force a deterministic relative URL regardless of the developer's local
+    // .env.local (VITE_API_BASE_URL is only meant to override this outside tests).
+    vi.stubEnv('VITE_API_BASE_URL', '');
+  });
+
   afterEach(() => {
     vi.unstubAllGlobals();
+    vi.unstubAllEnvs();
   });
 
   it('fetches packages from /api/v1/offerings and renders one PackageCard per package', async () => {
diff --git a/src/features/landing/hooks/usePackagesQuery.ts b/src/features/landing/hooks/usePackagesQuery.ts
index 1d32f7f..cd58f76 100644
--- a/src/features/landing/hooks/usePackagesQuery.ts
+++ b/src/features/landing/hooks/usePackagesQuery.ts
@@ -5,10 +5,16 @@ import type { PackageCardData } from '../data/content';
 // (test.slpsoftware.nl / slpsoftware.nl) — see aidlc-docs/features/react-frontend/
 // construction/react-frontend-app/functional-design/packages-api-handoff.md
 // for the API contract this endpoint must implement.
-const OFFERINGS_ENDPOINT = '/api/v1/offerings';
+// VITE_API_BASE_URL is only set locally (.env.local, e.g. https://localhost:7223) to
+// point at a locally running backend; on test/production it's unset, so the path stays
+// relative to whichever origin served the app. Read inside the function (not as a
+// module-level constant) so tests can stub it per-case.
+function offeringsEndpoint() {
+  return `${import.meta.env.VITE_API_BASE_URL ?? ''}/api/v1/offerings`;
+}
 
 async function fetchPackages(): Promise<PackageCardData[]> {
-  const response = await fetch(OFFERINGS_ENDPOINT);
+  const response = await fetch(offeringsEndpoint());
   if (!response.ok) {
     throw new Error(`Failed to fetch packages: ${response.status} ${response.statusText}`);
   }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 3810bc0..34514da 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -9,6 +9,8 @@ interface ImportMetaEnv {
   readonly VITE_SENTRY_DSN?: string;
   /** Build-time deployment environment tag ('test' | 'production' | undefined). Used to hide dev/test-only UI (e.g. SentryTestButton) from production builds. */
   readonly VITE_APP_ENV?: string;
+  /** API base URL override for local development (e.g. https://localhost:7223). Leave unset on test/production so API calls stay relative to `/api/v1/...` on the same origin. */
+  readonly VITE_API_BASE_URL?: string;
 }
 
 interface ImportMeta {
-- 
2.39.5