Si hallas algún fallo en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes subir el código al trabajo final.
Solución:
4 pasos
-
npm install dotenv --save -
A continuación, agregue la siguiente línea a su aplicación.
require('dotenv').config() -
Luego crea un
.enven el directorio raíz de su aplicación y agréguele las variables.
// contents of .env
REACT_APP_API_KEY = 'my-secret-api-key'
- Finalmente, agregue
.envpara usted.gitignorearchivo para que Git lo ignore y nunca termine en GitHub.
Si está utilizando create-react-app, solo necesita los pasos 3 y 4, pero tenga en cuenta que las variables deben comenzar con REACT_APP_ para que funcione.
Referencia: https://create-react-app.dev/docs/adding-custom-environment-variables/
NOTA – Necesita reiniciar la aplicación después de agregar la variable en el archivo .env.
Referencia: https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f
Así que soy nuevo en React y encontré una manera de hacerlo.
Esta solución hace No se requiere cualquier paquete adicional.
Paso 1 ReactDocs
En los documentos anteriores mencionan exportar en Shell y otras opciones, la que intentaré explicar es usar .env expediente
1.1 crear raíz/.env
#.env file
REACT_APP_SECRET_NAME=secretvaluehere123
Notas importantes DEBER Empezar con REACT_APP_
1.2 Acceder a la variable ENV
#App.js file or the file you need to access ENVprint env secret to HTML
process.env.REACT_APP_SECRET_NAMEhandleFetchData() // access in API call
fetch(`https://awesome.api.io?api-key=$process.env.REACT_APP_SECRET_NAME`)
.then((res) => res.json())
.then((data) => console.log(data))1.3 Problema de entorno de compilación
Entonces, después de hacer el paso 1.1 | 2, no estaba funcionando, luego encontré el problema / solución anterior. React read/crea env cuando se construye, por lo que debe npm inicio de ejecución cada vez que modifica el archivo .env para que las variables se actualicen.
Hoy en día existe una forma más sencilla de hacerlo.
Simplemente cree el archivo .env.local en su directorio raíz y configure las variables allí. En tu caso:
REACT_APP_API_KEY = 'my-secret-api-key'Luego lo llamas en tu archivo js de esa manera:
process.env.REACT_APP_API_KEYReact admite variables de entorno desde [email protected] .No necesita un paquete externo para hacer eso.
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
* nota: propongo .env.local en lugar de .env porque create-react-app agrega este archivo a gitignore al crear el proyecto.
Prioridad de archivos:
inicio de npm: .env.desarrollo.local, .env.desarrollo, .env.local, .env
npm ejecutar compilación: .env.production.local, .env.production, .env.local, .env
Prueba npm: .env.test.local, .env.test, .env (nota que falta .env.local)
Más información: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
Te mostramos comentarios y valoraciones
Si estás contento con lo expuesto, tienes la habilidad dejar un escrito acerca de qué te ha impresionado de este ensayo.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)Utiliza Nuestro Buscador