Build Environment Variables in Netlify with Create-React-App Issue

Support
, ,
#1

I am trying to access environment variables in Netlify with create react app. I followed instructions from this post, which provided a repository that is already configured and set up with environment variables that supposedly works when deployed to netlify. I cloned that repo and initialized with netlify cli, build and then deployed to netlify and it didn’t work.

This is what it’s supposed to look like

But with my page, all the variables are empty

In the Netlify dashboard I set REACT_APP_CUSTOM_ENV_VAR to “From Netlify”

In netlify.toml I set a few variables

[build]
  command = "yarn build"
  publish = "build"

[context.production.environment]
  TOML_ENV_VAR = "From netlify.toml"
  REACT_APP_TOML_ENV_VAR = "From netlify.toml (REACT_APP_)"
#2

Hi, @aquaductape, and welcome to the Netlify community site. :+1:

The environment variables only exist in the build environment at Netlify. The environment variables would then need to be embedded in the site code during the build.

I did find a site which I think could be the one you are testing this with. However, there is no git repo linked to that site and it is using manual deploys. There is no build done if a manual deploy method is used.

Would you please confirm that git backed continuous deployment is enabled for this site? There is more about that in our docs here.

#3

Thank you so much, I was able to get it to work on my intended repository(not the one provided in my post) by fixing the deploy settings. My issue was that my repository had a nested create react app directory, so I had to change my base directory.

So I have another question, is it impossible to hide the environment variables in the browser? Because when I search for the variable in Chrome developer tools under Sources tab, I can see them in plain text. Is there a way Netlify solves this?

#4

hey @aquaductape, do you mind starting a new thread for the second question you have here, as it is somewhat unrelated to the first part? It’ll make it easier for people who are looking for the same information :muscle: