Nuxt•2w ago

Environment variables not available when running on Netlify Edge

I built and deployed my Nuxt 3 app to Netlify using the SERVER_PRESET=netlify_edge preset. However, it seems that all environment variables that I supply throught Netlify dashboard are not accessible from my Nuxt app. I checked the following: * I made sure all environment variables are added through Netlify dashboard and they have the correct value. * Variables have the appropriate NUXT_ or NUXT_PUBLIC_ prefix so that they can override the respective runtimeConfig variables. However, when accessing the app: * It seems that runtimeConfig is not being overriden regardless for public or non-public variables. * I even checked both runtimeConfig and process.env values through an API handler and non of them seem to contain my environment variables values. Any ideas on why environment variables aren't accessible when running on Netlify Edge?

3 Replies

kapa.ai•2w ago

Hi @amazonaffected. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with environment variables not being available when running your Nuxt 3 app on Netlify Edge. The core of the problem lies in how Nuxt 3 handles environment variables in production environments, especially in serverless or edge environments like Netlify Edge. According to the Nuxt documentation on environment variables (https://nuxt.com/docs/guide/directory-structure/env#production), after your server is built, Nuxt does not read .env files. This is a deliberate design decision to ensure compatibility with various deployment environments, including serverless and edge platforms that may not have access to a traditional file system. The documentation states:

"Since .env files are not used in production, you must explicitly set environment variables using the tools and methods provided by your hosting environment."

For Netlify Edge specifically, the knowledge sources don't provide explicit information. However, based on the general guidance for production environments, you should ensure that you're setting the environment variables correctly through Netlify's interface or configuration. Here are some suggestions to troubleshoot and potentially resolve your issue: 1. Double-check that you've correctly set up your runtimeConfig in nuxt.config.ts. It should look something like this:

   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available server-side
       apiSecret: '',
       // Public keys that are exposed to the client
       public: {
         apiBase: ''
       }
     }
   })

   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available server-side
       apiSecret: '',
       // Public keys that are exposed to the client
       public: {
         apiBase: ''
       }
     }
   })

Source: Nuxt Configuration (https://nuxt.com/docs/getting-started/configuration#nuxt-configuration) 2. Ensure that your environment variables in Netlify's dashboard exactly match the structure of your runtimeConfig object, including the NUXT_ prefix for private variables and NUXT_PUBLIC_ for public ones. 3. Remember that environment variables set this way should automatically override the corresponding runtimeConfig values at runtime. If this isn't happening, it might indicate an issue with how Netlify Edge is handling these variables. 4. If possible, try logging the runtimeConfig values in a server-side context (like a Nuxt server route or middleware) to see what values are actually available at runtime. 5. Consider reaching out to Netlify support specifically about how environment variables should be handled with their Edge functions, as this might be a platform-specific issue. If none of these steps resolve your issue, it's possible that there might be a specific limitation or configuration required for Netlify Edge that isn't covered in the general Nuxt documentation. In this case, you may need to consult Netlify's specific documentation for Edge functions and environment variables, or reach out to their support for more targeted assistance. Nuxt Runtime Config Documentation (https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables) emphasizes that runtime config values are "automatically replaced by matching environment variables at runtime," so if this isn't happening in your Netlify Edge environment, it suggests there might be a disconnect between how Netlify Edge is exposing these variables and how Nuxt is expecting to receive them. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1188032231105630269> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MirageOP•2w ago

As mentioned in my post I already made those suggested steps. Could be a Netlify issue, so I have to check that as well I solved this by supplying the value in nuxt.config.ts which hardcodes the environment variable during build. So instead of:

   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available server-side
       apiSecret: '',
       // Public keys that are exposed to the client
       public: {
         apiBase: ''
       }
     }
   })

   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available server-side
       apiSecret: '',
       // Public keys that are exposed to the client
       public: {
         apiBase: ''
       }
     }
   })

I used:

   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available server-side
       apiSecret: process.env.NUXT_API_SECRET!,
       // Public keys that are exposed to the client
       public: {
         apiBase: process.env.NUXT_PUBLIC_API_BASE!
       }
     }
   })

   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available server-side
       apiSecret: process.env.NUXT_API_SECRET!,
       // Public keys that are exposed to the client
       public: {
         apiBase: process.env.NUXT_PUBLIC_API_BASE!
       }
     }
   })

It kinda makes sense to me that this works, but not sure if there are any security implications with this usage. Especially for secrets / non-NUXT_PUBLIC_ variables.

Gaming

Programming

Environment variables not available when running on Netlify Edge