Environment Variables are undefined after build

Gatsby Cloud
,
1

Hello there! I am hosting my personal portfolio site on S3, and I’m building it with Gatsby. I’ve chosen S3 as my hosting option on Gatsby Cloud. I’ve also added some environment variables (in both .env.* and Gatsby Cloud) that I need once the build finishes. It works great in development, but when logging these variables on production after Gatsby Cloud finishes a build, they are all undefined.

If I ignore Gatsby Cloud and build and deploy with npm to S3 directly, the environment variables are found.

I have also added a Cloudfront invalidation on GCloud for /* (everything).

2

What site is this about?

3

My resume/CV but in a site form. Also with my blog.

4

He means what site ID. Can you share that please

5

Not sure where to find the ID, but the name is personal-site-new-site

6

I still can’t locate your account. Please supply your slug… this is available in the Netlify UI at Team settings > General > Team details > Team information .

7

I don’t use Netlify, but Gatsby Cloud.

8

Could you share the link to the Gatsby site then?

9

https://www.gatsbyjs.com/dashboard/f22e1b5e-3ca8-4d68-b48e-c201bfa8787f/sites/c2fa821e-7394-44ff-8b05-4cb94588362a perhaps?

It ends up as j1nma.com

10

I checked that site and there don’t seem to be any environment variables for that site, at least on Gatsby Cloud. Has something changed?

11

I do see them

IMG_8847
IMG_88471179×1767 122 KB

13

Thanks for following up! Can you clarify what you mean by needing the environment variables “once the build finishes?”

If you want to access the environment variables in the browser, you’d need to add the GATSBY_ prefix as described here: Environment Variables | Gatsby. Let me know if this helps!

14

Thank you for trying to help me!

I mean, once the normal Gatsby build finishes from the build queue. Like the builds that automatically start on Gatsby Cloud once I commit and push.

I tried with and without the prefix, but they are always “undefined”.

15

Thanks again for following up and providing that context! I reached out an internal ticket to take a closer look into this, as we’ll likely need a bit more info on how these environment variables are configured.

We’d otherwise recommend building & hosting the site on Netlify, and I’ll include some documentation here for building Gatsby on Netlify along with managing environment variables there, which may be more straightforward.