backend/Dockerfile

@@ -5,7 +5,7 @@ RUN python -m venv venv
 COPY ./requirements.txt /code/requirements.txt
 RUN . venv/bin/activate
 RUN python -m pip install -r /code/requirements.txt
-COPY venv /code/venv
+RUN cp -r venv /code/venv
 
 WORKDIR /code
 COPY app app

backend/main.py

@@ -7,7 +7,11 @@ from app.models import Assignment, Course, User
 from flask_cors import CORS
 
 app = create_app()
-CORS(app, supports_credentials=True, resources={r"/.*": {"origins": r".*localhost.*"}})
+CORS(
+    app,
+    supports_credentials=True,
+    resources={r"/.*": {"origins": [r".*localhost.*", r".*jagrajaulakh.com.*"]}},
+)
 
 
 @app.shell_context_processor

docker-compose.yml

@@ -3,12 +3,31 @@ services:
   frontend:
     image: comp2707-frontend
     build: frontend/
+    depends_on:
+      - backend
     container_name: comp2707-frontend
     ports:
       - 8080:8080
   backend:
     image: comp2707-backend
     build: backend/
+    depends_on:
+      - db
     container_name: comp2707-backend
+    environment:
+      - DATABASE_URL=mysql://root:mama@db/2707
     ports:
-      - 5000:5000
+      - 5001:5000
+  db:
+    image: mariadb:latest
+    environment:
+      - MARIADB_ROOT_PASSWORD=mama
+      - MARIADB_DATABASE=2707
+    volumes:
+      - db-volume:/var/lib/mysql
+    ports:
+      - 3406:3306
+
+volumes:
+  db-volume:
+    driver: local

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://be.2707.jagrajaulakh.com:5001

frontend/Dockerfile

@@ -8,6 +8,7 @@ RUN mkdir /code && cp -a /tmp/node_modules /code/
 # Copy all the source code
 WORKDIR /code
 COPY ./ /code
+COPY .env.production .env
 
 # Build the project
 RUN ["npm", "run", "build"]

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",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "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();

frontend/src/components/CoursesWidget.jsx

@@ -12,7 +12,7 @@ const CoursesWidget = ({ className = "" }) => {
     if (!currentUser.id) {
       return;
     }
-    makeRequest({ url: `http://localhost:5000/user/${currentUser.id}/courses` })
+    makeRequest({ endpoint: `user/${currentUser.id}/courses` })
       .then((resp) => resp.json())
       .then((data) => {
         setCourseData(data.courses);

frontend/src/pages/CoursePage.jsx

@@ -7,7 +7,7 @@ const CoursePage = ({ id }) => {
   const [courseData, setCourseData] = useState({});
 
   useEffect(() => {
-    makeRequest({ url: `http://localhost:5000/course/${id}` })
+    makeRequest({ endpoint: `course/${id}` })
       .then((resp) => resp.json())
       .then((data) => {
         setCourseData(data);

frontend/src/pages/ManagePage.jsx

@@ -11,7 +11,7 @@ const ManagePage = () => {
 
   useEffect(() => {
     makeRequest({
-      url: `http://localhost:5000/user/${currentUser.id}/courses`,
+      endpoint: `user/${currentUser.id}/courses`,
       method: "GET",
     })
       .then((req) => req.json())

frontend/src/pages/ManageStudentsPage.jsx

@@ -9,7 +9,7 @@ const ManageStutentsPage = ({ cid }) => {
 
   const submitStudentForm = async (username) => {
     await makeRequest({
-      url: `http://localhost:5000/user/${username}/enroll/${cid}`,
+      endpoint: `user/${username}/enroll/${cid}`,
       method: "POST",
     });
     window.location.reload();
@@ -48,7 +48,7 @@ const ManageStutentsPage = ({ cid }) => {
   };
   useEffect(() => {
     makeRequest({
-      url: `http://localhost:5000/course/${cid}/students`,
+      endpoint: `course/${cid}/students`,
       method: "GET",
     })
       .then((req) => req.json())
@@ -62,7 +62,7 @@ const ManageStutentsPage = ({ cid }) => {
 
   const sendUnenrollRequest = (uid) => {
     makeRequest({
-      url: `http://localhost:5000/user/${uid}/enroll/${cid}`,
+      endpoint: `user/${uid}/enroll/${cid}`,
       method: "DELETE",
     }).then((resp) => {
       window.location.reload();

frontend/src/pages/RegisterPage.jsx

@@ -17,7 +17,7 @@ const RegisterPage = () => {
   const sendRegisterRequest = (e) => {
     e?.preventDefault();
     makeRequest({
-      url: "http://localhost:5000/register",
+      endpoint: "register",
       method: "POST",
       body: {
         role,

frontend/src/utils.ts

@@ -1,4 +1,6 @@
-const makeRequest = ({ url, method, body = null }): Promise<Response> => {
+const { REACT_APP_BACKEND_URL } = process.env;
+
+const makeRequest = ({ endpoint, method, body = null }): Promise<Response> => {
   const req: RequestInit = {
     method: method,
     credentials: "include",
@@ -8,7 +10,7 @@ const makeRequest = ({ url, method, body = null }): Promise<Response> => {
   if (body) {
     req["body"] = JSON.stringify(body);
   }
-  return fetch(url, req);
+  return fetch(`${REACT_APP_BACKEND_URL}/${endpoint}`, req);
 };
 
 const sendLoginRequest = async (
@@ -17,7 +19,7 @@ const sendLoginRequest = async (
 ): Promise<object> => {
   const p: Promise<object> = new Promise(async (res) => {
     await makeRequest({
-      url: "http://localhost:5000/login",
+      endpoint: "login",
       method: "POST",
       body: { username, password },
     })
@@ -36,7 +38,7 @@ const sendLoginRequest = async (
 const sendLogoutRequest = async (): Promise<object> => {
   const p: Promise<object> = new Promise(async (res) => {
     await makeRequest({
-      url: "http://localhost:5000/logout",
+      endpoint: "logout",
       method: "POST",
     })
       .then((resp) => resp.json())