Contexte
En ce moment, je développe un site, le Frontend est en React et le Backend, avec Strapi.
En phase de développement, pour faire des appels API par exemple, on peut faire des appels au Backend en passant par « localhost » par exemple.
Mais.. En phase de production, ce n’est pas bon, il faut mettre le domaine en question.
Lorsqu’il y a peu de pages, ce n’est pas gênant, mais lorsqu’il y a en a plusieurs, ça peut être relou de devoir modifier à la main l’URL de chacune des pages.
Mais.. En phase de production, ce n’est pas bon, il faut mettre le domaine en question.
Lorsqu’il y a peu de pages, ce n’est pas gênant, mais lorsqu’il y a en a plusieurs, ça peut être relou de devoir modifier à la main l’URL de chacune des pages.
L’avantage avec un fichier .env, c’est que ça compte comme une variable d’environnement, c’est-à-dire qu’on définit le domaine une fois, puis, lorsque nous en avons besoin sur une page, il suffit de récupérer la variable qu’on a besoin. De cette manière, on a plus besoin de rechercher dans le code les différents domaines, il suffit juste de modifier le .env, un grand gain de temps.
Problème
Lorsque je voulais accéder à la valeur de mon fichier .env, ça ne fonctionnait pas.
Solution
Pour faire mon projet, pour la partie React j’ai utilisé Vite.
Vite impose une nomenclature préçise, c’est à dire qu’on ne peut pas nommer les variables n’importe comment. Pour que la variable soit prise en compte, son nom doit commencer par « VITE_ ».
Exemple
Je fais un fichier .env à la racine du projet, comme ça :
Dans ce fichier, on peut mettre quelque chose comme :
VITE_DOMAIN_REACT=http://localhost:5174
Ensuite, pour récupérer sa valeur dans React :
const DOMAIN_REACT = import.meta.env.VITE_DOMAIN_REACT;