Hi I’m reasonably new to netlify and have never used the environment variables before but I’m having a tough time getting my head around how to use them. I have a gatsby site I’m working on and have set up a environment variable in the UI but I’m unsure how I access it? I have tried just console.lo…

@bushblade I will start with the Gatsby issue for client side environment variables. Gatsby has a requirement to start your environment variables with GATSBY_ for them to be used in your client javascript. (exception NODE_ENV). This follows the same pattern as a create-react-app. See: Environment …

Thanks for the reply, I’ll have a read of that. What about server side variables though? Like for api keys and such, how do you use them?

I’m trying to use the netlify.toml to set environment variables, can that not be done with a gatsby site and needs to be as per the gatsby documentation rather than netlify dev?

You won’t be able to access environment variables for the client unless you have built them into your scripts during a build. That is why you should not store secret keys in the builds of your client scripts. There is no server side on Netlify, except when using functions. If you are using Netlify …

There is no difference between the netlify.toml env vars and the ones you setup through the admin ui at app.netlify.com when accessed by the build bots on Netlify. They get loaded at the time of the build together. If using locally, the netlify dev command will not be able to load netlify.toml env…

Ok thanks that makes sense, so the netlify.toml is just for after build/deployment and I can’t access them until that time and then it would be with netlify functions. And for local development env variables I need a env.development file in my gatsby project?

Not sure about Netlify functions access to netlify.toml env vars, but I personally don’t want those in my repo anyway because the only reason I would use them is because they are secret. But that is just me making sure I don’t expose secret keys on accident. For local development, I am not sure how…

Thanks you’ve been very helpful. Yeah I can access variables in development from a env.development file in root of the gatsby project, which yeah I added to gitignore first. I’m just not sure how I would use a api key after build/deployment then, that wouldn’t be with netlify functions?

Yes, I don’t have one at the moment for what I want but I’m just trying to get my head around how this will work.

How to access environment variables?

Support

tiagofsanchez October 5, 2019, 5:54am 19

@futuregerald I am using Gatsby and you answered that on this thread so all good, thank you for that.

Topic		Replies	Views
API keys and environment variables on netlify Support deployment , environment-vars	5	6421	March 25, 2023
How to access environment variables in a react component? Support gatsby , environment-vars	17	20868	November 12, 2020
Gatsby Environment variables w/ Netlify Support building , deployment , gatsby	6	585	July 31, 2024
Gatsby based website deployed on Netlify cannot access the Environment variables Support deployment , environment-vars	1	77	July 31, 2024
Gatsby js undefined environment variables Support deployment	3	3135	August 3, 2020

How to access environment variables?

Related topics