chore: handle env vars for server side

Author: svedova

package-lock.json

@@ -28,6 +28,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",
+    "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "glob": "^8.0.3",
     "nodemon": "^2.0.20",

package.json

@@ -2,8 +2,10 @@ import { fileURLToPath } from "node:url";
 import path from "node:path";
 import fs from "node:fs";
 import glob from "glob";
+import dotenv from "dotenv";
 import { build } from "vite";
 
+dotenv.config();
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const files = glob
@@ -39,6 +41,15 @@ files.forEach(async (file: { entry: string; distFileName: string }) => {
       ],
       extensions: [".ts", ".tsx"],
     },
+    define: {
+      ...Object.keys(process.env).reduce(
+        (obj: Record<string, string>, key: string) => {
+          obj[`process.env.${key}`] = JSON.stringify(process.env[key]);
+          return obj;
+        },
+        {}
+      ),
+    },
     build: {
       ssr: true,
       copyPublicDir: false,

vite.config.api.ts

@@ -1,10 +1,12 @@
-import { defineConfig } from "vite";
-import { viteStaticCopy } from "vite-plugin-static-copy";
-import { fileURLToPath } from "node:url";
 import path from "node:path";
 import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import { viteStaticCopy } from "vite-plugin-static-copy";
 import react from "@vitejs/plugin-react";
+import dotenv from "dotenv";
 
+dotenv.config();
 process.env.NODE_ENV = "production";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -43,6 +45,15 @@ export default defineConfig({
       },
     },
   },
+  define: {
+    ...Object.keys(process.env).reduce(
+      (obj: Record<string, string>, key: string) => {
+        obj[`process.env.${key}`] = JSON.stringify(process.env[key]);
+        return obj;
+      },
+      {}
+    ),
+  },
   plugins: [
     react(),
     viteStaticCopy({