[Support Guide] Using environment variables on Netlify correctly

@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:https://www.screencast.com/t/QKgXWi56P), now I want to follow these steps
to pass the Environment Variable at aap.netlify.com i.e.(snap:https://www.screencast.com/t/07krkPkmmB) 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) => {

//console.log(process.env.GAME_ID);

return({
 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: "127.0.0.1",
	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:

https://app.netlify.com/sites/aap/settings/deploys#environment-variables

…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:

echo $VARNAME

…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

Suggestions?

Hi @aquasar!

How are you trying to use the env var? The .env file won’t just work on its own, as explained in the above article.

I could use some help on this topic.

Here’s what I’ve done so far.

  1. Created an app that needs to read in an API key.
  2. Created a an environment variable for it in my Netlify Build & Deploy > Environment settings.
  3. Created a Netlify (AWS) Lambda function to expose my environment variable from step 2.

This works great so far. When I hit the endpoint for my Lambda function, it displays my API key in a webpage.

But, I need to access this key in my server.js. Sorry for the “noob” question, how to read my API key env var in my server.js file? What am I missing?

Any help is greatly appreciated! Thanks!

Cross-posted from here.

What I did was perform the action needs inside the lambda function directly. Here’s an example I made: token-hider-inator. Hope that helps.

1 Like

Thanks @Dennis, I think I actually came across your code during my research. I like what you’ve done. I will keep it as a reference.

For my case, I was working on legacy. So, I didn’t want to copy the entire function into my lambda. My exercise was more academic anyway. I just wanted to learn the full life cycle and document it for future reference. Which I did here https://gist.github.com/marklchaves/7d664f71062447189f4e423d28925bc3

Thanks again! :slight_smile:

Would be great if @fool and/or his compadres could give some hints on using the Netlify env vars (as set in the GUI) to feed the token needed for webmentions. I’m stumped. Am using Eleventy + webpack. At least, after finding this thread, now I know why the combo of an .env file, dotenv, and dotenv-webpack isn’t working in Netlify. The repo currently is private but may not stay that way, so the otherwise excellent answer given by @talves won’t work for me.

Thanks in advance for any help from whoever wishes to give it.

Hmm, I don’t see anything on that page you linked that requires a token. Could you clue me in as to what the use case is in more detail?

1 Like

TL;DR: Turned out not to be a Netlify issue, after all.

I was trying to send an API token from an env var so webmentions would work. When I would do a build, would see a line saying that the token wasn’t being read (from my .env file). That’s when I found the advice to send it through Netlify env var settings instead. I thought, when I originally sent this request for info, that it still wasn’t getting through — but later saw that it was, after all, and another unrelated glitch (PEBKAC) was the reason why I wasn’t seeing webmentions. So, yes, the Netlify method is still needed and it is working, but there was PEBKAC going on, too. :roll_eyes: (I did respond to one of your team via Twitter about this but I guess it didn’t get to you, too.) Thanks!

1 Like

I’m not sure if it is addressed in this topic discussion, but I had an issue in that the creds I needed where in JSON format, and that they are typically read from a file. Since I don’t want to check in or deploy a credentials file I was stuck.

What I discovered was that I can set an env var with a LARGE JSON string, then parse that as the credentials object. There is an limit on env var values, so beware.

Hi,

I have a question regarding environment variables and forked pull requests

Imagine I have a private API key set as an environment variable in the project’s Netlify UI, something like MY_KEY=abc123

My GitHub repository is public and the Netlify project is public, so logs are visible to everyone

First question: if I do env as a build command, will MY_API value be printed in the logs, or do you hide sensitive variables by default? Like other CIs replace env values with “***” strings.

Second question: someone forks my repo, changes the build command to be “env” and submits a pull request. Will Netlify pass the environment variables to the forked PR?

Hi @bahmutov, environment variables are not currently masked in the deploy log and could potentially be exposed in a forked PR. We are currently working on a solution for this that we plan to release very soon.

2 Likes

Hi, and if I understand from looking at the user interface, there is no way to disable building pull requests from forked repositories?

Not yet, though we will be adding more control around this very soon!

In the meantime, you could turn off all Deploy Previews and use branch deploys instead.

One downside to this strategy is that you won’t get the PR notifications, but it does ensure that builds can only be triggered by people with write access to your repo.

I’ll definitely post back here when we release greater controls!

For the people struggling with their deploy here and using NUXT, you can find a direct solution here:

I was thinking on how to solve it, but found this quick and simple solution to share the variables through your nuxt.config.js

1 Like

@cookiee! Thanks for sharing! :pray:

Hey there,

I’m having a problem with my GATSBY_ prefixed env vars. When using these in client-side JS files and running netlify dev they are pulled from my Netlify settings and set in the client js statically. But, when I take that same code and netlify build and netlify deploy the deployed build client JS does NOT have the values for these env vars. They are set, and I can fetch them async from a Netlify function, but I expected the static replacement to work the same when deploying as when running local dev.

Am I missing something to make these work for deploys?

Had you asked this question in another thread, I would have redirected you to the article that started this thread. TL;DR when you use netlify build/netlify deploy, we do the build locally on your computer, and deploy the static assets. You’d need to interpolate the variables into your code, to use them after deploy. Netlify dev and our functions feature use the variables from our UI; your static build, however, does not. You can build in our CI if you want the “magic” $GATSBY_* in your webpages (other than functions, which explicitly DO read the functions from our UI).