Estoy tratando de poner mi clave API en mi archivo .env que se encuentra en la raíz de mi proyecto (en el mismo nivel que el archivo json del paquete)
Cuando registro en la consola REACT_API_KEY, se lee como indefinido
He reiniciado el servidor varias veces, todo se guarda.
Recomiendo usar una biblioteca llamada dotenv . Esto leerá su archivo .env .
digamos que tiene una variable de entorno: REACT_API_KEY=APIKEY .
Puede acceder al valor de esta manera:
require('dotenv').config(); console.log(process.env.REACT_API_KEY); Esto registrará: APIKEY
Esto estará en el lado del backend, luego debe usar algún tipo de biblioteca node.js para entregar los datos al frontend. Aquí hay un ejemplo usando express :
const express = require('express'); const app = express(); require('dotenv').config(); app.get('/apikey', (req, res) => { res.send(process.env.REACT_API_KEY); }) Ahora, en la interfaz, deberá crear una solicitud GET para este uri para obtener los datos. Aquí hay un ejemplo usando axios :
axios.get('/apikey').then((res) => { console.log(res); // res will be your API key in a String format })Obviamente, debido a que esta clave está oculta en el backend, no querrá que los usuarios puedan acceder a este punto final en su API. puede configurar a qué puntos finales desea que sus usuarios puedan acceder utilizando un servidor web como nginx .
Esto puede parecer mucho para una variable de entorno, aunque estos pasos resolverán muchos de sus problemas en el futuro, como inicios de sesión y registro de usuarios, y otros datos.
Así es como lo hace sin el proceso de compilación de ReactJS. Si está utilizando create-react-app para compilar su aplicación, puede usar las variables de entorno de React que se incrustan durante el proceso de compilación. Mira esto en la documentación de reacción
Debe agregar process.env al principio.