How to access environment variables?

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.log(process.env) to see what comes back but it’s an empty object. I know I’m missing something which may be obvious but I’m just a hobby developer so not sure.
Additionally how do I access environment variables in netlify dev?
Thanks in advance

Will

@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: https://www.gatsbyjs.org/docs/environment-variables/

Once you set them up correctly, they should also show up using netlify dev

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 functions (lambda-functions) then there is not an issue accessing environment variables setup through the admin UI.

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 vars (as of the time of this answer) and only loads the env vars from app.netlify.com.

The Gatsby env vars being used in your Gatsby code need to follow the docs always.

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 the env.development file works with Gatsby. Let me know? :grin:

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?

Is the api key a private key?

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.

Actually reading through netlify functions it sounds pretty straight forward to do what I want.

1 Like

So, using a private key in the client script will not work without exposing the key. You will have to host an endpoint to access the api from a secure connection. That is typically done through a server or function.

1 Like

Yeah I’ve done it before using my linode server to store the key, make a request etc and return data to my own end point on my server, but the netlify functions don’t look too scary. I think I have my head around how it all fits together now, thanks again for the explanations, most useful.

1 Like