Accessing environment variables

Get Help
1

I’ve created an .env file with my vars, and am calling process.env.APP_API_KEY from the _init function of one of my components, but I’m getting the error: ‘process’ is not defined.

2

hi, can you maybe share your .env file (redacting private info, off course :wink: ) and a code snippet of where you try to use the environment variable in your code?

That will make it easier for us to help you out.

3

Hi Michiel, sure thank you!

.env

NODE_ENV=production
APP_API_KEY=mysecretapikey

Login.js

export default class Login extends Lightning.Component {
  static _template() {
    return {
      TextTexture: {
        x: 50,
        y: 400,
        colorTop: 0xfff1f1f1,
        colorBottom: 0xff144b83,
        text: { text: 'TEXT', fontSize: 40, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 },
        Desc: {
          x: 0,
          y: 50,
          text: {
            text: 'Login page',
            fontSize: 22,
            wordWrap: true,
            wordWrapWidth: 450,
            lineHeight: 30,
          },
        },
      },
    }
  }

  _init() {
    console.log(process.env.APP_API_KEY)
  }
}
4

I am also using Router in the base of my app, if that makes a difference.

5

Are you running the app with the Lightning CLI - aka lng dev. I’ve just tested this and its working for me. Process.env is created via the build tool.

If you’re not using the lng cli you need to add dotenv

6

I am using lng dev to start the server. I will try creating a new project and see if it works there.

7

Make sure you have the latest lng cli installed as well.

8

It was a linter problem. I updated the globals object in eslintrc.js to include process, and now it works. Thanks for your help!

9

For anyone else having this same issue and could not resolve it with the fix above you can use import processEnv from 'processEnv' and access the variables through that.

I believe this only works when bundling with roundup

10

@lightningdev Can you share your eslintrc.js file with your modification ?

11

@gastropod I’tried the processEnv but still does not work. I’m getting the object displayed in console but it does not have a key from my .env file.

12

@GabrielK Are your pre-pending your key with “APP_” (eg “APP_SOME_KEY” instead of “SOME_KEY”), this was something I missed initially in the docs.

If that doesn’t work then you might want to confirm if you’re using roundup, I don’t think this would work otherwise

13

Thanks for your response. I added ‘APP_’ as a prefix to my key, and now it works. I verified it with a console log of processEnv.APP_FLICKR_API_KEY , and it’s showing the correct value. My mistake—I didn’t read the documentation thoroughly. Thanks again for your help.