How to pass env variables to nuxt in production?

Question

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

consider selecting an answer :) – Samuel Faure Aug 30 '19 at 09:48 — Samuel Faure, Aug 30 '19 at 09:48

Samuel Faure · Answer 1 · 2019-09-06T10:44:00.327

21

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.

edited Sep 06 '19 at 10:44

answered May 11 '19 at 06:34

Samuel Faure

815
9
25

Just as a note, you don't need to have a .env file on other environments using dotenv, as it picks up the environment variables if they are there already. – Dan May 24 '20 at 15:41
5

best solution. But please note that you don't need ```=== 'dev'```per each variable. Use this instead to save space: ```env: process.env.NODE_ENV === 'dev' ? { A: "1", B: "2" } : { A: "3", B: "4" },``` – Anton Pryamostanov Sep 11 '20 at 22:31
good hint! Had to add a .env cerate in my build pipelines and now it works – develth Mar 03 '22 at 14:26

score 9 · Answer 2 · answered Nov 27 '19 at 05:42

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')

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/

Aldarund · Answer 3 · 2019-01-01T13:05:00.733

4

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.

edited Jan 01 '19 at 13:05

answered Jan 01 '19 at 11:40

Aldarund

16,410
5
68
98

When I do a console.log, I can see the values correctly in google cloud logs but in browser console I see undefined. Could it mean that they are available in production? Sorry, I am new to this. If you could expand your answer, it would help. Thanks – Rounak Jain Jan 01 '19 at 12:10
2

Can you pass in environment vars when calling `npm run generate`? Trying to work out how to do this in Windows. – Simon East Feb 04 '19 at 04:23
1

For example, I have: `.env` and `.env.debug`, so how can I build a version with `.env.debug`? – kris_IV Oct 24 '19 at 20:25
Agree with this comment, I could see a lot of answers but as overall, NuxtJS no yet the feature to pass environment variable at Production Runtime, its runtime config mean to use for Development Stage and Built Stage, so you need to have different built if you have to attach to different API link. – Osify Apr 01 '21 at 09:26

score 4 · Answer 4 · answered Sep 11 '20 at 11:27

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

wkornilow · Answer 5 · 2019-08-04T19:16:12.360

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",

This looks like very interesting aproach, it may be worth to mention it won't propably work when SPA mode is used - according to docs nuxtServerInit action is called only from the server-side — Ondra, Jul 26 '19 at 06:50

score 0 · Answer 6 · answered Feb 14 '20 at 20:12

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()

How to pass env variables to nuxt in production?

6 Answers6