Hi, I’ve started to migrate a small Gatsby website from Gatsby Cloud to Netlify.
I have one environment variable I expose to the client (it uses the GATSBY_ prefix), but for some reason, after the Netlify build & deploy, it appears “undefined” in the browser. Everything else looks great.
The env var is configured in the “environment variables” section of the configuration, in Netlify admin panel, and prefixed with GATSBY_
This way it was running perfectly on Gatsby Cloud, so I’m wondering if I missed something in the process of migrating ?
On the client side, it just uses process.env.GATSBY_XXXX to get the value. Maybe I have to use something else ? I tried to look for other topics but most of them look like it was about prefixing the name with GATSBY_, so I don’t know…
Your environment variable creation time match with your deploy’s time. Not sure if you had the variable in place before the deploy started. I’d advise trying a re-deploy.
However, that’s a waste of efforts in my personal opinion. Your API calls are not secure by using environment variables. You might as well commit to your repo in your current approach. Your key is directly visible in dev tools:
So anyone with a browser would be able to see your key and use it. Why try to make it secure by adding it to an environment variable?
If you really wish to keep your variable a secret, consider your Netlify or Gatsby Functions and make an API call to your geocode API from within that and use your API key in those functions. That way, you won’t expose the data to the client-side code.
Yeah, I’m aware of that. I also think it’s a better option, in the end.
At first I just wanted to “blindly” migrate, and see if everything would still work as before.
If I understand correctly, the environment variable will always be available server side, when triggering a Gatsby function, right ?
