Using local environment variables

[azdanov]

Is there a way to specify environment variables for netlify.toml for local development?

As I understand this file is required during build stage on netlify and needs to be included inside the GitHub repository, for example. But this way it's impossible to hide any environment variables, such as API keys.

Are there any ways similar to create-react-app where .env.local is used, but ignored via .gitignore.

After messing around I found a workaround by specifying a webpack.functions.js that picks up .env:

const Dotenv = require('dotenv-webpack')

// @see https://github.com/netlify/netlify-lambda#webpack-configuration
module.exports = {
  plugins: [new Dotenv()],
}

If this is the best way, then it could be useful mentioning this approach in the readme.

[swyxio]

indeed i think this is the best way right now. we are working on some features to help with the API security but it wont address your usecase i think. good job on figuring out the workaround. we will definitely need better support for this.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[iamskok]

Are there any updates? I also find a hard time making my functions use the same NODE_ENV as the rest of my Gatsby project. I would prefer not to change the variable thru netlify Admin each time I do local development.

Here is the question about it on netlify forum

[ceddlyburge]

After messing around I found a workaround by specifying a webpack.functions.js that picks up .env:

Hi @azdanov, this doesn't work for me, please can you let me know where is your .env file located?

Thanks

Cedd

[taktran]

@ceddlyburge, it took a while for me to figure out how to set it up correctly too, so I'll post how I got it working here for prosperity.

You need to:

• npm install dotenv-webpack on the root folder where you run netlify-lambda
• Create the .env file in the root
• As per https://github.com/netlify/netlify-lambda#webpack-configuration

  • Create a webpack.functions.js file with the above contents

    const Dotenv = require('dotenv-webpack')
    
    // @see https://github.com/netlify/netlify-lambda#webpack-configuration
    module.exports = {
      plugins: [new Dotenv()],
    }
    

  • To run it all: netlify-lambda serve --config ./webpack.functions.js in the root folder

---

Also a gotcha I found with dotenv-webpack was that you can't destructure process.env variables because of how it replaces them in webpack ie,

Don`t do

const { API_KEY }  = process.env.API_KEY;

Instead, do

const API_KEY = process.env.API_KEY;

[ceddlyburge]

Thanks very much Tak, I owe you a favour :)

[anwittw]

Hi all,

thanks for the explanation above. I tried to apply this to my react project, but get an error when executing the script:

> netlify-lambda serve --config ./webpack.functions.js

error: missing required argument `dir'
npm ERR! code ELIFECYCLE

Any ideas, would be appreciated!

thanks

Update: Please forget it, it was just the "dir" => functions missing in my script.

Case Closed!

[itzmanish]

Doesn't work with gatsby 3.
I was using this package in gatsby 2 without any issue now error pop ups

 var version = compiler.webpack.version;
                                     ^

TypeError: Cannot read property 'version' of undefined