using different env for different cases in nuxt

Question

I am new to Nuxt or any sort of node stuff.I m trying to create different environment for different cases, e.g. If I want to test my app, I want the block of dev object to run (pointing to dev endpoint) etc, following is a example

[
 prod: {
   server: www.mysite.com,
   api: 'www.jsonplaceholder.com/'
  },
 dev: {
   server: www.internal-mysite.com,
   api: 'www.jsonplaceholder.com/'
  }
]

so when I do npm run dev, it run the app with those endpoints I know that .env won't allowed objects or array so I cannot use that .I have tried dotenv but not much help I can get out of it, I tried watching this but I cannot pass NODE_ENV=config.dev (given that config is a file containing the object) How can I make my app to work like that?

A detailed answered would be helpful.

score 25 · Accepted Answer · answered Mar 02 '20 at 06:12

25

I Have created one config.js same as below

const MasterKeys = {
  development: {
    apiEndPoint: 'example.com',
    clientId: '1234567',
    clientSecret: '11111111'
  },
  staging: {
    apiEndPoint: 'staging.example.com',
    clientId: '1234567',
    clientSecret: '11111111'
  },
  production: {
    apiEndPoint: 'prod.example.com',
    clientId: '1234567',
    clientSecret: '11111111'
  }
};

export { MasterKeys };

Imported that file in nuxt.config.js as below

let appEnv = process.env.NODE_ENV || 'development';
import { MasterKeys } from './config.js';

Now, whenever I want to use apiEndPoint value in nuxt.config.js I will access as MasterKeys[appEnv].apiEndPoint

And if I want to use any configuration key from config.js in component I will use env property of nuxt.config.js as below example.

  env: {
    apiEndPoint: MasterKeys[appEnv].apiEndPoint,
    clientId: MasterKeys[appEnv].clientId
  }

And then in components, I can access that value as process.env.apiEndPoint

And to will declare env in package.json as below

  "scripts": {
    "dev": "nuxt",
    "stagingbuild": "NODE_ENV=staging nuxt build",
    "staging": "NODE_ENV=staging nuxt start",
    "build": "NODE_ENV=production nuxt build",
    "start": "NODE_ENV=production nuxt start"
  }

Hope this will help you!!!!

answered Mar 02 '20 at 06:12

Hardik Shah

1,366
2
15
35

what is `[appEnv]`, I see that u created a object but `[appEnv]` is an array syntax? – localhost Mar 02 '20 at 10:15
let appEnv = process.env.NODE_ENV || 'development'; in nuxt.config.js declaring environment variable – Hardik Shah Mar 02 '20 at 10:22
1

Default means when you run `npm run dev` there in package.json we are not providing any `NODE_ENV` so it will take `development` as per our declaration in `nuxt.config.js` for appEnv – Hardik Shah Mar 02 '20 at 10:32
`nuxt.config.js` doesn't let u import statement outside a module. – localhost Mar 02 '20 at 10:41
Can you elaborate? – Hardik Shah Mar 02 '20 at 10:44
so when u use `import { MasterKeys } from './config.js';`outside of module.exports it gives error SyntaxError: Cannot use import statement outside a module, I think browser doesn't understand import statements? – localhost Mar 02 '20 at 10:47
which version of `Nuxt` you are using?? In my case it was not giving error I'm on `"nuxt": "2.7.1"` – Hardik Shah Mar 02 '20 at 10:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208839/discussion-between-nofel-and-hardik-shah). – localhost Mar 02 '20 at 10:58
Can we save secret keys in config.js? – zarpio Apr 30 '21 at 12:01

score 4 · Answer 2 · answered Mar 04 '22 at 04:37

I answered the same question here

[How to set custom path for dotenv in nuxt] https://stackoverflow.com/a/71346654/10537000

If you are using version > 2.13 then you won't need to install dotenv anymore because it's already built in https://nuxtjs.org/docs/directory-structure/nuxt-config/#runtimeconfig

.env support Similar to vue-cli (*), .env file will be always loaded via dotenv and is accessible via process.env and options._env. process.env is updated so one can use it right inside nuxt.config for runtime config. Values are interpolated and expanded with an improved version of dotenv-expand. .env file is also watched to reload during nuxt dev. Path can be set via cli --dotenv or disabled by --dotenv false.

I created the .env.xxx files and created the corresponding scripts

Vigikaran · Answer 3 · 2020-02-28T14:40:35.337

1

Create two separate config files and import them with condition and use inside nuxt config as follows

const CONFIG = process.env.NODE_ENV === 'development' ? require('dev-config') : require('prod-config');

module.exports = {
  axios: {
    baseURL: CONFIG.API_BASE
  }
}

edited Feb 28 '20 at 14:40

answered Feb 28 '20 at 14:23

Vigikaran

725
1
10
27

But it is not just one url, there r bunch of url which need to change depending upon what env will run and how do I use that SERVER in nuxt config? – localhost Feb 28 '20 at 14:33
when u say require `('dev-config')`, does the file name shld be dev-config.env ? – localhost Feb 28 '20 at 14:46

using different env for different cases in nuxt

3 Answers3

Linked