Agregar un archivo .env a React Project

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);
     });
}

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'

4. 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

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.

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 [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 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

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í

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

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"
  }

1. Instalar dotenvcomo devDependencies:

npm i --save-dev dotenv

2. Cree un .envarchivo en el directorio raíz:

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

3. 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

4. [ 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;

5. O simplemente puede llamar a la variable de entorno en su archivo JS de la siguiente manera:

process.env.REACT_APP_BASE_URL

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