CODEWITHSUNDEEP
vue.jsnuxt.js
Rounak Jain
Rounak Jain

Reputation: 499

How to pass env variables to nuxt in production?

nuxt.config.js

modules: [
    '@nuxtjs/dotenv'
  ],

server/index.js

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '0.0.0.0'
const port = 8080
app.set('port', port)
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

const Storage = require('@google-cloud/storage')
const dotenv = require('dotenv')


async function getEnv() {
  if (config.dev) {
    dotenv.config({ path: '.env' })
    console.log('Environment local .env file loaded.')
    console.log(process.env.LOCALE)

    return
  }

  try {

    const bucketName = 'env-var'

    const dotEnvSourcePath = `.env`
    const dotEnvDestinationPath = `/tmp/${dotEnvSourcePath}`
    const storage = new Storage({})

    await storage
      .bucket(bucketName)
      .file(dotEnvSourcePath)

      .download({ destination: dotEnvDestinationPath })
    console.log(
      `gs://${bucketName}/${dotEnvSourcePath} downloaded to ${dotEnvDestinationPath}.`
    )


    dotenv.config({ path: dotEnvDestinationPath })


  } catch (err) {
    console.error('ERROR:', err)
  }
}

async function afterEnvProcess() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
  const fs = require('fs')

  const dotEnvExists = fs.existsSync('.env')
}

getEnv()
  .then(r => afterEnvProcess())
  .catch(e => console.log(e))

I get the values for process.env.<variable> as undefined when running the app in production. When running in development, I get the values correctly. It seems the env variables are not getting passed to the nuxt env property.

EDIT 1: I can see the correct values in google cloud logs when I console log the env variables with process.env. but at the same time those console log statements show undefined in the browser console

Upvotes: 16

Views: 51607

Answers (10)

Ben Winding
Ben Winding

Reputation: 11787

nuxt.config.env Gotcha!

For future Googler's including myself, there's an annoying gotcha which nuxt.config.js doesn't explain very well.

process.env.SOMETHING is literally replaced during the build with the config.env.SOMETHING value

before build

    if (process.env.SOMETHING == 'testing123')
    //     ^     ^ this object path won't exist after the build

after build

    if ('testing123' == 'testing123')

This also doesn't work with objects! only literals.

// This won't work for you!
mounted() {
  console.log('process.env', process.env)
}

https://nuxtjs.org/api/configuration-env/

Upvotes: 14

rysama
rysama

Reputation: 1796

Environment variable config steps for Nuxt 3

Doing it this way ensures it works with both client and server side rendering.

  1. Create a .env file in the nuxt app root directory and define the value of the environment variable there.
MYENV="MyEnvironmentVariableValue"
  1. In the nuxt.config or nuxt.config.ts file, set the value in the runtimeConfig
export default defineNuxtConfig({
  ...,
  runtimeConfig: {
    public: {
      myenv: process.env.MYENV || 'myDefaultValue'
    },
  ...
})
  1. Access the environment variable in any component or page
<template>
  <div>
    <h1>{{myEnv}}</h1>
  </div>
</template>

<script setup lang="ts">
const config = useRuntimeConfig();
const myEnv = config.public.myenv;
</script>
  1. Restart the nuxt app (e.g. yarn dev)

Upvotes: 0

Daniel
Daniel

Reputation: 8647

Most updated answer (Nuxt 3).

  1. Do not use @nuxtjs/dotenv, replacement is implemented in framework from Nuxt v2.13
  2. Use env names starting from NUXT for private and NUXT_PUBLIC if can be exposed for browser

Example of your .env (in file locally and as environment variables on production)

NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org

Example of nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: process.env.NUXT_API_SECRET ?? 'default',
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE ?? 'default value',
    }
  },
})

and you can use it in components

<script setup>
const config = useRuntimeConfig()
console.log('Runtime config:', config)
if (process.server) {
  console.log('API secret:', config.apiSecret)
}
</script>

or plugins

export default defineNuxtPlugin((nuxtApp) =>
  const config = useRuntimeConfig()
  console.log('API base URL:', config.public.apiBase)

in server directory you will still have access to process.env directly.

I know that there already 10 other answers, but feel that all of these are incomplete, because following this guide you are able to inject variable after build phase (on runtime) what is good practice described in "12 factor".

In some case you can be interested in "app config" instead of "runtime config". Below link to comparison:

https://nuxt.com/docs/getting-started/configuration#runtimeconfig-vs-appconfig

Sources:

Upvotes: 17

Daedra22
Daedra22

Reputation: 46

On Windows with Nuxt 3 RC11 it simply worked this way:

 if (process.env.NODE_ENV === "development") {
    return "http://localhost:8000";
  } else {
    return "https://my-domain.com";
  }

It seems that the NODE_ENV is set correctly when running npm run dev on production the NODE_ENV env variable is production.

Upvotes: 0

Osify
Osify

Reputation: 2295

It works this way!

I've been struggle for that a bit long and has been comment around the post since early 2021 but I have now triggered out to do it properly now.

Nuxt runtime environment to use as normal by setting them in block of publicRuntimeConfig, like this

publicRuntimeConfig: {
   myVariable: process.env.MY_VARIABLE || '',
   axios: {
      baseURL: process.env.BASE_URL || 'http://api.example.com',
    },
}

The most confuse point that we do, mostly we use this code in our block

if (process.env.MY_VARIABLE == 'something') {
}

The correct way, we need to use as this:

if (this.$config.myVariable == 'something') {
}

And for axios, it should be well treated by nuxtjs, except if you have your own rule to pass the baseUrl, at component side, you need to do it via this.$config call and do not use process.env.xxx

And now at each environment, I just have my own .env and passing the variable as we use in build time, everything works well, including via docker.

Upvotes: 1

Sam
Sam

Reputation: 368

As @Aldarund said before: Environment variables are set at build time and not at runtime.

As of Nuxt.js 2.13+ you can use runtime config and built-in dotenv support. Which provides better security and faster development.

To use environment variables as axios baseUrl at runtime you can use:

publicRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },

More information about runtime config: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

More information about axios runtime config: https://axios.nuxtjs.org/options

Upvotes: 4

Soviut
Soviut

Reputation: 91525

I've created a function that can update module settings from the /server/index.js even in production.

This is only designed to work with the array-style module config syntax. Like this

['@nuxtjs/google-gtag', { ... }]

nuxt.config.js

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'

function updateConfigModuleSettings(name, settings) {
  const i = config.modules.findIndex(m => Array.isArray(m) && m[0] === name)
  if (i > -1) {
    const oldSettings = config.modules[i][1]
    config.modules[i][1] = {
      ...oldSettings,
      ...settings
    }
  } else {
    throw new RangeError(`Nuxt module named '${name}' could not be found`)
  }
}

// call the function as many times as you like with your module settings overrides
updateConfigModuleSettings('@nuxtjs/google-gtag', {
  id: process.env.GOOGLE_ANALYTICS_ID,
  debug: process.env.NODE_ENV === 'development', // enable to track in dev mode
})

async function start () {
  // this will take the overridden config
  const nuxt = new Nuxt(config)

  // ...
}
start()

Upvotes: 1

Samuel-Zacharie Faure
Samuel-Zacharie Faure

Reputation: 1152

Most people use dotenv package but I dislike this solution, because it adds the need for managing an extra file different for production and development, while you can automate webpack to use the right values without extra hassle.

A simpler way :

//package.json
  "scripts": {
    "dev": "NODE_ENV=dev nuxt"
  }

//nuxt.config.js
  env: {
    baseUrl:
      process.env.NODE_ENV === 'dev'
        ? 'http://localhost:3000'
        : 'https://my-domain.com'
  }

This will allow you to use the right value by calling process.env.baseUrl. Note that you can verify this with console.log(process.env.baseUrl) but not console.log(process.env), at least in Chrome.

Upvotes: 26

wkornilow
wkornilow

Reputation: 817

UPD. This will work only in universal mode, because nuxtServerInit will not called in SPA mode.

You can build Nuxt for production without any environment variables. And then set it in store in nuxtServerInit.

I use env-cmd for this.

I have .env-cmdrc file with next content:

{
  "production": {
    "API_URL": "https://api.example.com/",
    "IMG_URL": "https://img.example.com/",
    "ENV_PATH": "./.cmdrc.json"
  },
  "staging": {
    "API_URL": "https://stage.example.com/",
    "IMG_URL": "https://stage.img.shavuha.com/",
    "ENV_PATH": "./.cmdrc.json"
  },
  "development": {
    "API_URL": "https://stage.api.example.com/",
    "IMG_URL": "https://stage.img.example.com/",
    "ENV_PATH": "./.cmdrc.json"
  }
}

In store I have something like this:

export const state = () => ({
  api_url: '',
  img_url: ''
})

export const mutations = {
  SET_PROCESS_ENV: (state, payload) => {
    state.api_url = payload.api_url
    state.img_url = payload.img_url
  }
}

nuxtServerInit action:

  commit('settings/SET_PROCESS_ENV', {
    api_url: process.env.API_URL,
    img_url: process.env.IMG_URL
  })

package.json:

"dev": "env-cmd -e development -r .env-cmdrc nuxt",
"build": "nuxt build",
"start_stage": "env-cmd -e staging -r .env-cmdrc nuxt start",

Upvotes: 2

Aldarund
Aldarund

Reputation: 17621

Env variables bundled at build time. So you need to set them when you are building for production

They will be available at runtime in your server/index.js, but when nuxt build dist it replace process.env.* with the values that was passed at build time, so it dont really matter what u pass when u start server for this variables.

Upvotes: 5

Related Questions