Ajout d'un fichier .env au projet React

Question

J'essaie de masquer ma clé API lorsque je fais un commit sur github, et j'ai parcouru le forum pour trouver des conseils, notamment le post suivant :

Comment cacher la clé API dans create-react-app ?

J'ai fait les changements et j'ai redémarré Yarn. Je ne suis pas sûr de ce que je fais de mal - j'ai ajouté un fichier .env à la racine de mon projet (je l'ai nommé process.env ) et dans le fichier je viens de mettre REACT_APP_API_KEY = 'my-secret-api-key' .

Je pense que c'est peut-être la façon dont j'ajoute la clé à mon fetch dans App.js, et j'ai essayé plusieurs formats, y compris sans utiliser le modèle littéral, mais mon projet ne compile toujours pas.

Toute aide est la bienvenue.

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

Answer 1

4 étapes

1. npm install dotenv --save

2. Ajoutez ensuite la ligne suivante à votre application.

   require('dotenv').config()

3. Créez ensuite un .env dans le répertoire racine de votre application et ajoutez-y les variables.

   // contents of .env

   REACT_APP_API_KEY = 'my-secret-api-key'

4. Enfin, ajoutez .env à votre .gitignore afin que Git l'ignore et qu'il n'apparaisse jamais sur GitHub.

Si vous utilisez create-react-app alors vous n'avez besoin que des étapes 3 et 4 mais gardez à l'esprit que la variable doit commencer avec REACT_APP_ pour qu'il fonctionne.

Référence : https://create-react-app.dev/docs/adding-custom-environment-variables/

NOTE - Nécessité de redémarrer l'application après avoir ajouté une variable dans le fichier .env.

Référence - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Answer 2

Je suis donc moi-même nouveau dans React et j'ai trouvé un moyen de le faire.

Cette solution ne ne pas exiger tout paquet supplémentaire.

Étape 1 ReactDocs

Dans les documents ci-dessus, ils mentionnent l'exportation en Shell et d'autres options, celle que je vais tenter d'expliquer est l'utilisation de la méthode suivante .env fichier

1.1 créer Root/.env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Remarques importantes MUST commencer par REACT_APP_

1.2 Accès à 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 Build Env Numéro

Après avoir effectué l'étape 1.1|2, cela ne fonctionnait pas, puis j'ai trouvé le problème/solution ci-dessus. React lit/crée l'environnement lorsqu'il est construit, vous devez donc npm run start à chaque fois que vous modifiez le fichier .env pour que les variables soient mises à jour.

Answer 3

Il existe aujourd'hui un moyen plus simple de le faire.

Créez simplement le fichier .env.local dans votre répertoire racine et définissez-y les variables. Dans votre cas :

REACT_APP_API_KEY = 'my-secret-api-key'

Puis vous l'appelez dans votre fichier js de cette façon :

process.env.REACT_APP_API_KEY

React supporte les variables d'environnement depuis react-scripts@0.5.0. Vous n'avez pas besoin de package externe pour le faire.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

*note : Je propose .env.local au lieu de .env car create-react-app ajoute ce fichier à gitignore lors de la création du projet.

Priorité aux fichiers :

npm start : .env.development.local, .env.development, .env.local, .env

npm run build : .env.production.local, .env.production, .env.local, .env

npm test : .env.test.local, .env.test, .env (note .env.local est manquant)

Plus d'informations : https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Answer 4

Utilisateurs de Webpack

Si vous utilisez webpack, vous pouvez installer et utiliser dotenv-webpack Pour ce faire, suivez les étapes ci-dessous :

Installer le paquet

yarn add dotenv-webpack

Créer un .env fichier

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

Ajoutez-le à webpack.config.js fichier

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

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

Utilisez-le dans votre code comme

process.env.API_KEY

Pour plus d'informations et de renseignements sur la configuration, visitez aquí

Answer 5

Vous devez installer npm install env-cmd

Créez un fichier .env dans le répertoire racine et mettez-le à jour comme suit : &. REACT_APP_ est le préfixe obligatoire pour le nom de la variable.

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

Mise à jour de package.json

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