How to set production environment variable in React app? (hosted on Netlify)

Question

I was wondering how I can set environment variable in React to hid my API key?

I am hosting the app on Netlify so I am not sure if that matters. I am able to successfully do it in development but when it gets to production, the api key becomes undefined.

In my .env file when I have:

REACT_APP_API_KEY="my_api_key_etc"

In my app.js I have:

const apiKey = process.env.REACT_APP_API_KEY

when I console.log(apiKey) in development (npm start): it shows my api fine, but when in production mode (npm run build): it shows undefined.

I have already tried to create two more files like .env.development and .env.production and still that didn't work.

Also I made sure my .env files are outside of my src folder.

Do you guys think it has something to do with Netlify?

Thanks in advance!

You can set it in the netlify dashboard...

SakoBu
– SakoBu

2019-08-30 00:07:31 +00:00
Commented Aug 30, 2019 at 0:07 — SakoBu
– SakoBu, Commented Aug 30, 2019 at 0:07

Blue · Accepted Answer · 2019-08-30 00:09:49Z

1

Ideally you should be setting these variables in your dashboard instead. Head to your Project settings, and add this, and any other variables under environment:

answered Aug 30, 2019 at 0:09

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set production environment variable in React app? (hosted on Netlify)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related