Access Prerendered React App Default Netlify Environment Variables

Support
, ,
1

I’ve been researching a bit regarding environment variables, here is what I know.

  1. They need to be accessed at build time, and not dynamically.
  2. In react they start with REACT_APP
  3. You can set custom variables in the Netlify UI but there are also some preset ones: Build environment variables | Netlify Docs
    Specifically looking at the URL variable.

I found that you should be able to copy the variable over in a .env file. I needed to add REACT_APP to this to make it work (I thought).

Note: I pre-render my application during build then hydrate the js into the app on consequent loads.

.env at root of directory (but it is in the git ignore)…
REACT_APP_URL=$URL (Do I have to hardcode the URL here?)

I used this line with the intention of copying over netlifiy variable to a REACT_APP variable.
However,

  1. This file is in the git ignore so then netlify will never see this at build time?
  2. by using process.env.REACT_APP_URL in my app when hydrated, is this trying to then use that variable and cannot access it?

TLDR: How can I access the Env variables at build time and then consistently use them in the app after hydration?

API ID: 509c82bd-9715-420c-b51e-aee7ae9dbac8
Site Name: cocky-pasteur-345a6f

I can provide access to the git repo if needed however, this seems like a generic question that I have read many many posts on however, cannot seem to get it.

EDIT: Just to clarify I am specifically referring to the pre-created netlify variables such as URL. I can access my own variables that I set.

Thanks!

2

SOLVED:
For anyone else trying to do the same,

.env files should be checked into source control (with the exclusion of .env*.local ).

Seems I missed that bit :smiley: