Nuxt.js: Setting different value to env variable in dev, test and production environment.

[MatUrbanski]

In nuxt.config.js I have the following env variable:

  env: {
    API_URL: 'http://localhost:3000/api/'
  }

I want to set this API_URL variable different value when I'm in production, test or dev environment.
How can I do this?

_{This question is available on Nuxt.js community (#c1604)}

[cretueusebiu]

Install dotenv then in your nuxt.config.js file add:

require('dotenv').config()

Now you can create a .env file (that you don't commit) for your local env and one on your production server.

Each env variable that you define in the .env file will be available in your js files with process.env.VAR_NAME.

[NicoPennec]

@MatUrbanski

With axios, I use this way:

// nuxt.config.js

env: {
  DEV_API: 'http://localhost',
  PROD_API: '/proxy'
}

and in my asyncdata method:
`js // page.vue axios.defaults.baseURL = isDev ? env.DEV_API : env.PROD_API let { data } = await axios.get(`/api/search`)

[PrimozRome]

@cretueusebiu thanks for this tip.

Any idea why process.env.BASE_URL would return undefined inside store module? Looks okay and it ready in nuxt.config.js but getting undefined inside store?

UPDATE: have been able to make it work via @nuxtjs/dotenv module https://github.com/nuxt-community/dotenv-module

[FabianEllenberger]

Hey @NicoPennec your answer seem exactly like what I need, thanks! Could you quickly explain how you did the condition isDev ?.

I need to do the exact same thing but im not sure how to check if I'm on dev or production mode.
Im building my app with nuxt generate and doing an axios call on page.vue.

Many thanks in advance! 🙏🏻

UPDATE: For now I define it in my package.json -> scripts:

"dev": "NODE_ENV=dev nuxt",
"generate": "NODE_ENV=production nuxt generate"

which works just fine, but maybe there is a nicer version to do this inside nuxt.config.js.

[PrimozRome]

@FabianEllenberger we use dotenv library to read .env files and works perfectly... In nuxt.config.jsyou include require('dotenv').config() and then you can call pretty much everywhere `

.env file looks like this:

BASE_URL=http://api.url
CLIENT_ID=2
CLIENT_SECRET=sadfsdklfjdslkfjlksdfjlksdjf
...

nuxt.config.js

  axios: {
    baseURL: process.env.BASE_URL,
    browserBaseURL: process.env.BASE_URL,
    credentials: false
  }

[FabianEllenberger]

@PrimozRome Thanks for the fast answer!

I'm gonna take a look at dotenv! What I don't really like is having a .env file on production or both on dev and production side.

In my case I think it's better to have the NODE_ENV set for specific build scripts (i could add for example "generate-local": "NODE_ENV=dev nuxt generate")for testing the generate with the dev envirnoment).

But maybe after taking a look at dotenvim convinced that an .env file is better :-).
Thanks again! 👍

[franzos]

If you're on Heroku, simply add the local environmental variable(s) to the startup script, and configure production values via Heroku CLI. This is great because I proxy/cache all requests on localhost, so I can develop even without internet.

package.json for development

{
  "scripts": {
    "dev": "NODE_ENV=dev API_CW=http://localhost:8080 nuxt",
  }
}

via Heroku CLI for production
heroku config:set API_CW=https://production.com

[baronTommy]

@MatUrbanski

console.log(process.env.xxx)
https://nuxtjs.org/api/configuration-env/

[maisnamraju]

Hey guys, if anyone is still facing this issue. Here is something that I came up with for my workflow
http://blog.maisnamraju.com/2018/08/31/dynamic-environments-in-nuxtjs.html

[wienska]

Hi! Is there any way to use different env files (.env.dev, .env.prod etc.) for different deployment commands?

[maisnamraju]

@wienska you could simple add the package.json with different commands

[zadavan]

@wienska you could simple adding the package.json with different commands

How exactly?

[aldarund]

https://www.npmjs.com/package/env-cmd

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.