Fix Amplify environment variable access

- Simplified amplify.yml to export env var during build
- Updated both gallery and dadvocate pages to check multiple env var names
- Added debugging to show available env vars
- Added publicRuntimeConfig and serverRuntimeConfig to next.config.ts
- Created config helper in lib/config.ts

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

amplify.yml

@@ -4,33 +4,11 @@ frontend:
     preBuild:
       commands:
         - npm ci
-        - echo "Checking for environment variables..."
-        - printenv | grep -E "(YOUTUBE|_SECRET)" || echo "No relevant env vars found"
-        - |
-          # Check if secrets are available through Amplify's secret mechanism
-          if [ ! -z "$secrets" ]; then
-            echo "Secrets object found"
-            echo "$secrets" | jq '.' 2>/dev/null || echo "Could not parse secrets"
-          fi
     build:
       commands:
-        - |
-          # Try multiple ways to access the secret
-          if [ ! -z "$YOUTUBE_API_KEY" ]; then
-            echo "Found YOUTUBE_API_KEY in environment"
-            echo "YOUTUBE_API_KEY=$YOUTUBE_API_KEY" >> .env.production
-          elif [ ! -z "$secrets" ] && [ ! -z "$(echo $secrets | jq -r '.YOUTUBE_API_KEY' 2>/dev/null)" ]; then
-            echo "Found YOUTUBE_API_KEY in secrets object"
-            echo "YOUTUBE_API_KEY=$(echo $secrets | jq -r '.YOUTUBE_API_KEY')" >> .env.production
-          elif [ ! -z "$AMPLIFY_YOUTUBE_API_KEY" ]; then
-            echo "Found AMPLIFY_YOUTUBE_API_KEY in environment"
-            echo "YOUTUBE_API_KEY=$AMPLIFY_YOUTUBE_API_KEY" >> .env.production
-          else
-            echo "WARNING: YOUTUBE_API_KEY not found in any expected location"
-            echo "Available env vars starting with A:" 
-            printenv | grep "^A" | head -10
-          fi
-        - cat .env.production 2>/dev/null || echo "No .env.production file created"
+        - echo "Build started on `date`"
+        - echo "Configuring environment variables..."
+        - export YOUTUBE_API_KEY="${YOUTUBE_API_KEY}"
         - npm run build
   artifacts:
     baseDirectory: .next
@@ -39,6 +17,4 @@ frontend:
   cache:
     paths:
       - node_modules/**/*
-      - .next/cache/**/*
-  buildPath: /
-appRoot: /
+      - .next/cache/**/*

next.config.ts

@@ -24,6 +24,14 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+  // Make environment variables available to the browser
+  publicRuntimeConfig: {
+    YOUTUBE_API_KEY: process.env.YOUTUBE_API_KEY,
+  },
+  // Server-side environment variables
+  serverRuntimeConfig: {
+    YOUTUBE_API_KEY: process.env.YOUTUBE_API_KEY,
+  },
 };
 
 export default nextConfig;

src/app/dadvocate/page.tsx

@@ -33,10 +33,14 @@ const fallbackData: Video[] = [
 ];
 
 async function getYouTubeVideos(ids: string[]): Promise<Video[]> {
-  const apiKey = process.env.YOUTUBE_API_KEY;
+  // Try multiple ways to get the API key
+  const apiKey = process.env.YOUTUBE_API_KEY || 
+                 process.env.NEXT_PUBLIC_YOUTUBE_API_KEY || 
+                 process.env.AMPLIFY_YOUTUBE_API_KEY || '';
 
   if (!apiKey) {
     console.warn("YOUTUBE_API_KEY environment variable not set. Using hardcoded video titles as fallback.");
+    console.log("Available env vars:", Object.keys(process.env).filter(k => k.includes('YOUTUBE') || k.includes('AMPLIFY')).join(', ') || 'none');
     return fallbackData;
   }
 

src/app/gallery/page.tsx

@@ -32,10 +32,14 @@ const fallbackData: Video[] = [
 ];
 
 async function getYouTubeVideos(ids: string[]): Promise<Video[]> {
-  const apiKey = process.env.YOUTUBE_API_KEY;
+  // Try multiple ways to get the API key
+  const apiKey = process.env.YOUTUBE_API_KEY || 
+                 process.env.NEXT_PUBLIC_YOUTUBE_API_KEY || 
+                 process.env.AMPLIFY_YOUTUBE_API_KEY || '';
   
   if (!apiKey) {
     console.warn("YOUTUBE_API_KEY environment variable not set. Using hardcoded video titles as fallback.");
+    console.log("Available env vars:", Object.keys(process.env).filter(k => k.includes('YOUTUBE') || k.includes('AMPLIFY')).join(', ') || 'none');
     return fallbackData;
   }
 

src/lib/config.ts

@@ -0,0 +1,7 @@
+// Configuration helper for environment variables
+export const config = {
+  youtubeApiKey: process.env.YOUTUBE_API_KEY || process.env.NEXT_PUBLIC_YOUTUBE_API_KEY || '',
+};
+
+// Helper to check if we're in a server environment
+export const isServer = typeof window === 'undefined';