C'est un fichier qu'on utilise pour sauvegarder des variables d'environnement.
Une variable d'environnement, c'est une variable que l'on rend accessible dans tout notre projet.
On l'utilise généralement pour :
L'intérêt, c'est surtout que le jour où le développeur souhaiote 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.
Si vous ne savez pas ce qu'est Git, il s'agit simplement d'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.
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.
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
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.
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;
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:
Facile, vous ne trouvez pas ? 👀
Nous avons vu ensemble comment utiliser un fichier .env
avec React, gardez bien à l'esprit qu'il est très utile de l'utiliser.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble votre projet.