[Support Guide] Using environment variables on Netlify correctly

I answered using .env on Netlify to be able to use dotenv on your build on SO, but here is the cross post:

WARNING: If this is a secret key, you will not want to expose this environment variable value in any bundle that gets returned to the client. It should only be used by your build scripts to be used to create your content during build.


dotenv-webpack expects there to be a .env file to load in your variables during the webpack build of your bundle. When the repository is checked out by Netlify, the .env does not exist because for good reason it is in .gitignore.


Store your API_KEY in the Netlify build environment variables and build the .env using a script prior to running the build command.


const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)

Run the script as part of your build

node ./scripts/create-env.js && <your_existing_webpack_build_command>

Caveats & Recommendations

  • Do not use this method with a public facing repository if you are trying to hide the keys [open] because any PR or branch deploy could create a simple script into your code to expose the API_KEY
  • Only use the private keys for your build env. Public environment variables are safe to access inside your client code bundles.
  • The example script above is for simplicity so, make any script you use be able to error out with a code other than 0 so if the script fails the deploy will fail.

Hello mittalyashu. Your repo may be public but the way to get around having it exposed to your remote repository (if you’re using git) is to include the .env file in your .gitignore file. Assuming that your .env file is in your head director you would simply type the filepath relative to your head repository to where the .env file is. For me this looked like:

(assume we’re in .gitignore)


1 Like

wrote up an introductory post on env vars in case this helps anyone DigitalOcean Community | DigitalOcean

@christiancw, does that edit mean that you solved the issue?

Edit: needed to add dotenv to my webpack plugins.

Not quite. I had thought so, since it worked when I ran netlify dev but then the keys still are not being passed to my React component when I deploy the site - though I can tell they are accessible at build time. With the keys stored on the Netlify UI, and with a create-env script, is there any other reasons the keys wouldn’t be available on process.env in the React component?

Sharing what worked for me, for a Netlify lambda function:

  1. Adding environment variables through Netlify’s UI widget (on the site’s “Build & Deploy settings” page).

  2. netlify.toml

    Command = "npm run lambda-build"
    Functions = "lambda"
  1. Adding node -p 'process.env' to my package.json lamba-build command:

"lambda-build": "netlify-lambda build functions && node -p 'process.env'"

This way, when the function is deployed, env variables will we loaded and available to the function.


Hey!! I tried this and the script runs fine, it seems. But, I can still only access env vars defined manually in my dashboard. I’m trying to access the COMMIT_REF, NODE_ENV, etc. for inside my zip-it-and-ship-it functions.

I have this:


But, everything is still undefined, except when I tested NODE_ENV by adding NODE_ENV=development to the dashboard env vars.

Any thoughts?

Only environment variables in the dashboard are available at the time of a function execution in Netlify Functions at the time of this answer. :yum:

Ah, ok. So there’s no possibly way to expose COMMIT_REF or even NODE_ENV in functions? Seems like some crucial environment functionality, right? Maybe I’m missing something.

For now, I’m checking to see if NETLIFY_DEV exists, and if it does not, then I’m assuming I’m in production. Not my favorite, though. haha

NODE_ENV should be there. Not sure where COMMIT_REF is setup.

Hmm NODE_ENV is undefined. I don’t use netlify-lambda or anything; just the built-in zip-it-and-ship-it.

Weird. Hopefully someone can shed some light on this!

A post was split to a new topic: API keys and environment variables on netlify

Hi @bswank,

During the netlify build process you can both modify your function and access en vars, which means you can use a custom webpack plugin, script, etc. to hardcode the environment variables you need in to the functions the same way React automatically hardcodes en vars that start with REACT_APP_ in to the client side javascript. You’ll have to do it yourself but it’s definitely possible.

thanks futuregerald. If I’ve create an environment variable (GAME_ID) in settings ( Netlify App) , then how do I access that variable in my webpack.config.js? Specifically I want to use the environment variable in the entry property:

module.exports = (env = {}) => {

console.log(“env $$$$$$$”, env);
console.log(“process.env $$$$$$$”, process.env);
console.log(“GAME_ID”, GAME_ID)

return {
entry: env.production ? /* ./src/games/${env.GAME_ID}.js */ ‘./src/boilerplate/game.ts’ : ‘./src/boilerplate/game.ts’, // ‘./src/games/asteroid/game.ts’,

There are probably a million ways, but when I need to populate a file with a value, I do something like this in my build command:

sed -i s/PLACEHOLDER/${VARIABLENAME}/g webpack.js && my-usual-build-command

This way the value is put in place in the file before I need it. I don’t know how webpack runs things in its config file while you use it, so there may be a more elegant way but it comes back down to “populate the value in a file before you need it”.

thanks greatly for your help

I have added the snippet to my build command in my package.json:

“scripts”: {
“build”: “sed -i s/PLACEHOLDER/${GAME_ID}/g webpack.config.js && webpack --mode=production --env.production”

and the build & deploy run successfully. But my webpack.config.js still cannot see the variable:

6:22:59 PM: > sed -i s/PLACEHOLDER/${GAME_ID}/g webpack.config.js && webpack --mode=production --env.production
6:22:59 PM: env $$$$$$$ { production: true }
6:22:59 PM: env.GAME_ID $$$$$$$ undefined

the webpack site has a page about environment variables:

it shows that if I define module.exports with a function that takes an env argument then I will have access to the env variable inside the body of the function.

So I do this in my webpack.config.js but there is no sign of my GAME_ID environment variable value:

module.exports = env => {

console.log(“env $$$$$$$”, env);
console.log(“env.GAME_ID $$$$$$$”, env.GAME_ID);

@mcferren, my understanding is that package.json doesn’t not allow for the expansion of environment variables:

Including this in package.json in this way won’t work work because environment variables won’t be e.

The example that @fool gave is invoking a command to do a find/replace of the two strings in webpack.js. This is just an example so show what is possible. In that solution the command would replace the literal string “PLACEHOLDER” with whatever text was in the environment variable - in that file: webpack.js.

This is one of many way to copy the environment variable into the actual file itself. The data on disk is being changed. There are other ways to take an environment variable and include in the the text of a file. This was just one easy way to do so.

The solution here will require having some reproducible way to take an environment variable in your local environment and then getting that environment variable working in your local build. If you can get that working, we can help you adapt it to Netlify (if it doesn’t “just work” - which it might).

Do have the inclusion of the environment variable working locally? If so, how do you do so there? With this information we can hopefully suggest a way to do the same at Netlify.

In most cases, the environment variable should be available to node as process.env.NAME_HERE (replacing NAME_HERE with the name of the environment variable).

Thy key caveat is that the environment variable only exists in the build system. If you want that same environment variable to exist in the site javascript, your build code will need to copy this environment variable to the javascript files being generated by the build process.

Dear respected @luke @fool Kindly help me out: I have passed the locally a Environment Variable (snap:2019-11-29_2117), now I want to follow these steps
to pass the Environment Variable at aap.netlify.com i.e.(snap:2019-11-29_2118) in the code and steps how do I achive/pass
dynmically aap.netlify.com Environment Variable in the code

Local steps followed. at windows machine

1st step install:: phaser3-typescript> npm install dotenv
2nd step: create a .env file i.e: phaser3-typescript> type .env
3rd step: edit the code in Webpak.config.js

var path = require("path");
var pathToPhaser = path.join(__dirname, "/node_modules/phaser/");
var phaser = path.join(pathToPhaser, "dist/phaser.js");
const env = require("dotenv").config();
module.exports =  (env) => {


 entry: "./src/games/" + process.env.GAME_ID +"/game.ts",
  output: {
	path: path.resolve(__dirname, "dist"),
	filename: "bundle.js"
  module: {
	rules: [
	  { test: /\.ts$/, loader: "ts-loader", exclude: "/node_modules/" },
	  { test: /phaser\.js$/, loader: "expose-loader?Phaser" }
  devServer: {
	contentBase: path.resolve(__dirname, "./"),
	publicPath: "/dist/",
	host: "",
	port: 8080,
	open: true
  resolve: {
	extensions: [".ts", ".js"],
	alias: {
	  phaser: phaser

4th step: in pakage json file :: add command calling object:::
“scripts”: {
“snake”: “webpack --env.GAME_ID=snake --mode development && webpack-dev-server --mode development”,

5th setep: run your command in CLI mode :: i.e: phaser3-typescript> npm run snake

Doesn’t really sound like a netlify question, @davis - how you handle things locally would be up to you. We can’t provide in-depth support for your use of webpack or dotenv We can just assert that if you set a variable here:

…then it is exposed during your build process (or while you run netlify dev)

So if you want to try removing dotenv and webpack from the equation and set the environment variable there in our UI, and use a test that is more straightforward like a build command of:


…and don’t see it working, do let me know and I’ll be happy to try to help sort things out.

Hello. I am having trouble how to use my .env variables on Gatsby with Netlify.
I have a API that works in development and production.
In development it is being called with SERVER_HOST_ROOT
which I am using to make api calls through the site.

However, in production when I build the site and deploy to Netlify the enviroment variable is gone!

Not sure what I am doing wroing