Agregar un archivo .env a React Project


84

Estoy tratando de ocultar mi clave API para cuando me comprometo con github, y he buscado orientación en el foro, especialmente la siguiente publicación:

¿Cómo oculto la clave API en create-react-app?

Hice los cambios y reinicié el hilo. No estoy seguro de qué estoy haciendo mal - agregué un .envarchivo a la raíz de mi proyecto (lo nombré process.env) y en el archivo que acabo de poner REACT_APP_API_KEY = 'my-secret-api-key'.

Estoy pensando que podría ser la forma en que agrego la clave a mi fetchen App.js, y probé varios formatos, incluso sin usar la plantilla literal, 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);
     });
}


en lugar de process.envnombrarlo .env.local or .env.process y mantenerlo fuera del directorio src
RIYAJ KHAN

1
Hola @RIYAJKHAN Cambié el archivo a .env.local y definitivamente está fuera del directorio src, pero todavía obtengo REACT_APP_API_KEY no definido: /
Bianca M

1
Lo que me solucionó fue simplemente cerrar la terminal que ejecuta mi servidor de desarrollo local y volver a ejecutarla npm run start.
n00bAppDev

3
No puedes ocultar secretos en una aplicación de reacción. Ver stackoverflow.com/a/46839021/4722345
JBallin

5
NO use esto para almacenar secretos. De los documentos ...WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
Nishant Mehta

Respuestas:


97

4 pasos

  1. npm install dotenv --save

  2. A continuación, agregue la siguiente línea a su aplicación.

    require('dotenv').config()

  3. Luego cree un .envarchivo en el directorio raíz de su aplicación y agregue las variables.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'
  1. Finalmente, agregue .enva su .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 : es necesario reiniciar la aplicación después de agregar una variable en el archivo .env.

Referencia: https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f


34
necesita reiniciar la aplicación después de agregar la variable en el archivo .env. Use "REACT_APP_" antes del nombre de la variable si crea una aplicación de reacción usando "create-react-app".
vikash

@tarzen chugh, ¿qué pasa si estoy implementando mi aplicación en AWS, por ejemplo? Dado que .env es parte de gitignore, ¿no sería ignorado? ¿Cómo puedo incluir la producción?
user2763557

@vikash Esto fue todo para mí, pequeño comentario de gran impacto
Benyam Ephrem

donde agrego require('dotenv').config()? cual archivo?
aqteifan

@aqteifan no es necesario que agregue ese fragmento, pero luego la denominación de archivos .ENV juega un papel vital
Probado

83

Así que soy nuevo en React y encontré una manera de hacerlo.

Esta solución no requiere ningún paquete adicional.

Paso 1 ReactDocs

En los documentos anteriores mencionan exportar en Shell y otras opciones, la que intentaré explicar es el uso del archivo .env

1.1 crear Root / .env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Notas 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 construcción

Entonces, después de hacer el paso 1.1 | 2, no funcionaba, luego encontré el problema / solución anterior. Reaccionar lectura / crea env cuando está construido, por lo que debe ejecutar npm run start cada vez que modifica el archivo .env para que las variables se actualicen.


7
En mi opinión, ¡esta es la respuesta correcta! No se necesitan paquetes adicionales y la forma adecuada de React para importar variables de entorno. Otras formas funcionarán, pero ¿por qué agregar un paquete y una configuración de código cuando esto ya está hecho por usted? ¡Gran respuesta!
Ryanm

12
Me estaba perdiendo este REACT_APP_agradecimiento. Ninguna otra persona lo mencionó.
rotimi-best

Esto no funcionó para mí por alguna razón. Reciboundefined
Si8

@ Si8 ¿podría ampliar su error / proceso? Qué paso obtuvo undefined, reinició la aplicación después de agregar una nueva variable a .env ver 1.3
T04435

@ T04435 gracias por esta respuesta compañero funcionó como el encanto REACT_APP_es la clave aquí. Además, ¿cómo puedo configurar para diferentes servidores que tengo dev / beta / producción, necesito tener diferentes archivos env para cada servidor?
Kannan T

33

Hoy en día existe una forma más sencilla de hacerlo.

Simplemente cree el archivo .env.local en su directorio raíz y establezca las variables allí. En tu caso:

REACT_APP_API_KEY = 'my-secret-api-key'

Luego lo llama en su archivo js de esa manera:

process.env.REACT_APP_API_KEY

React admite variables de entorno desde react-scripts@0.5.0. 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 cuando crea el proyecto.

Prioridad de archivos:

inicio npm: .env.development.local, .env.development, .env.local, .env

npm ejecutar compilación: .env.production.local, .env.production, .env.local, .env

prueba npm: .env.test.local, .env.test, .env (tenga en cuenta que falta .env.local)

Más información: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables


Nombrar correctamente hizo el trabajo por mí. Usé .env.dev y React volvió a .env mientras buscaba el desarrollo de .env
Omnibyte

25

Usuarios de Webpack

Si está utilizando el paquete web, puede instalar y usar el dotenv-webpackcomplemento, para hacerlo, siga los pasos a continuación:

Instalar el paquete

yarn add dotenv-webpack

Crea un .envarchivo

// .env
API_KEY='my secret api key'

Agregarlo al webpack.config.jsarchivo

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Úselo en su código como

process.env.API_KEY

Para obtener más información e información de configuración, visite aquí


si está utilizando webpack-devserver, no verá cambios hasta que lo reinicie.
Isaac Pak

Esta fue la mejor solución para mí. Gracias. Una nota: estoy usando la representación del lado del servidor, así que tuve que actualizar ambos archivos de paquete web (cliente también).
Jorge Mauricio

@Aminu Kano, ¿podría explicarme cuál es el punto de usar este enfoque si la clave api todavía es visible si veo el archivo bundle.js en línea en las fuentes?
Linas M.

@LinasM. sí, claro, pero ¿qué quieres decir con "online"?
Aminu Kano

1
@AminuKano, Sí, eso explicó el punto muy claramente. Gracias
Linas M.

9

1. Cree el archivo .env en su carpeta raíz

algunas fuentes prefieren usar .env.developmenty .env.productioneso no es obligatorio.

2. El nombre de su VARIABLE -debe- comenzar con REACT_APP_YOURVARIABLENAME

parece que si su variable de entorno no comienza así, tendrá problemas

3. Incluya su variable

para incluir su variable de entorno, simplemente ponga su código process.env.REACT_APP_VARIABLE

No tienes que instalar ninguna dependencia externa


Hago lo mismo pero aparece indefinido en la consola
PRADIP GORULE

Puedo confirmar eso. Esto no funciona.
Hipótesis

1
Si obtiene los valores como indefinidos, vuelva a compilar.
anónimo

8

Tienes que instalar npm install env-cmd

Cree .env en el directorio raíz y actualice así & REACT_APP_ es el prefijo obligatorio para el nombre de la variable.

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

Actualizar package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

6
  1. Instalar dotenvcomo devDependencies:
npm i --save-dev dotenv
  1. Cree un .envarchivo en el directorio raíz:
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
  1. Actualice el .envarchivo como se muestra a continuación & REACT_APP_ es el prefijo obligatorio para el nombre de la variable.
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
  1. [ Opcional pero buena práctica ] Ahora puede crear un archivo de configuración para almacenar las variables y exportar la variable para poder usarlo desde otros archivos.

Por ejemplo, he creado un archivo con el nombre base.jsy lo actualizo como se muestra a continuación:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
  1. O simplemente puede llamar a la variable de entorno en su archivo JS de la siguiente manera:
process.env.REACT_APP_BASE_URL

¿Cómo se diferencia entre entornos de desarrollo y de producción cuando se utiliza un solo .envarchivo? Soy consciente de que tenemos que crear archivos .env.developmenty .env.prod, pero ¿cómo los diferenciamos con su método?
ameyaraje

@ameyaraje Básicamente, ignoramos el .envarchivo en nuestro .gitignore. Entonces, en la implementación, simplemente copiamos el .envarchivo a nuestro servidor y simplemente cambiamos BASE_URL y otros valores necesarios. De esta manera, cuando necesita implementar el último código, simplemente lo extraemos del git master y lo implementamos. No pensamos en el .envya que lo ignoramos y lo configuramos en nuestro servidor desde el principio. ¡Gracias!
Fatema T.Zuhora

process.env.REACT_APP_API_KEY no da valor mostrando undefined. Detuve el servidor y reinicié con npm start
vikramvi

@vikramvi ¿Pones el valor en una variable con el mismo nombre REACT_APP_BASE_URLen el archivo .env?
Fatema T.Zuhora

@ FatemaT.Zuhora fue mi error, había puesto .env en el directorio secundario por error en lugar de ponerlo en el directorio raíz
vikramvi

0

Si está obteniendo los valores como undefined, debería considerar reiniciar el servidor de nodo y volver a compilarlo.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.