Comment utiliser un seul fichier .env pour une application React + Node full stack ?

Question

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 ?

Answer 1

J'ai trouvé une solution compliquée, peut-être que quelqu'un pourra suggérer une solution plus propre.

1. Pour définir le port dynamiquement dans le fichier vite.config, j'ai écrit le code suivant :

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,
    }
  })
}

2. J'ai également ajouté l'attribut envDir au 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.

3. Maintenant, dans mon projet React, je peux utiliser des variables d'environnement comme celle-ci : import.meta.env.VITE_SERVER_PORT

4. Pour 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}`);
})