API keys and environment variables on netlify

Hi @fool! Thank you for posting this here. I am still a bit confused with all this…a caveat though, I am new to Netlify and to coding… so bear with me.

I have set my .env.development file in my gatsbyJS site so that I can store my API_KEY and APP_ID in order to not expose them when I commit to git. That was perfectly and I am able to ping and use my API endpoint, however I want it to work when my site is live and for same reason, I am not able to do that.

I have also set my environment variables in Netlify UI so that I can have access them at build time (I guess?), on my files I am still using process.env.API_KEY in order to used them, but for same reason I am not able to get to them. How can I inject the variables from NETLIFY UI into my client-side code?

For same reason I am not able to achieve this.

Any guidance would be very much appreciated.

Cheers,
Tiago

@perry, could you help me with this one? Super thank you.

@tiagofsanchez in order to get en vars in to your client side code when you use Gatsby, you need to prefix the variable names with GATSBY_. This is in the official Gatsby docs.

Also, please make sure you don’t commit your .env.development file to your git repo!

1 Like

Hi @futuregerald thank you very much for that! It worked.
Cheers to you.

1 Like

As time as the topic subject actually doesn’t include Gatsby, is there possible to also request help for a generic case too (without being offtopic or breaking any forum rules) ? So, no Gatsby in my case:
I manually uploaded the folder containing the files with my website (everything static inside, no node js no build whatsoever) but I need to replace an API key probably with something as process.env.MY_SECRET_KEY .
While I activated some option in the Netlify dashboard allowing me to set in there an environment variable (which I did), how can I access that variable because I need it inside some js module used by my website in client.
(I receive instead an error message in console, something as ‘process’ is undefined).
Is there any safe way to do it ?
I have a free account and play around with beginner stuff (however I need to know if I could hide that API key despite being just for a test).
I even thought to hide the variable inside a closure in order to not allow it to be read inside window object - not sure if that’s at all enough safe though.
Thank you

Environment variables are not accessible via process.env.VARIABLE_NAME from client-side code @larpie.

Variables are replaced during build. Check out

If you have an API key in a variable, this becomes exposed in the front-end code for anyone to see. A better method is outlined in