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:

5

Could you please help me sort out this same issue with my sites too? My sites are deploying fine but none of my environment variables are logging properly.

I have followed the recommended article and I am using REACT_APP… because my project is built using Create-React-App.

My site name is: sendt-dev.netlify.app

Please can someone help me, I’ve been stuck on this for days.

6

Hi @jameslevine,

Try following this:

7

This link is interesting, although I can see main.XXX.chunk.js in my /static folder in the source tab. Inside it you can see how the ENV variable isn’t available

                                NODE_ENV: "production",
                                PUBLIC_URL: "",
                                WDS_SOCKET_HOST: void 0,
                                WDS_SOCKET_PATH: void 0,
                                WDS_SOCKET_PORT: void 0,
                                FAST_REFRESH: !0
                            }).REACT_APP_API_BASE_URL).concat("/orders"),
                            r = {

I might try and build a new project bit by bit and see at what stage it fails (I’m guessing not right at the beginning

8

Accessing REACT_APP_API_BASE_URL directly won’t work. What is the source code that generates this?

It is also preferred that you don’t cross-post @jameslevine, especially considering you started another thread regarding this very topic Environment Variables not logging properly

9

No worries I will continue on the other thread :+1:

Posted here originially but then started a new thread considering others will probably find this useful. Will continue in this thread from now on Environment Variables not logging properly