How to use a single .env file for a full stack React + Node application?

Question

I'm building my first full stack application using React and Node. The project has a root directory with a client folder (for the React subproject) and a server folder (for the Node subproject). I recently migrated my React project from create-react-app to Vite. I want both frontend and backend to be able to read the server port, client port and base URL (which is localhost for now) from a single .env file in the entire project root to avoid hardcoding values ​​for these. client and

P粉203648742 · Answer

I found a messy solution, maybe someone can suggest some cleaner solution.

To set the port dynamically in the vite.config file, I wrote the following code:

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

I also added the envDir attribute to the file (shown above) to configure Vite/React to read environment variables from the root directory instead of the client directory.
Now, in my React project, I can use environment variables like this: import.meta.env.VITE_SERVER_PORT
To use env variables in my Node project, I can use dotenv like this (while also configuring the .env path):

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