Dans le développement Web moderne, la gestion des données sensibles telles que les clés API, les informations d'identification de la base de données et diverses configurations pour différents environnements est essentielle. Le stockage de ces variables directement dans le code peut présenter des risques de sécurité et compliquer le déploiement. Vite, un outil de construction frontal moderne, fournit un moyen simple de gérer les variables d'environnement via des fichiers .env.

Qu'est-ce qu'un fichier .env ?

Un fichier .env est un simple fichier de configuration utilisé pour définir des variables spécifiques à l'environnement. Ces variables sont accessibles au sein de votre application tout en restant distinctes du code source. Cette pratique permet une gestion facile de différents environnements (développement, préparation et production) sans coder en dur les données sensibles.

Variables d'environnement dans Vite :

Vite est livré avec une prise en charge intégrée des variables d'environnement, ce qui facilite l'injection de différentes valeurs en fonction de l'environnement actuel. Voici comment Vite gère les variables d'environnement :

Variables globales : Vite injecte des variables d'environnement au moment de la construction.
Variables préfixées : Seules les variables préfixées par VITE_ sont exposées au code JavaScript côté client pour des raisons de sécurité. Toutes les variables non préfixées de cette manière ne seront pas accessibles dans le navigateur.

Exemple de variable d'environnement Vite :

VITE_API_URL=https://api.example.com

Configuration des fichiers .env dans Vite
Vite prend en charge plusieurs fichiers .env, vous permettant de définir des variables d'environnement pour des environnements spécifiques. Voici une configuration typique :

.env : fichier par défaut pour les variables d'environnement partagées dans tous les environnements.
.env.development : Variables spécifiques à l'environnement de développement.
.env.production : Variables spécifiques à l'environnement de production.

Exemple de fichier .env :

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

Exemple de fichier .env.development :

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

Exemple de fichier .env.production :

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

Accès aux variables d'environnement dans Vite

Pour accéder aux variables d'environnement dans votre projet Vite, utilisez l'objet import.meta.env.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite remplace automatiquement les valeurs import.meta.env pendant le processus de construction en fonction de l'environnement actuel.

Gestion de plusieurs environnements :

Les fichiers .env de Vite peuvent être personnalisés pour différents environnements tels que le développement, la préparation et la production. En fonction de l'environnement dans lequel vous vous trouvez, Vite chargera le fichier .env approprié :

L'exécution de vite charge le fichier .env.development.
L'exécution de vite build charge le fichier .env.production.
Exécution dans un environnement spécifique :

vite --mode staging

Variables d'environnement de débogage :

Si vous rencontrez des problèmes avec les variables d'environnement qui ne fonctionnent pas comme prévu, vérifiez les points suivants :

• Préfixe de variable : assurez-vous que toutes les variables côté client portent le préfixe VITE_, car Vite ignore les variables sans ce préfixe.
• Ordre de chargement de l'environnement : assurez-vous que les fichiers .env et spécifiques à l'environnement se trouvent à la racine du projet et sont correctement nommés.
• Vérifiez le processus de construction : utilisez console.log(import.meta.env) pour voir toutes les variables d'environnement disponibles pendant le développement.

Conclusion::

La prise en charge intégrée par Vite des variables d'environnement via les fichiers .env facilite la gestion des configurations dans différents environnements.