Je construis ma première application full stack en utilisant React et Node. Le projet possède un répertoire racine avec un dossier client (pour le sous-projet React) et un dossier serveur (pour le sous-projet Node). J'ai récemment migré mon projet React de create-react-app vers Vite.
Je veux que le frontend et le backend puissent lire le port du serveur, le port client et l'URL de base (qui est localhost pour l'instant) à partir d'un seul fichier .env dans toute la racine du projet pour éviter de coder en dur les valeurs de ceux-ci.
Avoir deux fichiers .env distincts pour le client et le serveur semble simple puisque Vite peut lire à partir du fichier .env dans le répertoire client et Node peut lire à partir du fichier .env dans le répertoire du serveur. < /p>
Comment permettre à un projet d'utiliser un fichier .env dans le répertoire racine ? Est-ce une bonne pratique standard d'utiliser un fichier .env au lieu de deux ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai trouvé une solution compliquée, peut-être que quelqu'un pourra suggérer une solution plus propre.
import { defineConfig, loadEnv } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; export default ({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, path.resolve(__dirname, "../")) }; return defineConfig({ plugins: [react()], envDir: "../", server: { port: process.env.VITE_CLIENT_PORT, } }) }J'ai également ajouté l'attribut
envDirau fichier (illustré ci-dessus) pour configurer Vite/React pour lire les variables d'environnement à partir du répertoire racine au lieu du répertoire client.Maintenant, dans mon projet React, je peux utiliser des variables d'environnement comme celle-ci :
import.meta.env.VITE_SERVER_PORTPour utiliser des variables env dans mon projet Node, j'utilise dotenv comme ceci (tout en configurant également le chemin .env) :
const express = require('express'); require('dotenv').config({ path: '../.env' }); const app = express(); app.listen(process.env.VITE_SERVER_PORT, () => { console.log(`Server running on port ${process.env.VITE_SERVER_PORT}`); })