Variables d'environnement dans les projets React

Les applications Web modernes font un usage intensif de divers types d’API. Pour les faire fonctionner, ils ont besoin de clés ou d’autres informations pour identifier et suivre chaque utilisation de l’API. La détention de clés API est l’une des nombreuses applications des variables d’environnement. En général, leur objectif principal est de stocker les informations d’identification essentielles au développement Web. Il offre également aux développeurs d’applications un espace unique pour ajuster les données de configuration en cas de besoin. De cette façon, il n’est pas nécessaire de rechercher et de modifier manuellement chaque instance de données de configuration.

Au début, les variables d’environnement React peuvent être déroutantes, en particulier pour ceux qui n’ont pas d’expérience back-end. Cependant, les développeurs qui ont l’intention de travailler sur des applications à grande échelle doivent se familiariser avec les variables d’environnement.

Règles pour les variables d’environnement React

Notez que les valeurs stockées dans les variables d’environnement ne sont pas privées. Par exemple, ils ne sont pas pratiques pour stocker des clés API secrètes. Une fois votre application déployée, les valeurs des variables d’environnement seront visibles dans le code source. Chaque fois que vous ajoutez une variable d’environnement, vous devez redémarrer votre application avant de référencer la valeur qui y est stockée.

Variables d’environnement dans create-react-app

Les projets React construits avec create-react-app avec la version react-scripts @0.5.0 ou supérieure prennent en charge les variables d’environnement, donc aucun package externe n’est nécessaire.

Tant que vous avez installé la dernière version du package create-react-app, il vous suffit de créer un fichier .env.local dans le répertoire principal (le même dossier qui comprend README.md, package.json, et d’autres fichiers) et l’utiliser pour définir les variables. Voici un exemple :

REACT_APP_CREDENTIAL_DATA = 'some-credential-data'

L’extension .env.local est nécessaire pour s’assurer que le fichier est automatiquement ajouté au fichier .gitignore lors de l’initialisation du projet.

Pour utiliser la prise en charge intégrée de create-react-app pour les variables d’environnement, vous devez préfixer les noms de variables avec REACT_APP.

Variables d’environnement sans create-react-app

Si vous avez un environnement React personnalisé sans react-scripts, vous devrez installer un package externe pour utiliser les variables d’environnement dans React.

À cette fin, vous pouvez installer un populaire dotenv paquet spécialement conçu à cet effet.

Tout d’abord, vous devez ouvrir la ligne de commande dans le dossier du projet et installer ce package :

npm install dotenv

Ensuite, vous devez le rendre disponible et configurer les paramètres. Ajoutez le code suivant à l’application :

require('dotenv').config()

Une fois cela fait, vous pouvez créer un fichier .env.local dans le dossier, comme vous le feriez pour les applications construites avec create-react-app. Vous devez également commencer les noms de variables par le préfixe REACT_APP.