web-dev-qa-db-fra.com

importer la variable env réagir front end

J'ai démarré une application en utilisant create-react-app. J'ai un jeton que je ne souhaite pas pousser vers GitHub.

J'ai exécuté yarn add dontenv et ensuite essayé d'importer la variable env dans mon fichier App.js.

Mon code ressemble à ceci

.env 

TOKEN=**************

Ensuite, mon fichier app.js ressemble à ceci:

app.js 

import React from 'react';
import ReactDOM from 'react-dom';
require('dotenv').config();

const App = props => {
    console.log(process.env.token);
    return <p>Test</p>
}

process.env.token est undefined. Quelqu'un peut-il me conseiller sur l'utilisation de la doting dans l'interface frontale ou sur la façon de procéder à l'aide d'une application de création bootstrap?

javascriptreactjsecmascript-6environment-variables
7
peter flanagan

Vous n'avez pas besoin de dotenv (et je doute que la bibliothèque fonctionne de toute façon au moment de l'exécution dans une application côté client).

create-react-app fournit réellement cette fonctionnalité prête à l'emploi , en supposant que vous utilisez [email protected] ou une version ultérieure.

Les étapes sont les suivantes:

  • Créez un fichier .env à la racine de votre projet.
  • Ajoutez une variable en commençant par le préfixe REACT_APP_.
  • Accédez-y via process.env.

La seconde partie est la partie la plus importante - pour éviter d’exposer des variables par accident, create-react-app vous oblige à utiliser un préfixe comme moyen de dire «oui, je sais ce que je fais».

Si vous n'avez pas l'intention de pousser le fichier dans le contrôle de code source (ce qui ne devrait pas être le cas si des clés secrètes y sont introduites!), Utiliser un fichier .env.local est plus idiomatique, mais requiert [email protected] ou une version ultérieure.

22
Joe Clay

dOTENV est à utiliser avec noeud uniquement, ne pas réagir. 

Une façon de gérer ce côté client si vous n’avez pas de serveur connecté est de vérifier votre nom d’hôte:

if(hostname === 'realsite.com') {
  token = 'foo';
} else if(hostname === 'staging.realsite.com') {
  token = 'bar';
} else {
  token = 'baz';
}

Sinon, définissez la variable dans votre fichier .env et passez-la du back-end au front-end. Il existe plusieurs façons de passer cela, en fonction de la configuration de votre application.

0
Stretch0

Vous n'avez pas besoin d'utiliser une logique de code à cette fin. Vous devez utiliser différents fichiers .env pour la production et le développement si vous souhaitez gérer différentes valeurs pour différents environnements. Voir ma réponse ici

0
Nastro