web-dev-qa-db-fra.com

Est-il possible d'utiliser dotenv dans un projet React?

J'essaie de définir certaines variables d'environnement (pour faire des appels API aux points de terminaison dev/prod, des clés dépendant de dev/prod, etc.) et je me demande si l'utilisation de dotenv fonctionnera.

J'ai installé dotenv et j'utilise webpack.

Mon entrée de webpack est main.js, Donc dans ce fichier j'ai mis require('dotenv').config()

Ensuite, dans ma configuration webpack, j'ai mis ceci:

  new webpack.EnvironmentPlugin([
    'NODE_ENV',
    '__DEV_BASE_URL__'  //base url for dev api endpoints
  ])

Cependant, il n'est toujours pas défini. Comment puis-je le faire correctement?

javascriptreactjswebpack
10
user1354934

La réponse courte est non. Un navigateur ne peut pas accéder aux variables d'environnement local ou serveur, donc dotenv n'a rien à rechercher. Au lieu de cela, vous spécifiez des variables ordinaires dans votre application React, généralement dans un module de paramètres.

Webpack peut être créé pour extraire les variables d'environnement de la machine de génération et les intégrer dans vos fichiers de paramètres. Cependant, cela fonctionne en remplaçant réellement les chaînes au moment de la construction, pas au moment de l'exécution. Ainsi, chaque version de votre application aura les valeurs codées en dur. Ces valeurs seraient alors accessibles via le process.env objet.

var nodeEnv = process.env.NODE_ENV;

De plus, vous pouvez utiliser le DefinePlugin pour webpack qui vous permet de spécifier explicitement différentes valeurs en fonction de votre cible de construction (dev, prod, etc.). Notez que vous devez JSON.stringify toutes les valeurs lui ont été transmises.

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

C'est très bien pour tout type de détails publics mais devrait ne jamais être utilisé pour tout type de clés privées, mots de passe ou secrets API. En effet, toutes les valeurs intégrées sont accessibles au public et pourraient être utilisées de manière malveillante si elles contiennent des détails sensibles. Pour ce genre de choses, vous devez écrire du code côté serveur et créer une API simple qui peut s'authentifier avec l'API tierce en utilisant les secrets, puis transmettre les détails pertinents à votre application côté client. Votre API côté serveur agit comme un intermédiaire, protégeant vos secrets tout en obtenant les données dont vous avez besoin.

18
Soviut

Désolé d'avoir répondu à une vieille question, mais
react-scripts utilise en fait la bibliothèque dotenv sous la capuche.

Avec [email protected] et supérieur, vous pouvez travailler avec des variables d'environnement de cette façon:

  1. créer le fichier . env à la racine du projet
  2. définir les variables d'environnement commençant par REACT_APP _ là
  3. y accéder par process.env.REACT_APP _... dans les composants

. env

REACT_APP_BASE_URL=http://localhost:3000

App.js

const BASE_URL = process.env.REACT_APP_BASE_URL;

Voir docs pour plus de détails.

15
Dmitry Demidovsky

En fait, vous pouvez utiliser dotenv dans votre application React avec webpack. De plus, il existe plusieurs façons de le faire. Cependant, gardez à l'esprit qu'il s'agit toujours d'une configuration au moment de la construction.

  1. Une manière similaire à la réponse ci-dessus. Vous importez dotenv dans votre configuration de webpack et utilisez DefinePlugin pour transmettre les variables à votre application React. Guide plus complet sur la façon d'injecter votre .env des fichiers en fonction de la configuration actuelle ont pu être trouvés dans ce blog .

  2. Utilisant un dotenv-webpack plugin . Personnellement, je trouve cela très pratique. Disons que vous avez des environnements: dev, staging et prod. Vous créez un fichier .env pour chaque environnement (.env.dev, .env.staging, etc). Dans votre configuration de webpack, vous devez choisir un fichier correct pour l'environnement:

    const Dotenv = require('dotenv-webpack');

module.exports = (env, argv) => {
    const envPath = env.ENVIRONMENT ? `.env.${env.ENVIRONMENT}` : '.env';

    const config = {
        ...
        plugins: [
            new Dotenv({
                path: envPath
            })
        ]
    };

    return config;
};

Lorsque vous créez l'application pour un environnement particulier, passez simplement le nom de l'environnement à webpack:

webpack --config webpack.config.js --env.ENVIRONMENT=dev
0
sergio