web-dev-qa-db-fra.com

Ajout d'un fichier .env au projet React

J'essaie de cacher ma clé API pour le moment où je m'engage à github, et j'ai consulté le forum pour obtenir des conseils, notamment le post suivant:

Comment masquer la clé de l'API dans create-react-app?

J'ai fait les changements et repris le fil. 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 ainsi que j'ajoute la clé à ma fetch dans App.js et que j'ai essayé plusieurs formats, y compris sans utiliser le littéral de modèle, mais mon projet ne sera toujours pas compilé.

Toute aide est très appréciée.

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

reactjsenvironment-variablesapi-key
13
Bianca M

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

Cette solution ne ne nécessite pas tous les paquets supplémentaires.

Étape 1 ReactDocs

Dans les documents ci-dessus, ils mentionnent l'exportation dans Shell et d'autres options, celle que j'essaierai d'expliquer utilise le fichier .env.

1.1 créer une racine/.env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Notes importantes il DOIT commence par REACT_APP_

1.2 Variable Access 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 Édition

Ainsi, après avoir suivi l'étape 1.1 | 2, cela ne fonctionnait pas, puis j'ai trouvé le problème/la solution ci-dessus. Reactive read/crée env quand est construit. Vous devez donc npm run start chaque fois que vous modifiez le fichier .env pour que les variables soient mises à jour.

2
T04435

Utilisateurs Webpack

Si vous utilisez Webpack, vous pouvez installer et utiliser le plugin dotenv-webpack. Pour ce faire, procédez comme suit:

Installer le paquet

yarn add dotenv-webpack

Créer un fichier .env

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

Ajoutez-le au fichier webpack.config.js

// 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 d'informations sur la configuration, visitez ici

2
Aminu Kano

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 les variables à cet emplacement. Dans ton cas:

REACT_APP_API_KEY = 'my-secret-api-key'

Ensuite, vous appelez cela votre fichier js de cette façon:

process.env.REACT_APP_API_KEY

React prend en charge les variables d'environnement depuis [email protected]. Vous n'avez pas besoin d'un package externe pour le faire.

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

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

Priorité des 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 (notez que .env.local est manquant)

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

1
Pablo