Estoy creando una aplicación de reacción y necesito obtener datos de mi API, ahora quiero almacenar la URL de la API como una variable de entorno. Tengo mi archivo .env, tengo dotenv instalado, aquí está mi código process.env.API_URL está devolviendo indefinido.
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Home from '../src/components/Home' import dotenv from 'dotenv' import path from 'path' class App extends Component { render() { console.log(process.env.API_URL) return ( <div> <Home/> </div> ); } } export default App;Tres cosas a tener en cuenta aquí
la variable debe tener el prefijo REACT_APP_
por ejemplo: REACT_APP_WEBSITE_NAME=hello
Debe reiniciar el servidor para reflejar los cambios.
Asegúrese de tener el archivo .env en su carpeta raíz (el mismo lugar donde tiene su paquete.json) y NO en su carpeta src.
Después de eso, puede acceder a la variable como este process.env.REACT_APP_SOME_VARIABLE
Consejos adicionales
; o coma , al final de cada línea.Lea más aquí (mi propia publicación) y los documentos oficiales
Probablemente necesitará llamar a dotenv.config() como lo sugiere el documento
Si está utilizando create-react-app, no necesita el paquete dotenv . Deberá agregar el prefijo REACT_APP_ al nombre de la variable en el archivo .env . Ver el documento aquí
Agregue el prefijo REACT_APP_ en las variables de entorno de React.
apiKey: process.env.REACT_APP_API_KEYAsegúrese de que el archivo .env esté en el directorio raíz.
src/ .env .gitignore package.json package-lock.jsonReinicie el servidor de desarrollo después de realizar cambios en el archivo .env.
Copie solo el valor entre comillas y no olvide eliminar las comas finales (me persiguió durante varias horas). Estos ejemplos le darán un error.
REACT_APP_API_KEY=Ach2o1invVocSn25FcQhash209, REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209", REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209"