Using local environment variables
azdanov opened this issue · comments
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.
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.
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.
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
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
@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 runnetlify-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 contentsconst 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;
Thanks very much Tak, I owe you a favour :)
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!
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