Gérer les variables d'environnement dans React avec Vite

Dans un projet React utilisant Vite, gérer les variables d'environnement est essentiel pour stocker des informations sensibles comme les clés d'API ou les URLs de services. Voici comment les configurer et les utiliser efficacement.

1. Créer un fichier .env

Dans le répertoire racine de votre projet, créez un fichier nommé .env. Ajoutez-y vos variables d'environnement, en les préfixant toujours par REACT_APP_. Par exemple :

⚠️ Important : Ajoutez le fichier .env à votre fichier .gitignore pour éviter qu'il ne soit inclus dans votre dépôt Git.

2. Installer le plugin nécessaire

Pour rendre les variables d'environnement compatibles avec React et Vite, installez le plugin suivant :

npm install vite-plugin-env-compatible

3. Configurer le fichier vite.config.js

Ajoutez le plugin à votre configuration Vite et spécifiez le préfixe attendu :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import envCompatible from "vite-plugin-env-compatible";

export default defineConfig({
  envPrefix: "REACT_APP_", // Spécifie le préfixe requis
  plugins: [react(), envCompatible()],
});

4. Utiliser les variables d'environnement

Pour récupérer les variables définies dans votre fichier .env, utilisez import.meta.env. Par exemple :

const apiUrl = import.meta.env.REACT_APP_API_URL;
const serviceId = import.meta.env.REACT_APP_SERVICE_ID;

console.log("API URL:", apiUrl);
console.log("Service ID:", serviceId);

Vous pouvez ensuite utiliser ces variables dans vos composants React.

Conclusion

En suivant ces étapes, vous pouvez configurer et utiliser facilement des variables d'environnement dans un projet React utilisant Vite. Cela garantit une gestion sécurisée et organisée des informations sensibles.