How to use environment variables without declaring them in runtimeConfig?

[IdreesSamadi]

Inside nuxt.config.ts I have

export default defineNuxtConfig({
  runtimeConfig: {},
  ssr: false,
  nitro: {
    routeRules: {
      '/api/**': {
        proxy: `${process.env.URL}/**`,
      },
    },
  },
})

but the process.env.URL is undefined when I build and deploy it.
the process.env.URL is defined when developing locally.

I also tried setting a fallback value to URL but process.env.URL would still be undefined. i.e. it is always the fallback value regardless of what I set URL to inside .env file.

const URL = process.env.URL || 'someURL'
export default defineNuxtConfig({
 runtimeConfig: {},
 ssr: false,
 nitro: {
   routeRules: {
     '/api/**': {
       proxy: `${URL}/**`,
     },
   },
 },
})

Question:

• how to use environment variables in nuxt.confg.ts without declaring them in runtimeConfig?

related issuese: #20860 #15931

[jwhazel]

process.env.URL is undefined when I build and deploy it.

This should work. Where are you running your build? You need to make sure this environment has the env's set.

For example, we use Github Actions to build and deploy. So we have to go into the repo's settings and manually add variables/secrets.

[viniciuspinatti]

I have a similar issue that I described #26945 but in my case I already tried with adding NUXT_PUBLIC and still not working. Seems it is only possible to runtimeConfig detect the values in nuxt.config file and other configs like nitro or packages config (like my example) aren't able to read it.

[IdreesSamadi]

I also wanted the process.env.URL to be a runtime variable since we have one Jenkins pipeline for building and deploying to different environments(i.e. staging, pre-prod, and production) and the URL is different for each environment.

After spending a lot of time searching for a solution I settled for a catch-all path in the ./server/api/[...].ts to do the proxy routing.

const backendUrl = useRuntimeConfig().URL

export default defineEventHandler((event) => {
  const reqUrl = getRequestURL(event)
  return proxyRequest(event, `${backendUrl}${reqUrl.pathname}${reqUrl.search}`.replace('/api', ''))
})

[viniciuspinatti]

Interesting. I already used a catch-all for proxy routing, but I don't know if this works with websockets. Have you already implemented websocket with this?