Estoy tratando de ocultar mi clave API para cuando me comprometo con github, y he buscado orientación en el foro, especialmente en la siguiente publicación:
¿Cómo oculto la clave API en create-react-app?
Hice los cambios y reinicié yarn. No estoy seguro de lo que estoy haciendo mal: agregué un archivo .env a la raíz de mi proyecto (lo llamé process.env ) y en el archivo solo puse REACT_APP_API_KEY = 'my-secret-api-key' .
Estoy pensando que podría ser la forma en que estoy agregando la clave a mi fetch en App.js, y probé varios formatos, incluso sin usar el literal de la plantilla, pero mi proyecto aún no se compilará.
Cualquier ayuda es muy apreciada.
performSearch = (query = 'germany') => { fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`) .then(response => response.json()) .then(responseData => { this.setState({ results: responseData.results, loading: false }); }) .catch(error => { console.log('Error fetching and parsing data', error); }); }4 pasos
npm install dotenv --save
A continuación, agregue la siguiente línea a su aplicación.
require('dotenv').config()
A continuación, cree un archivo .env en el directorio raíz de su aplicación y agréguele las variables.
// contents of .env REACT_APP_API_KEY = 'my-secret-api-key'.env a su archivo .gitignore 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 la variable debe comenzar con REACT_APP_ para que funcione.
Referencia: https://create-react-app.dev/docs/adding-custom-environment-variables/
NOTA : es necesario 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 no requiere paquetes adicionales.
En los documentos anteriores mencionan exportar en Shell y otras opciones, la que intentaré explicar es usar el archivo .env
1.1 crear raíz/.env
#.env file REACT_APP_SECRET_NAME=secretvaluehere123Notas importantes DEBE comenzar con REACT_APP_
1.2 Acceder a la variable ENV
#App.js file or the file you need to access ENV <p>print env secret to HTML</p> <pre>{process.env.REACT_APP_SECRET_NAME}</pre> handleFetchData() { // 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 realizar el paso 1.1 | 2, no funcionó, luego encontré el problema / solución anterior. React read/crea env cuando se compila, por lo que debe ejecutar npm run start cada vez que modifique 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 react-scripts@0.5.0. No necesita un paquete externo para hacerlo.
* 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