Add docker compose & adjust ports of services

backend/question-service/.env.sample

@@ -1,6 +1,8 @@
 DB_CLOUD_URI=<CONNECTION_STRING>
 DB_LOCAL_URI="mongodb://127.0.0.1:27017/peerprepQuestionServiceDB"
-PORT=3000
+PORT=3002
 
 # Will use cloud MongoDB Atlas database
 ENV=PROD
+
+FRONTEND_URL=http://localhost:3000

backend/question-service/package.json

@@ -13,11 +13,13 @@
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.20.3",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.0",
     "mongoose": "^8.6.3"
   },
   "devDependencies": {
+    "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/mongoose": "^5.11.97",
     "@types/node": "^22.5.5",

backend/question-service/src/server.ts

@@ -1,5 +1,6 @@
 import express, { Application } from "express";
 import bodyParser from "body-parser";
+import cors from "cors";
 import questionRoutes from "./routes/questionRoutes";
 import { connectToDB } from "./util/db";
 import dotenv from "dotenv";
@@ -8,10 +9,13 @@ import dotenv from "dotenv";
 const app: Application = express();
 dotenv.config();
 
-const PORT = process.env.PORT || 3000;
+const PORT = process.env.PORT || 3002;
 
 // Middleware
 app.use(bodyParser.json());
+app.use(cors({
+  origin: process.env.FRONTEND_URL as string,
+}));
 
 // Routes
 app.use("/api/questions", questionRoutes);

backend/user-service/.env.sample

@@ -7,3 +7,6 @@ ENV=PROD
 
 # Secret for creating JWT signature
 JWT_SECRET=you-can-replace-this-with-your-own-secret
+
+# Frontend URL
+FRONTEND_URL=http://localhost:3000

backend/user-service/index.js

@@ -8,7 +8,9 @@ const app = express();
 
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
-app.use(cors()); // config cors so that front-end can use
+app.use(cors({
+  origin: process.env.FRONTEND_URL,
+}));
 app.options("*", cors());
 
 // To handle CORS Errors

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  question:
+    build: ./backend/question-service
+    ports:
+      - "3002:3002"
+
+  user:
+    build: ./backend/user-service
+    ports:
+      - "3001:3001"

frontend/.env.sample

@@ -1 +1,3 @@
-port=3001
+PORT=3000
+REACT_APP_QUESTION_SERVICE_URL=http://localhost:3002
+REACT_APP_USER_SERVICE_URL=http://localhost:3001

frontend/src/services/question.service.ts

@@ -3,8 +3,15 @@ import { Question, QuestionComplexity } from "../models/question.model";
 import { verifyNewQuestion } from "../util/question.helper";
 
 export default class QuestionService {
+  private static client = axios.create({
+    baseURL: process.env.REACT_APP_QUESTION_SERVICE_URL as string,
+    headers: {
+      "Content-type": "application/json",
+    },
+  });
+
   static async getQuestions(): Promise<Question[]> {
-    const response = await axios.get("/api/questions");
+    const response = await QuestionService.client.get("/api/questions");
     return response.data;
   }
 
@@ -17,7 +24,7 @@ export default class QuestionService {
     link: string,
   ): Promise<any> {
     const body = verifyNewQuestion(id, title, description, categoriesString, complexity, link);
-    const response = await axios.post("/api/questions", body);
+    const response = await QuestionService.client.post("/api/questions", body);
     return response.data;
   }
 
@@ -30,12 +37,12 @@ export default class QuestionService {
     link: string,
   ): Promise<any> {
     const body = verifyNewQuestion(id, title, description, categoriesString, complexity, link);
-    const response = await axios.put(`/api/questions/${id}`, body);
+    const response = await QuestionService.client.put(`/api/questions/${id}`, body);
     return response.data;
   }
 
   static async deleteQuestion(id: number): Promise<any> {
-    const response = await axios.delete(`/api/questions/${id}`);
+    const response = await QuestionService.client.delete(`/api/questions/${id}`);
     return response.data;
   }
 }