Fix production build not loading configuration properly

oxsecurity · Jul 23, 2023 · 38701b3 · 38701b3
1 parent b92205c
commit 38701b3
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 44 deletions.
diff --git a/.env b/.env
@@ -12,5 +12,5 @@ CODETOTAL_WS_HOST=127.0.0.1
 DEBUG_MODULES=actions,megalinter,stores,transport
 
 # FRONTEND
-UPLOAD_FILE_LIMIT_BYTES=10000000 # 10MB
+CODETOTAL_UPLOAD_FILE_LIMIT_BYTES=10000000
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "npm run build --workspaces",
     "postbuild": "mv ./packages/backend/dist . && mkdir -p ./dist/public && mv ./packages/app/dist/* ./dist/public",
     "clean": "rm -rf dist && npm run clean --workspaces",
-    "production": "node dist/index.js",
+    "production": "node -r dotenv/config dist/index.js dotenv_config_path=./.env dotenv_config_debug=true",
     "build:be": "npm run build:st && npm run build --workspace=packages/backend",
     "build:st": "npm run build --workspace=packages/shared-types",
     "start:be": "npm start --workspace=packages/backend",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -28,6 +28,7 @@
     "zustand": "^4.3.8"
   },
   "devDependencies": {
+    "@types/express": "^4.17.17",
     "@types/md5": "^2.3.2",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -39,6 +40,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-tss-unused-classes": "^0.0.4",
+    "express": "^4.18.2",
     "typescript": "^5.0.2",
     "vite": "^4.3.9",
     "vite-plugin-checker": "^0.6.1"

diff --git a/packages/app/src/analysis/components/FileUploadForm.tsx b/packages/app/src/analysis/components/FileUploadForm.tsx
@@ -9,6 +9,8 @@ import config from "../../config";
 import { startAnalysis } from "../actions/analysis-actions";
 import { AnalysisStore } from "../stores/analysis-store";
 
+const MAX_SIZE = parseInt(config.CODETOTAL_UPLOAD_FILE_LIMIT_BYTES);
+
 export const FileUploadForm: FC = () => {
   const { classes } = useStyles();
   const navigate = useNavigate();
@@ -24,11 +26,7 @@ export const FileUploadForm: FC = () => {
         fileRejections.length === 1 &&
         fileRejections[0].errors[0].code === "file-too-large"
       ) {
-        setError(
-          `File too large (max allowed: ${filesize(
-            config.UPLOAD_FILE_LIMIT_BYTES
-          )})`
-        );
+        setError(`File too large (max allowed: ${filesize(MAX_SIZE)})`);
         return;
       }
       if (fileRejections.length === 1) {
@@ -46,7 +44,7 @@ export const FileUploadForm: FC = () => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     multiple: false,
-    maxSize: config.UPLOAD_FILE_LIMIT_BYTES,
+    maxSize: MAX_SIZE,
   });
 
   return (

diff --git a/packages/app/src/config.ts b/packages/app/src/config.ts
@@ -1,19 +1,18 @@
-declare const process: {
-  env: {
-    CODETOTAL_HTTP_PORT: string;
-    CODETOTAL_HTTP_HOST: string;
-    CODETOTAL_WS_PORT: number;
-    CODETOTAL_WS_HOST: number;
-    UPLOAD_FILE_LIMIT_BYTES: number;
-  };
-};
+interface FEConfig {
+  CODETOTAL_HTTP_PORT: string;
+  CODETOTAL_HTTP_HOST: string;
+  CODETOTAL_WS_PORT: string;
+  CODETOTAL_WS_HOST: string;
+  CODETOTAL_UPLOAD_FILE_LIMIT_BYTES: string;
+}
 
-const config = {
-  CODETOTAL_HTTP_PORT: process.env.CODETOTAL_HTTP_PORT,
-  CODETOTAL_HTTP_HOST: process.env.CODETOTAL_HTTP_HOST,
-  CODETOTAL_WS_PORT: process.env.CODETOTAL_WS_PORT,
-  CODETOTAL_WS_HOST: process.env.CODETOTAL_WS_HOST,
-  UPLOAD_FILE_LIMIT_BYTES: process.env.UPLOAD_FILE_LIMIT_BYTES,
+const config: FEConfig = {
+  CODETOTAL_HTTP_PORT: import.meta.env.CODETOTAL_HTTP_PORT,
+  CODETOTAL_HTTP_HOST: import.meta.env.CODETOTAL_HTTP_HOST,
+  CODETOTAL_WS_PORT: import.meta.env.CODETOTAL_WS_PORT,
+  CODETOTAL_WS_HOST: import.meta.env.CODETOTAL_WS_HOST,
+  CODETOTAL_UPLOAD_FILE_LIMIT_BYTES: import.meta.env
+    .CODETOTAL_UPLOAD_FILE_LIMIT_BYTES,
 };
 
 export default config;
diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
@@ -23,6 +23,5 @@
     "declaration": false
   },
   "include": ["src/**/*"],
-  "exclude": ["vite.config.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/packages/app/tsconfig.node.json b/packages/app/tsconfig.node.json
@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "src/config.ts"]
+  "include": ["vite.config.ts"]
 }
diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts
@@ -1,13 +1,6 @@
-/* eslint-disable import/first */
-import dotenv from "dotenv";
-
-// load ENV variables from .env file
-dotenv.config({ path: "../../.env" });
-
 import react from "@vitejs/plugin-react";
 import { PluginOption, defineConfig } from "vite";
 import checker from "vite-plugin-checker";
-import config from "./src/config";
 
 export default defineConfig(({ command }) => {
   const plugins: PluginOption[] = [react()];
@@ -23,6 +16,8 @@ export default defineConfig(({ command }) => {
   }
 
   return {
+    envPrefix: "CODETOTAL_",
+    envDir: "../../",
     mode: "production",
     server: {
       port: 3000,
@@ -41,11 +36,6 @@ export default defineConfig(({ command }) => {
         },
       },
     },
-    define: {
-      "process.env": JSON.stringify({
-        ...config,
-      }),
-    },
     esbuild: {
       // needed for keepNames
       minifyIdentifiers: false,

diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -5,7 +5,7 @@
   "types": "./src/index.ts",
   "main": "./dist/index.js",
   "scripts": {
-    "start": "nodemon ./src/index.ts",
+    "start": "nodemon -r dotenv/config ./src/index.ts dotenv_config_path=../../.env dotenv_config_debug=true",
     "build": "tsc",
     "test": "jest",
     "start:test": "jest --coverage --watch",

diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -1,7 +1,3 @@
-import dotenv from "dotenv";
-// load ENV variables from .env file
-dotenv.config({ path: "../../.env" });
-
 import { subscribeToReport } from "./actions/subscribe-to-report";
 import config from "./config";
 import { startHttpServer } from "./transport/http-server";

diff --git a/packages/shared-types/package.json b/packages/shared-types/package.json
@@ -15,6 +15,8 @@
   "author": "Itay",
   "license": "ISC",
   "devDependencies": {
+    "@types/express": "^4.17.17",
+    "express": "^4.18.2",
     "typescript": "^5.1.3"
   }
 }
diff --git a/packages/shared-types/tsconfig.json b/packages/shared-types/tsconfig.json
@@ -3,7 +3,8 @@
     "outDir": "./dist",
     "target": "ES5",
     "moduleResolution": "nodenext",
-    "sourceMap": true
+    "sourceMap": true,
+    "module": "CommonJS"
   },
   "include": ["src/index.ts"],
   "exclude": ["node_modules", "./dist"]