N
Nuxt•4mo ago
Rechau

environment variable not overriding for production

I have set env variables on docker-compose.yml file, but it still takes default value which is empty string This is my config: 
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      sanctum: {
        baseUrl: '',
        origin: '',
      },
    },
  },
)}
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      sanctum: {
        baseUrl: '',
        origin: '',
      },
    },
  },
)}
for production I am building with "npm run build" nuxt is running in docker container. And I set my environment variables via docker-compose.yml file like this: 
services:
  frontend:
    environment:
      - NUXT_PUBLIC_SANCTUM_BASE_URL=https://domain.com
      - NUXT_PUBLIC_SANCTUM_ORIGIN=https://domain.com
services:
  frontend:
    environment:
      - NUXT_PUBLIC_SANCTUM_BASE_URL=https://domain.com
      - NUXT_PUBLIC_SANCTUM_ORIGIN=https://domain.com
3 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Rechau. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue is a common one when deploying Nuxt in Docker for production: environment variables set in docker-compose.yml are not overriding the defaults in your nuxt.config.ts at runtime. Key points from the Nuxt documentation and community: 1. .env files are not used in production:
After building your Nuxt app (npm run build), the .env file is not read at runtime. Instead, you must set environment variables using your deployment platform (in your case, Docker Compose) Docs: Directory-structure > .env. 2. Environment variable names must match the runtimeConfig structure:
For your config: 
   runtimeConfig: {
     public: {
       sanctum: {
         baseUrl: '',
         origin: '',
       },
     },
   }
   
   runtimeConfig: {
     public: {
       sanctum: {
         baseUrl: '',
         origin: '',
       },
     },
   }
The environment variables must be named: - NUXT_PUBLIC_SANCTUM_BASE_URL - NUXT_PUBLIC_SANCTUM_ORIGIN This matches what you have in your docker-compose.yml, which is correct Docs: Going Further > Runtime Config. 3. How Nuxt replaces values:
At runtime, Nuxt will replace the values in runtimeConfig with any matching environment variables that follow the naming convention. If you set the environment variables in Docker Compose, they should override the defaults. 4. Common pitfalls:
- Build-time vs. runtime: If you set environment variables only at build time, they will be baked into the build. For runtime overrides, ensure the variables are present when you start the container, not just when you build it. - Docker Compose environment section: Make sure you are not mounting a .env file that could override or conflict with the environment: section. - Check for typos: Ensure there are no typos in your variable names. 5. Example Docker Compose service: 
   services:
     frontend:
       image: your-nuxt-image
       environment:
         - NUXT_PUBLIC_SANCTUM_BASE_URL=<https://domain.com>
         - NUXT_PUBLIC_SANCTUM_ORIGIN=<https://domain.com>
       ports:
         - "3000:3000"
   
   services:
     frontend:
       image: your-nuxt-image
       environment:
         - NUXT_PUBLIC_SANCTUM_BASE_URL=<https://domain.com>
         - NUXT_PUBLIC_SANCTUM_ORIGIN=<https://domain.com>
       ports:
         - "3000:3000"
6. Accessing the config in your app: 
   const config = useRuntimeConfig()
   console.log(config.public.sanctum.baseUrl) // Should log "<https://domain.com">
   
   const config = useRuntimeConfig()
   console.log(config.public.sanctum.baseUrl) // Should log "<https://domain.com">
Troubleshooting steps: - Double-check that you are not setting these variables at build time only. - Make sure you are starting your container with the correct environment variables present. - If you are using a multi-stage Docker build, ensure the environment variables are set in the final runtime stage, not just the build stage. References:
- Nuxt Docs: Runtime Config - Nuxt Docs: .env in Production - Stack Overflow: Docker and Nuxt env variables If you have followed all of the above and it still does not work, please check your Docker logs to ensure the environment variables are present at runtime (docker exec -it <container> env). If they are, but Nuxt still does not pick them up, there may be an issue with how the container is started or with the build process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@159739178454745090> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Rechau
RechauOP•4mo ago
Issue was how I declare environment variables and values. Correct way is: 
   NUXT_PUBLIC_SANCTUM_BASE_URL: "https://domain.com"
   NUXT_PUBLIC_SANCTUM_ORIGIN: "https://domain.com"
   NUXT_PUBLIC_SANCTUM_BASE_URL: "https://domain.com"
   NUXT_PUBLIC_SANCTUM_ORIGIN: "https://domain.com"
Incorrect: 
    - NUXT_PUBLIC_SANCTUM_BASE_URL=https://domain.com
    - NUXT_PUBLIC_SANCTUM_ORIGIN=https://domain.com
    - NUXT_PUBLIC_SANCTUM_BASE_URL=https://domain.com
    - NUXT_PUBLIC_SANCTUM_ORIGIN=https://domain.com
tl.dr. don't add - at front and instead of = use :

Did you find this page helpful?