How to access environment variables?

Support
,
1

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

2

@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 Variables | Gatsby

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

3

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?

4

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?

5

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.

6

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.

7

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?

8

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:

9

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?

10

Is the api key a private key?

11

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.

12

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

1 Like
13

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
14

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.

2 Likes
15

Hi @bushblade, I totally get the .env.development and that, in a case of the API Key, works perfectly for me. However when I am pushing my git into productions I will need to set up the environment variables, and I did that, but my form, that is linked to Airtable, ins’t able to ping the API as it doesn’t finds the API key.

How should I go about setting that to work bearing in mind that I already have the environment variables set up in the Netlify UI? Do i need to create a token-hider.js function? And if so, how?

Thank you so much for the help.
Cheers,
Tiago

16

Hi @tiagofsanchez, can you share more details please? Where are you setting the environment variable? Is it on your netlify dashboard? Also is your goal to have your airtable api key in your client code that’s in the browser? if so, that’s not recommended since anyone will be able to take that key and use it.

1 Like
17

Hi @futuregerald! Thant you very much for the help.

So as you mentioned I am trying to access my airtable API key so that a form that I have built populates that a table that I have in my base.

To do that in DEV it is easy and works. In my form component and have define my constants so that I can tap into the API and i define my .env.development and .env.production files

//My Form component
const app_id = process.env.AIRTABLE_APP_ID;
const app_key = process.env.AIRTABLE_API_KEY;

//.env files
AIRTABLE_API_KEY=...KEY...
AIRTABLE_APP_ID=...ID...

This works for me in DEV, however when I have publish my blog, this doesn’t work as my form component doesn’t get the API_KEY neither the APP_ID

I have set environment variables in Netlify UI dashboard, however this still doesn’t work. I thought it should work, but I don’t understand why.

Given that I have my environment variables defined in Netlify UI dashboard, how can I have access to them on my form component so that I can POST the information that I want into Airtable?

Hope that this makes sense and thank you for the help.

Cheers,
Tiago

18

Environment variables that are available during the build process won’t be available to your client-side UI unless you interpolate them at build time. Some frameworks do this for you automatically. Which UI framework are you using?

19

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

1 Like