#57 Added frontend env files for local and production.

docker-compose.yml

@@ -3,29 +3,30 @@ services:
   frontend:
     image: comp2707-frontend
     build: frontend/
+    depends_on:
+      - backend
     container_name: comp2707-frontend
-    environment:
-      - BACKEND_URL="http://backend:5000"
     ports:
       - 8080:8080
   backend:
     image: comp2707-backend
     build: backend/
+    depends_on:
+      - db
     container_name: comp2707-backend
     environment:
-      - DB_HOST=db
+      - DATABASE_URL=mysql://root:mama@db/2707
-      - DB_USER=joe
-      - DB_PASSWORD=mama
     ports:
-      - 5000:5000
+      - 5001:5000
   db:
     image: mariadb:latest
     environment:
-      - MARIADB_USER=joe
-      - MARIADB_PASWWORD=mama
       - MARIADB_ROOT_PASSWORD=mama
+      - MARIADB_DATABASE=2707
     volumes:
       - db-volume:/var/lib/mysql
+    ports:
+      - 3406:3306
 
 volumes:
   db-volume:

frontend/.dockerignore

@@ -0,0 +1,2 @@
+.env.local
+node_modules/

frontend/.env

@@ -0,0 +1 @@
+REACT_APP_BACKEND_URL=http://localhost:5000

frontend/.env.production

@@ -0,0 +1 @@
+REACT_APP_BACKEND_URL=http://localhost:5001

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "bootstrap": "^5.2.3",
+        "dotenv": "^16.0.3",
         "react": "^18.2.0",
         "react-bootstrap": "^2.7.2",
         "react-dom": "^18.2.0",
@@ -6868,11 +6869,11 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "10.0.0",
+      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       }
     },
     "node_modules/dotenv-expand": {
@@ -14577,6 +14578,14 @@
         }
       }
     },
+    "node_modules/react-scripts/node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -22349,9 +22358,9 @@
       }
     },
     "dotenv": {
-      "version": "10.0.0",
+      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
     },
     "dotenv-expand": {
       "version": "5.1.0",
@@ -27743,6 +27752,13 @@
         "webpack-dev-server": "^4.6.0",
         "webpack-manifest-plugin": "^4.0.2",
         "workbox-webpack-plugin": "^6.4.1"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "10.0.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+          "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+        }
       }
     },
     "react-transition-group": {

frontend/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.3",
+    "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",

frontend/serve.js

@@ -1,6 +1,9 @@
 const express = require("express");
 const path = require("path");
 const app = express();
+const dotenv = require('dotenv');
+dotenv.config()
+console.log(process.env);
 
 app.use("/*", (req, res, next) => {
   now = new Date();