CODEWITHSUNDEEP
reactjsenvironment-variablesgatsbynetlify
PRR
PRR

Reputation: 183

Use of environment variables with Netlify and React(Gatsby)

I'm using env variables in my react app, so I don't expose my private API keys publicly. They are set in a .env file (which is excluded from git) like so - REACT_APP_ENV_NAME which works fine during development.

I have added those to the Netlify env configuration from within the site settings panel, but they don't seem to work during production (just showing as undefined). Have any of you had the same problem before/managed to fix it?

Upvotes: 1

Views: 161

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29305

You need to use GATSBY_ prefix in your environment variables. So, your REACT_APP_ENV_NAME will be GATSBY_REACT_APP_ENV_NAME in your Netlify back office.

You can check for further information in Gatsby documentation, in this Netlify community thread and in Netlify documentation.

From Gatsby documentation:

Please note that you shouldn’t commit .env.* files to your source control and rather use options given by your Continuous Deployment (CD) provider. An example is Netlify with its build environment variables.

GATSBY_API_URL=https://dev.example.com/api API_KEY=927349872349798

From Netlify documentation:

Gatsby environment variables

Any environment variables prefixed with GATSBY_ will be processed by Gatsby and made available in the browser for client-side JavaScript access. Visit the Gatsby docs about environment variables for more information.

Upvotes: 1

Related Questions