How to use environment variables to implement functions in React projects?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to use environment variables to implement functions in React projects?

P粉268284930 2023-09-16 13:18:15

796

I'm trying to save my API key as an environment variable but I don't know how to access it... I installed dotenv using npm, created the file in the root directory and put the key there. I tried to access it in the js file by using process.env.API_KEY but it shows that the variable is undefined.

I tried puttingrequire('dotenv').config()at the top of the file where I need the key, but it gives me an error...

ERROR in ./node_modules/dotenv/lib/main.js 2:13-28 Module not found: Error: Can't resolve 'path' in ...

I think I may have either put it in the wrong file or I'm missing something

P粉268284930

reply all (1)

P粉0142937382023-09-17 10:55:30 1 floor

in conclusion:

To read theAPI_KEYvariable in your React layer you need to export the variableREACT_APP_API_KEYbefore building, then in any React part you can get the value via ：

process.env.REACT_APP_API_KEY

See the link to see why the prefixREACT_APP_is required.

Additionally, if your token is a long-lived or non-expirable token, it should not be exposed to the frontend (React). Only expirable tokens (AuthCodeoauth2Auth) should be exposed to the front-end layer.

Check out the references to learn how to handle front-end variables