Merge pull request #4 from Zenfulcode/cross-origin-cache-invalidation

gustaavik · web-flow · commit db15b8bb2b0b · 2025-07-12T15:19:47.000+02:00
feat(cache): Implement comprehensive cache invalidation across admin and production environments
diff --git a/.dockerignore b/.dockerignore
@@ -50,6 +50,8 @@ Thumbs.db
 .git
 .gitignore
 
+.github
+
 # Docker
 Dockerfile
 .dockerignore
diff --git a/.env.example b/.env.example
@@ -8,6 +8,10 @@ API_BASE_URL_DEV=http://localhost:6091/api
 # Production API URL  
 API_BASE_URL_PROD=
 
+STORE_FRONT_URL=http://localhost:3000
+# Cache Invalidation Configuration
+CACHE_INVALIDATION_API_KEY=cache-secret-2024
+
 # Origin URL for API requests (important for CORS)
 ORIGIN=http://localhost:3000
 
diff --git a/README.md b/README.md
@@ -167,6 +167,68 @@ const newProduct = await commercify.createProduct({
 });
 ```
 
+## 🛍️ Setting Up a Store Front (Customer Shop)
+
+This project supports running a separate customer-facing storefront alongside the admin dashboard. The storefront is a SvelteKit app that fetches product, category, and order data from the Commercify API.
+
+### 1. Prerequisites
+- Ensure you have Docker and Docker Compose installed
+- The Commercify API backend must be running (see docker-compose.yml)
+
+### 2. Environment Configuration
+Create a `.env` file for your storefront (or use Docker Compose environment variables):
+
+```env
+NODE_ENV=production
+API_BASE_URL_PROD=http://commercify-api:6091
+CACHE_INVALIDATION_API_KEY=your-cache-secret
+ORIGIN=http://localhost:3000
+```
+
+### 3. Docker Compose Setup
+Add a service for your storefront in `docker-compose.yml`:
+
+```yaml
+  storefront-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '3000:3000'
+    environment:
+      - NODE_ENV=production
+      - ORIGIN=http://localhost:3000
+      - CACHE_INVALIDATION_API_KEY=your-cache-secret
+      - API_BASE_URL_PROD=http://commercify-api:6091
+    depends_on:
+      commercify-api:
+        condition: service_healthy
+      postgres:
+        condition: service_healthy
+    restart: unless-stopped
+    networks:
+      - hh-commercify-network
+```
+
+### 4. Running the Storefront
+
+Start all services:
+```bash
+docker-compose up -d
+```
+
+The storefront will be available at `http://localhost:3000`.
+
+### 5. Cache Invalidation
+
+When you update products or categories in the admin dashboard, cache invalidation requests are sent to the storefront (`storefront-app`) to ensure customers see fresh data immediately. Make sure the storefront implements the `/api/cache/invalidate` endpoint for this to work.
+
+### 6. Customizing the Storefront
+- Update branding, theme, and layout in the `src/routes` and `src/lib/components/ui` folders
+- Configure payment, shipping, and other integrations as needed
+
+---
+
 ## 🤝 Contributing
 
 1. Fork the repository
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -95,6 +95,8 @@ services:
       - HOST=0.0.0.0
       - API_BASE_URL_DEV=http://commercify-api:6091
       - API_BASE_URL_PROD=http://commercify-api:6091
+      - CACHE_INVALIDATION_API_KEY=${CACHE_INVALIDATION_API_KEY:-your-secret-key}
+      - STORE_FRONT_URL=${STORE_FRONT_URL:-http://localhost:3000}
     depends_on:
       - commercify-api
     restart: unless-stopped
diff --git a/src/lib/server/cache-coordination.ts b/src/lib/server/cache-coordination.ts
@@ -0,0 +1,89 @@
+/**
+ * Cache invalidation utility for coordinating cache clearing between applications
+ */
+
+import { env } from '$env/dynamic/private';
+
+const CACHE_API_KEY = env.CACHE_INVALIDATION_API_KEY || 'your-secret-key';
+
+const PRODUCTION_APP_URL = env.STORE_FRONT_URL || 'http://localhost:3000';
+
+interface CacheInvalidationRequest {
+	type: 'product' | 'category' | 'all';
+	id?: string | number;
+	apiKey: string;
+}
+
+/**
+ * Invalidates cache in the production application by calling its API endpoint
+ */
+export async function invalidateProductionCache(
+	type: 'product' | 'category' | 'all',
+	id?: string | number
+): Promise<void> {
+	try {
+		const requestData: CacheInvalidationRequest = {
+			type,
+			id,
+			apiKey: CACHE_API_KEY
+		};
+
+		console.log(`[Cache Coordination] Targeting storefront app: ${PRODUCTION_APP_URL}`);
+		console.log(`[Cache Coordination] Sending cache invalidation request: type=${type}, id=${id}`);
+
+		const response = await fetch(`${PRODUCTION_APP_URL}/api/cache/invalidate`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(requestData),
+			// Add timeout to prevent hanging
+			signal: AbortSignal.timeout(5000) // 5 second timeout
+		});
+
+		if (!response.ok) {
+			const error = await response.json().catch(() => ({ error: 'Unknown error' }));
+			console.error(
+				'[Cache Coordination] Failed to invalidate production cache:',
+				response.status,
+				error
+			);
+			return;
+		}
+
+		const result = await response.json();
+		console.log('[Cache Coordination] Production cache invalidation successful:', result);
+	} catch (error) {
+		if (error instanceof Error && error.name === 'TimeoutError') {
+			console.warn(
+				'[Cache Coordination] Timeout calling production cache invalidation API - production app may not be running'
+			);
+		} else if (error instanceof Error && error.message.includes('ECONNREFUSED')) {
+			console.warn('[Cache Coordination] Cannot connect to production app - it may not be running');
+		} else {
+			console.error('[Cache Coordination] Error calling production cache invalidation API:', error);
+		}
+		// Don't throw the error - cache invalidation should be non-blocking
+	}
+}
+
+/**
+ * Convenience method for invalidating product cache in production
+ */
+export async function invalidateProductionProductCache(id?: string | number): Promise<void> {
+	await invalidateProductionCache('product', id);
+}
+
+/**
+ * Convenience method for invalidating category cache in production
+ */
+export async function invalidateProductionCategoryCache(id?: string | number): Promise<void> {
+	await invalidateProductionCache('category', id);
+}
+
+/**
+ * Convenience method for invalidating all caches in production
+ */
+export async function invalidateAllProductionCaches(): Promise<void> {
+	await invalidateProductionCache('all');
+}
diff --git a/src/lib/server/commercify/api.ts b/src/lib/server/commercify/api.ts
@@ -153,7 +153,21 @@ export class CachedCommercifyApiClient {
 				};
 
 				const result = await this.client.products.update(id, requestData, productResponseMapper);
+
+				console.log(`[API] Product ${id} updated, triggering cache invalidation`);
+				console.log(`[API] isActive changed:`, data.isActive !== undefined);
+
+				// Comprehensive cache invalidation for product updates
+				// This is especially important when changing a product's active status
 				await CacheInvalidator.invalidateAllProductCaches(id);
+
+				// If the active status might have changed, also invalidate category caches
+				// since category product counts might be affected
+				if (data.isActive !== undefined) {
+					console.log(`[API] Active status change detected, clearing category caches`);
+					await CacheInvalidator.invalidateAllCategoryCaches();
+				}
+
 				return result;
 			},
 
diff --git a/src/lib/server/commercify/cache.ts b/src/lib/server/commercify/cache.ts
@@ -1,5 +1,5 @@
 import { dev } from '$app/environment';
-import { OrderCache, ProductCache } from '$lib/cache';
+import { OrderCache, ProductCache, CheckoutCache, Cache } from '$lib/cache';
 
 // Server-side cache implementation
 interface ServerCacheEntry<T> {
@@ -68,16 +68,31 @@ class ServerCache {
 	}
 
 	invalidate(key: string): void {
+		if (this.cache.has(key)) {
+			console.log(`[ServerCache] Invalidating cache key: ${key}`);
+		}
 		this.cache.delete(key);
 	}
 
 	invalidatePattern(pattern: string): void {
 		const regex = new RegExp(pattern);
+		const keysToDelete: string[] = [];
+
 		for (const key of this.cache.keys()) {
 			if (regex.test(key)) {
-				this.cache.delete(key);
+				keysToDelete.push(key);
 			}
 		}
+
+		if (keysToDelete.length > 0) {
+			console.log(
+				`[ServerCache] Invalidating ${keysToDelete.length} cache entries matching pattern: ${pattern}`
+			);
+			keysToDelete.forEach((key) => {
+				console.log(`[ServerCache] Deleting key: ${key}`);
+				this.cache.delete(key);
+			});
+		}
 	}
 
 	clear(): void {
@@ -243,6 +258,7 @@ export class CacheInvalidator {
 	 */
 	static async invalidateProduct(id: string | number): Promise<void> {
 		const productId = id.toString();
+		console.log(`[CacheInvalidator] Invalidating product cache for ID: ${productId}`);
 
 		// Client-side cache invalidation
 		ProductCache.invalidateProduct(productId);
@@ -255,6 +271,8 @@ export class CacheInvalidator {
 	 * Invalidates all product-related caches (lists, search results, etc.)
 	 */
 	static async invalidateProductLists(): Promise<void> {
+		console.log('[CacheInvalidator] Invalidating all product lists cache');
+
 		// Client-side cache invalidation
 		ProductCache.invalidateProducts();
 
@@ -266,6 +284,8 @@ export class CacheInvalidator {
 	 * Invalidates both individual product and product lists caches
 	 */
 	static async invalidateAllProductCaches(id?: string | number): Promise<void> {
+		console.log(`[CacheInvalidator] Invalidating ALL product caches${id ? ` for ID: ${id}` : ''}`);
+
 		if (id !== undefined) {
 			await this.invalidateProduct(id);
 		}
@@ -290,13 +310,33 @@ export class CacheInvalidator {
 	}
 
 	/**
-	 * Invalidates all order-related caches (lists, etc.)
+	 * Invalidates all order-related caches (lists, search results, etc.)
 	 */
 	static async invalidateOrderLists(): Promise<void> {
+		console.log('[CacheInvalidator] Invalidating all order lists cache');
+
+		// Client-side cache invalidation
+		OrderCache.clear();
+
 		// Server-side cache invalidation
 		serverCache.invalidatePattern('^orders:');
 	}
 
+	/**
+	 * Invalidates ALL caches - use with caution, this is a nuclear option
+	 */
+	static invalidateAllCaches(): void {
+		console.log('[CacheInvalidator] Clearing ALL caches (nuclear option)');
+
+		// Clear server-side cache completely
+		serverCache.clear();
+
+		// Clear client-side caches
+		Cache.clear();
+		ProductCache.clear();
+		OrderCache.clear();
+		CheckoutCache.clear();
+	}
 	/**
 	 * Invalidates both client-side and server-side caches for a specific category
 	 */
diff --git a/src/routes/admin/products/+page.server.ts b/src/routes/admin/products/+page.server.ts
@@ -52,6 +52,28 @@ export const actions: Actions = {
 			});
 		}
 
+		// Comprehensive cache invalidation after product deletion
+		const { serverCache, CacheInvalidator } = await import('$lib/server/commercify/cache');
+		const { invalidateProductionProductCache, invalidateProductionCategoryCache } = await import(
+			'$lib/server/cache-coordination'
+		);
+
+		// Clear all product-related caches in admin application
+		await CacheInvalidator.invalidateAllProductCaches(productId);
+
+		// Clear category caches since product counts might be affected
+		await CacheInvalidator.invalidateAllCategoryCaches();
+
+		// Additional server cache clearing
+		serverCache.invalidatePattern('^products:');
+		serverCache.invalidatePattern('^product:');
+		serverCache.invalidatePattern('^categor');
+
+		// IMPORTANT: Also invalidate cache in the production application
+		console.log('[Admin] Invalidating production application cache after deletion...');
+		await invalidateProductionProductCache(productId);
+		await invalidateProductionCategoryCache();
+
 		return {
 			success: true,
 			message: 'Product deleted successfully'
diff --git a/src/routes/admin/products/[id]/edit/+page.server.ts b/src/routes/admin/products/[id]/edit/+page.server.ts
@@ -11,7 +11,7 @@ export const load = async ({ params, locals, url }) => {
 	try {
 		// Check if we should bypass cache (e.g., after an update)
 		const bypassCache = url.searchParams.has('refresh');
-		
+
 		// Get the existing product data
 		const result = await commercify.products.get(productId, bypassCache);
 
@@ -111,10 +111,34 @@ export const actions: Actions = {
 			});
 		}
 
-		// Additional cache invalidation to ensure fresh data
-		const { serverCache } = await import('$lib/server/commercify/cache');
-		serverCache.invalidate(`product:${productId}`);
+		// Additional comprehensive cache invalidation to ensure fresh data
+		// This is especially important for active status changes
+		const { serverCache, CacheInvalidator } = await import('$lib/server/commercify/cache');
+		const { invalidateProductionProductCache, invalidateProductionCategoryCache } = await import(
+			'$lib/server/cache-coordination'
+		);
+
+		// Clear all product-related caches in the admin application
+		await CacheInvalidator.invalidateAllProductCaches(productId);
+
+		// If the active status was potentially changed, also clear category caches
+		// since category product counts might be affected
+		if (form.data.isActive !== undefined) {
+			await CacheInvalidator.invalidateAllCategoryCaches();
+		}
+
+		// Additional server cache clearing for good measure
 		serverCache.invalidatePattern('^products:');
+		serverCache.invalidatePattern('^product:');
+		serverCache.invalidatePattern('^categor'); // Clear category caches too
+
+		// IMPORTANT: Also invalidate cache in the production application
+		console.log('[Admin] Invalidating production application cache...');
+		await invalidateProductionProductCache(productId);
+
+		if (form.data.isActive !== undefined) {
+			await invalidateProductionCategoryCache();
+		}
 
 		// Invalidate all cached data to ensure fresh product data is loaded
 		redirect(303, '/admin/products');
diff --git a/src/routes/admin/products/[id]/edit/+page.svelte b/src/routes/admin/products/[id]/edit/+page.svelte
diff --git a/src/routes/admin/settings/+page.server.ts b/src/routes/admin/settings/+page.server.ts
diff --git a/src/routes/api/cache/invalidate/+server.ts b/src/routes/api/cache/invalidate/+server.ts
diff --git a/svelte.config.js b/svelte.config.js
