question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Set system environment variables after app is builded into production

See original GitHub issue

Environment


  • Operating System: Linux
  • Node Version: v17.8.0
  • Nuxt Version: 3.0.0-27477996.646c2f6
  • Package Manager: yarn@3.2.0
  • Builder: vite
  • User Config: modules
  • Runtime Modules: normalizedModule(), normalizedModule()
  • Build Modules: -

Reproduction

none

Describe the bug

Because Nuxt only respects system environments during build, when used (eg with Docker) there is no way to set dynamic variables in the application via environments. For this purpose I have to use an ugly workaround in the form of a shell script in the entrypoint with a docker, see:

docker-entrypoint.sh:

#!/bin/sh
set -e

# @see https://vitejs.dev/guide/env-and-mode.html#production-replacement
if [ "$NODE_ENV" = "production" ]; then
    TARGET_FILE_PATH="/app/.output/server/chunks/nitro/server.mjs"

    env | while IFS= read -r line; do
        ENV_NAME=${line%%=*}
        ENV_VALUE=${line#*=}

        FIND_STRING="REPLACE_${ENV_NAME}"

        if grep -q "$FIND_STRING" "$TARGET_FILE_PATH"; then
            sed -i "s|${FIND_STRING}|${ENV_VALUE}|g" "$TARGET_FILE_PATH"
        fi
    done

    yarn run start
fi

My Nuxt module defaults:

defaults: {
  channels: ['CZ_WEB_STORE'],
  objectStorage: {
    url: process.env.OBJECT_STORAGE_URL || 'REPLACE_OBJECT_STORAGE_URL',
  },
  imgproxy: {
    key: process.env.IMGPROXY_KEY || 'REPLACE_IMGPROXY_KEY',
    salt: process.env.IMGPROXY_SALT || 'REPLACE_IMGPROXY_SALT',
  },
  project: {
    name: 'Nextgen GO',
    description: 'This is demo project of OxyShop feature!',
    primaryColor: '#ea5b0c',
  },
  imageSizes: {
    sm: '100x100',
    md: '300x300',
    lg: '600x600',
  },
}

This solution is very bad, non-standard and unstable. Is there another solution on the Nuxt side? Or does Nuxt plan to create a similar implementation in the future? Maybe some nuxi useful command?

Additional context

docker-compose.yml:

client:
   # ...
    environment:
        NODE_ENV: production
        #
        IMGPROXY_KEY: ${IMGPROXY_KEY}
        IMGPROXY_SALT: ${IMGPROXY_SALT}

Logs

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
misaoncommented, Apr 6, 2022

Awesome, we can close?

1reaction
danielroecommented, Apr 6, 2022

See https://github.com/nuxt/framework/pull/3007. This is implemented in nitropack and you will be able to override nested runtimeConfig when https://github.com/nuxt/framework/pull/3956 is merged.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Set Environment Variables - Twilio
Set Environment Variables using PowerShell​​ After $Env , add a colon, followed by the environment variable's name, followed by the equals sign, ...
Read more >
Environment Variables: What They Are and How To Use Them
Environment variables are used to store app secrets and configuration data, which are retrieved by your running app when needed.
Read more >
How to set build .env variables when running create-react-app ...
Go to your app settings >> click on 'Reveal Config Vars' button · Add your variables · Use them in the app in...
Read more >
Use multiple environments in ASP.NET Core | Microsoft Learn
Windows - Set environment variable for a process​​ Environment values in launchSettings. json override values set in the system environment.
Read more >
How to Use Environment Variables in App Platform
When creating an app, specify environment variables on the Environment screen. Click the Encrypt checkbox to obscure the variable's values from all build, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found