CODEWITHSUNDEEP
reactjsenvironment-variables
Mr Fake
Mr Fake

Reputation: 147

Environment variable undefined in React frontend

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!

Upvotes: 0

Views: 228

Answers (1)

ssaquif
ssaquif

Reputation: 330

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

Upvotes: 2

Related Questions