Estoy trabajando en una aplicación que utiliza la API de Spotify. Tengo secretos que quiero mantener en forma de ID de cliente, puntos finales y similares. Hice todo lo que debo hacer para usar con éxito las variables de entorno en reaccionar. Esto incluye prefijar mis variables con REACT_APP_ y asegurarse de que .env esté en la carpeta raíz. En el código que se muestra a continuación, puedo consolar brevemente. registrar mis variables de entorno.
const login = useRef(`${process.env.REACT_APP_AUTH_ENDPOINT}?client_id=${process.env.REACT_APP_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&response_type=${process.env.REACT_APP_RESPONSE_TYPE}`);sin embargo, cuando trato de acceder a ellos en un renderizado aquí, no está definido
{!token ? <a href={login.current}>Login to spotify</a> : <button onClick={logout}>Logout </button> } { token ? <form onSubmit={searchArtists}> <input type='text' onChange={e => setSearchKey(e.target.value)} placeholder='search for a song or artist' /> <button type='{submit}'>Search</button> </form> : <h2>Please login</h2> } }Me aseguré de usar un enlace useRef solo para asegurarme de que los valores persistan para poder usar mis secretos cuando quiero devolver un renderizado para reaccionar. Esto fue en vano. Tengo la sensación de que tiene que ver con cuando actualizo? ¿O tal vez mi entorno se borra después de ir a mi URI de redireccionamiento? Tampoco me molesté en importar dotenv porque, por lo que he leído, React maneja todo eso por sí solo. Como referencia, aquí también está el archivo .env:
REACT_APP_CLIENT_ID =************************* REACT_APP_REDIRECT_URI =https://swipewithspotify.vercel.app/ REACT_APP_AUTH_ENDPOINT =https://accounts.spotify.com/authorize REACT_APP_RESPONSE_TYPE =tokenSi hay algún concepto que tengo mal, me encantaría una explicación si es posible o algún tipo de luz para estar seguro de arrojar sobre este problema.
La mejor manera de agregar una variable env si obtuvimos un error de tipo indefinido, resolví el mismo problema. Siga estos pasos.
npm instalar dotenv-webpack --save-dev
Cree un archivo .env en la carpeta raíz 3. cree una variable env como
REACT_APP_MY_API=342432...Cree el archivo webpack.config.js en la carpeta raíz con el siguiente contenido
agregue este mismo código en el archivo webpack.config.js .
const Dotenv = require('dotenv-webpack'); module.exports = { plugins: [ new Dotenv() ] }Y puede usar dónde quiere en su carpeta raíz o carpeta src
acceder a variables como esta
const apiKey = process.env.REACT_APP_MY_API;