Environment variable undefined in React frontend

Question

I want to use an API key for one of my frontend components, but I can't seem to get require('dotenv').config() to work. It works perfectly fine in my backend. Do I need a relative path for it to work?

My file structure is

client
-src
--components
---component.js
server
-server.js
.env

(so require('dotenv').config() works in server.js, but not component.js)

I have a public key for my frontend and a secret key for my backend both in .env. When I try console.log(process.env.REACT_APP_FKEY) to check my public key, I get undefined.

Any help is appreciated!

ssaquif · Accepted Answer · 2020-11-16 06:57:53Z

2

React cannot access files out side the react project which I assume is client. You can create an env.local file in your client folder, and inside there you want to start your variable names with REACT_APP first, example.

So new file structure

client
-src
--components
---component.js
-.env.local // inside client folder
server
-server.js
-.env //this should be inside server folder

the .env.local file

REACT_APP_FKEY=your_key

and then you can access it as, process.env.REACT_APP_FKEY This way you do not need dotenv on your FE

edited Nov 16, 2020 at 6:57

answered Nov 16, 2020 at 6:06

ssaquif

3304 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Environment variable undefined in React frontend

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related