Home
Support Forums

[Support Guide] Using environment variables on Netlify correctly

Support Support Guides
, , ,
#55

Heh, that’s how I found my way here @fool :smiley:

Thanks for explaining @fool – that’s really interesting, and unexpected! I’ve confirmed now that when I allow the builds to having via github webhooks (eg, branch deploys or master updates) then the prefixed GATSBY_ magic substitution happen as expected.

Is there a way I can leverage the Netlify CI builds when using netlify deploy to test deploys of WIP code? I guess I expected this would work because I have a build command defined in my netlify.toml which leads to a gatsby build, but now I think this may be irrelevant.

edit: Hmm as an update, I’ve discovered that process.env.DEPLOY_URL is undefined in a PR preview deploy, from the context of a function. Hmm this I’m less sure how to work around.

#56

Well, yes, you can follow the pattern in this article. Sorry to sound like a broken record, but if you want a single workflow for both places:

  1. DON’T use GATSBY_*, use non-special environment variables

  2. that you must manually interpolate,

  3. and do that both locally (set on your machine) and at Netlify (set in our UI).

#58
#59

I’m using Gatsby and know that my build command is gatsby build. I’ve declared my variables in the Netlify UI so I don’t really care about confirming they are showing up in my console or how to do that.

What I would like is to fix the problem of my environmental variables showing undefined after I’ve built and deployed my site.

I understand that build time and run time are two different animals: that build time is basically distilling and packaging all your pages and their dependencies/assets into files that can be digested by the browser; run time being what the browser does with those files, functions/directives, etc., and that the environmental variables need to baked into the code so that the browser has access to it and so that it is not undefined.

That now has me wondering if that isn’t inherently a security concern?

I guess what I’m really wondering is if there’s an alternative to using Netlify’s serverless functions to run code that uses predeclared environmental variables?

Does anybody know of an alternative to this?

#60

I just built a netlify build plugin https://github.com/bencao/netlify-plugin-inline-functions-env to hopefully support most typical use cases by inlining process.env.X in function js files with build time environment variable values.

3 Likes
#61

@bencao’s plugin is a great way to automate this! But your concerns are well placed - if you can’t share your environment variables with the general public in your page source code, you absolutely don’t want to publish them here!

This is a function that demonstrates how to “hide” sensitive tokens - such as credentials: https://github.com/depadiernos/token-hider-inator . Some authentication tokens - e.g. firebase read or write tokens - are intended to be in webpages. Most, though, are not, so it is very wise to be concerned!

#67

I’m having difficulty narrowing down where to adjust my build. I have deployed a basic jamstack and set up an API key in environment variables via Netlify UI. Where and how do I tell my build where to expect the secret? There are so many avenues for this and I can’t seem to hunker down on an appropriate path for my basic html, css and js deploy. Thanks!

#68

hi there, i think the docs are linked in the article above, but just in case, you might review this:

#69

Also is probably worth reading [Support Guide] Using environment variables on Netlify correctly, @wonderfilled since that is maybe more directly useful to addressing your question, though Perry’s answer is also very relevant!

#70
#71

Maybe I’m doing something strange, but I’ve set a toml file in my root with a setting
[context.producton]
NODE_ENV = staging
[context.staging]
NODE_ENV = staging

Just to test some settings. This isn’t being taken into account and each deploy on either my staging or master branch is being given a production flag

I’ve also used the UI, and this flag is being disregarded. Would love to understand what I need to change to make this happen

#72

Hey there, @fishstix81

Sorry for the slow response! I see you shared this question about 8 days ago. Are you still encountering this issue? If so, please let me know what else you have tried in the interim!

#73

Still the same issue. For now, I’m just treating a staging like a production project.

#74

Thanks for letting us know! I will share your question with our team to see if we can get you more insights and next steps :slight_smile:

#75

Hey @fishstix81, are you wrapping your context in quotes at all? It should look like this.

Do you have a link to the site (or the site ID, or deploy ID) which we could use to take a look, if wrapping the value in quotes doesn’t fix it?

1 Like
#76

Hey Scott,

Thanks for double checking. The context is wrapped. A build ID you are welcome to take a look at is 605185f0a715ff00071e4fa3

I console logged some variables in the build to get an idea on what was being taken into account.

It’s important to also note that I also tried setting an env variable through the UI and this is also not being taken into account.

I hope this helps.

10:36:00 PM: sourceUrl ************

10:36:00 PM: process.env.NODE_ENV production

#77

I did also forget. This is how my toml file, in the root, currently looks

#78

Hi, @fishstix81. The deploy in question wasn’t one of the contexts from your netlify.toml file:

[context.production]
    NODE_ENV = "staging"

[context.staging]
    NODE_ENV = "staging"

The deploy with id 605185f0a715ff00071e4fa3 is a deploy preview. The context for it would be deploy-preview.

Also, your syntax for environment variables in netlify.toml is incorrect. There is an example of the correct syntax here.

The correct syntax is this:

[context.production.environment]
  NODE_ENV = "staging"

[context.staging.environment]
  NODE_ENV = "staging"

[context.deploy-preview.environment]
  NODE_ENV = "staging"

Would you please test those changes and let us know if they resolve the issue or not?

#79

Thanks for getting back to me. I just had time this morning to test this out. I still see the same behavior. I still must be doing something wrong. My toml file not reads

[context.production.environment]
    NODE_ENV = "staging"

[context.staging.environment]
    NODE_ENV = "staging"

The deploy ID is 605df7c7dce07100078de3eb which ties back to my staging branch in github.

I typically work in yaml and not toml. Is there syntax specific things I need to take into account that I could be missing? For example, spaces vs tabs / only 2 spaces and I’m giving it 4? Things like that.

Again, thanks for all your help.

#80

hey there @fishstix81 -

did you see this already?

also, for general toml guidance, this might help:

https://toml.io/en/