envs

.gitignore

@@ -37,12 +37,18 @@ Thumbs.db
 # Backend specific
 backend/node_modules
 backend/.env
+backend/.env.dev
+backend/.env.qa
+backend/.env.prod
 backend/dist
 backend/logs
 
 # Frontend specific
 frontend/node_modules
 frontend/.env
+frontend/.env.dev
+frontend/.env.qa
+frontend/.env.prod
 frontend/build
 frontend/.env.local
 

backend/package.json

@@ -5,7 +5,11 @@
   "main": "index.js",
   "scripts": {
     "start": "node server.js",
-    "dev": "nodemon server.js",
+    "start:dev": "NODE_ENV=dev node -r dotenv/config server.js dotenv_config_path=.env.dev",
+    "start:qa": "NODE_ENV=qa node -r dotenv/config server.js dotenv_config_path=.env.qa",
+    "start:prod": "NODE_ENV=prod node -r dotenv/config server.js dotenv_config_path=.env.prod",
+    "dev": "NODE_ENV=dev nodemon -r dotenv/config server.js dotenv_config_path=.env.dev",
+    "dev:qa": "NODE_ENV=qa nodemon -r dotenv/config server.js dotenv_config_path=.env.qa",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

backend/server.js

@@ -1,4 +1,10 @@
-require('dotenv').config();
+// Load environment-specific config
+const env = process.env.NODE_ENV;
+const envFile = `.env.${env}`;
+
+require('dotenv').config({
+  path: process.env.DOTENV_CONFIG_PATH
+});
 const express = require('express');
 const cors = require('cors');
 const bodyParser = require('body-parser');

frontend/package-lock.json

@@ -25,6 +25,9 @@
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "dotenv-cli": "^9.0.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -6404,6 +6407,45 @@
         "node": ">=10"
       }
     },
+    "node_modules/dotenv-cli": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-9.0.0.tgz",
+      "integrity": "sha512-NhGrQum/u1VTBxnSnlNwVkTP3gojYO8T6Fntyru93wbR1hPo8aFhDFJiBPmkT0771i7f5Rd7EQDaOreS8jY8gA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "dotenv": "^17.1.0",
+        "dotenv-expand": "^10.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "dotenv": "cli.js"
+      }
+    },
+    "node_modules/dotenv-cli/node_modules/dotenv": {
+      "version": "17.2.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.1.tgz",
+      "integrity": "sha512-kQhDYKZecqnM0fCnzI5eIv5L4cAe/iRI+HqMbO/hbRdTAeXDG+M9FjipUxNfbARuEg4iHIbhnhs78BCHNbSxEQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-cli/node_modules/dotenv-expand": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
+      "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",

frontend/package.json

@@ -23,7 +23,13 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:dev": "dotenv -e .env.dev react-scripts start",
+    "start:qa": "dotenv -e .env.qa react-scripts start",
+    "start:prod": "dotenv -e .env.prod react-scripts start",
     "build": "react-scripts build",
+    "build:dev": "dotenv -e .env.dev react-scripts build",
+    "build:qa": "dotenv -e .env.qa react-scripts build",
+    "build:prod": "dotenv -e .env.prod react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -44,5 +50,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "dotenv-cli": "^9.0.0"
   }
 }

frontend/src/services/api.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const API_BASE_URL = 'http://localhost:5001/api';
+const API_BASE_URL = process.env.REACT_APP_API_URL;
 
 const api = axios.create({
   baseURL: API_BASE_URL,