🚀 Devlog Update: Conquering the Vercel Production Proxy
The Goal:
Get the AstroLens AI explainer working in production. Everything ran perfectly on localhost, but the live Vercel deployment was throwing immediate API connection errors.
The Struggle:
Two massive deployment gotchas hit at the same time:
Missing Keys: Vercel doesn’t have access to the local .env file because it is strictly ignored by Git. The live server was trying to authenticate with undefined.
The Proxy Mirage: The Vite proxy configuration (/ai-api/…) is a local development feature. Once compiled and deployed, that proxy evaporates. Vercel had no idea where to route the AI requests, causing the chat feature to completely flatline.
The Fix:
I had to bridge the gap between local development and production infrastructure by injecting the environment variables manually and building a dedicated Vercel Serverless Function to handle the CORS and routing securely.
-
Injecting the Environment Variables
Navigated to the Vercel Dashboard → Project Settings → Environment Variables. I manually added both VITE_NASA_API_KEY and VITE_HACKCLUB_AI_KEY, ensuring they were applied across Production, Preview, and Development environments. -
Building the Serverless Proxy
I created an api/ai.js file at the root level. Vercel automatically treats anything in the /api directory as a serverless backend function. This handles the actual request to the Hack Club AI proxy so the frontend doesn’t have to deal with CORS. -
Dynamic Frontend Routing
I updated the frontend API call to dynamically switch its endpoint depending on where the code is running. If import.meta.env.DEV is true, it uses the local Vite proxy. If false (production), it hits the new Vercel serverless function.
The Result:
Pushed the code (git commit -m “fix: vercel serverless AI proxy + env vars”) and triggered a Vercel redeploy. The architecture is now bulletproof. The NASA data loads instantly, and the AI explainer successfully reaches out to the Qwen model via the serverless function, returning plain-English translations of the space data right on the live URL.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.