Tout comprendre sur le fichier .env avec ReactJS

C'est quoi un fichier .env ?

C'est un fichier qu'on utilise pour sauvegarder des variables d'environnement.

Une variable d'environnement, c'est juste une variable que l'on rend accessible dans tout notre projet.

On l'utilise généralement pour :

• Stocker des clés API
• Se souvenir de certaines URLs
• Rendre paramétrable certains noms (le nom du site par exemple)

Pourquoi utiliser un fichier .env ?

L'intérêt, c'est surtout que le jour où le développeur souhaite modifier une clé API par exemple, ou, comme nous l'avons vu, une adresse voir même un nom, il suffit qu'il le change à un seul endroit : dans le fichier .env.

Sans ce fichier .env il aurait dû modifier sa clé API dans tous les fichiers qui l'utilisent : parfois, il pourrait y mettre des heures et des heures.

Grâce à ce fichier, il ne modifie l'information que dans un seul endroit, son fichier .env.

Un autre intérêt, c'est que par défaut, le fichier .env n'est pas envoyé aux services distants tels que GitHub ou GitLab : le fichier .env est ignoré par Git.

Attend un peu, c'est quoi Git ? 👀

Git, c'est un logiciel en ligne de commande (donc qui s'utilise depuis le terminal de l'ordinateur) et qui permet de créer plusieurs versions d'un projet.

Il s'agit d'un outil extrêmement important pour tout bon développeur web.

Envie d'apprendre à utiliser Git ?

👉 Apprenez Git grâce à notre formation en cliquant ici

En bref, aucun risque de mettre en ligne des clés secrète car le fichier qui contient nos informations n'est jamais poussé en ligne. On respecte ainsi les principes de sécurité et de non-répétition.

Comment créer un fichier .env ?

Dans la base de votre projet React (par exemple), il vous suffit de créer un fichier .env sans aucun nom. Juste avec cette extension.

Vous pouvez aussi créer des fichiers spécifiques selon le contexte de l'exécution de votre projet.

Par exemple :

• .env.development - le fichier qui sera utilisé en développement
• .env.production - le fichier qui sera utilisé en production

Comment utiliser un fichier .env ?

Créer une nouvelle variable

Pour utiliser un fichier .env, nous devons commencer par une nouvelle variable.

Pour ce faire, il nous suffit d'ouvrir le fichier .env et de taper ceci :

VARIABLE_CLE_GOOGLE=valeur

Il n'y a aucun mot-clé à ajouter devant une variable. Par contre, on utilise des majuscules par convention.

Accéder à une variable

La technique dépend de si vous avez utilisé vite pour créer votre projet React ou si vous avez utilisé create-react-app.

// Avec VITE
const apiKey = import.meta.env.VARIABLE_API_GOOGLE;

// Avec create react app / Next
const apiKey = process.env.VARIABLE_API_GOOGLE;

Exemple d'utilisation d'un fichier .env

Pour l'exemple, partons sur une requête.

const apiKey = import.meta.env.VARIABLE_API_GOOGLE;
const apiUrl = import.meta.env.VARIABLE_URL_GOOGLE;

const fetchData = async() => {
    const response = await fetch(apiUrl, {
        headers: {
            "Authorization": `Bearer ${apiKey}`,
            "Content-Type": "application/json"
        }
    });

    if(response.ok) {
        console.log(await response.json());
    } else {
        console.error(`Erreur : ${response.status}`);
    }
};

export default fetchData;

Dans notre petit exemple, nous utilisons les variables VARIABLE_API_GOOGLE et VARIABLE_URL_GOOGLE afin de stocker:

• notre URL d'API
• notre clé d'API

Facile, vous ne trouvez pas ? 👀

Conclusion

Nous avons vu ensemble comment utiliser un fichier .env avec React, gardez bien à l'esprit qu'il est très utile de l'utiliser.