PEER-254: Dockerize frontend

Author: cyiting

.env.local

@@ -20,4 +20,7 @@ COLLAB_EXPRESS_ENV=compose
 COLLAB_EXPRESS_PORT=9003
 
 MATCHING_EXPRESS_ENV=compose
-MATCHING_EXPRESS_PORT=9003
+MATCHING_EXPRESS_PORT=9004
+
+FRONTEND_ENV=compose
+FRONTEND_PORT=3000

docker-compose.yaml

@@ -4,76 +4,101 @@ services:
   # Databases
 
   user-db:
-    hostname: "user-db"
+    hostname: 'user-db'
     image: postgres:16.4
-    container_name: "user-db"
+    container_name: 'user-db'
     build:
       context: ./backend/user/src/lib/db
     env_file:
       - ./backend/user/.env.local
     volumes:
-      - "user-db-docker:${USER_PGDATA}"
+      - 'user-db-docker:${USER_PGDATA}'
     restart: unless-stopped
     networks:
       - user-db-network
 
   collab-db:
-    hostname: "collab-db"
-    image: "postgres:16.4"
-    container_name: "collab-db"
+    hostname: 'collab-db'
+    image: 'postgres:16.4'
+    container_name: 'collab-db'
     build:
       context: ./backend/collaboration/src/lib/db
     env_file:
       - ./backend/collaboration/.env.local
     volumes:
-      - "collab-db-docker:/${COLLAB_PGDATA}"
+      - 'collab-db-docker:/${COLLAB_PGDATA}'
     restart: unless-stopped
     networks:
       - collab-db-network
 
   question-db:
-    hostname: "question-db"
+    hostname: 'question-db'
     image: postgres:16.4
-    container_name: "question-db"
+    container_name: 'question-db'
     build:
       context: ./backend/question/src/lib/db
     env_file:
       - ./backend/question/.env.local
     volumes:
-      - "question-db-docker:${QUESTION_PGDATA}"
+      - 'question-db-docker:${QUESTION_PGDATA}'
     restart: unless-stopped
     networks:
       - question-db-network
 
   # Services
 
   user-service:
-    image: "user-express"
-    container_name: "user-express"
+    image: 'user-express'
+    container_name: 'user-express'
     build:
       context: ./backend/user
       dockerfile: ./express.Dockerfile
       target: build
-      args: 
+      args:
         # For building with the correct env vars
         - env=${USER_EXPRESS_ENV}
         - port=${USER_EXPRESS_PORT}
     ports:
-      - "9001:${USER_EXPRESS_PORT}"
+      - '9001:${USER_EXPRESS_PORT}'
     env_file:
       - ./backend/user/.env.compose
     environment:
       # Docker Compose Specific
       - EXPRESS_DB_HOST=user-db
       - EXPRESS_DB_PORT=5432
-    volumes: 
+    volumes:
       - user-service:/data/user-express
     depends_on:
       - user-db
     networks:
       - user-db-network
       - user-api-network
-    entrypoint: ["/bin/sh", "entrypoint.sh"]
+    entrypoint: ['/bin/sh', 'entrypoint.sh']
+
+  # Frontend
+
+  frontend:
+    image: 'frontend'
+    container_name: 'frontend'
+    build:
+      context: ./frontend
+      dockerfile: ./frontend.Dockerfile
+      args:
+        - VITE_USER_SERVICE
+        - VITE_QUESTION_SERVICE
+        - port=${FRONTEND_PORT}
+    ports:
+      - '3000:${FRONTEND_PORT}'
+    env_file:
+      - ./frontend/.env.compose
+    environment:
+      - FRONTEND_PORT=PORT
+    depends_on:
+      - user-service
+    networks:
+      - user-api-network
+      - question-api-network
+      - collab-api-network
 
 volumes:
   user-service:
@@ -91,7 +116,6 @@ volumes:
   question-db-docker:
     external: true
 
-
 networks:
   # Isolated API Server Networks
   user-db-network:

frontend/.env.compose

@@ -0,0 +1,6 @@
+FRONTEND_ENV="compose"
+
+VITE_USER_SERVICE="http://user-service:9001"
+VITE_QUESTION_SERVICE="http://question-service:9002"
+
+FRONTEND_PORT=3000

frontend/.env.docker

@@ -0,0 +1,4 @@
+FRONTEND_ENV=local
+
+VITE_USER_SERVICE="http://localhost:9001"
+VITE_QUESTION_SERVICE="http://localhost:9002"

frontend/.env.local

@@ -1,2 +1,4 @@
+FRONTEND_ENV=local
+
 VITE_USER_SERVICE="http://localhost:9001"
 VITE_QUESTION_SERVICE="http://localhost:9002"

frontend/README.md

@@ -1,11 +1,32 @@
-# React + TypeScript + Vite
+# Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Running with Docker (Standalone)
 
-Currently, two official plugins are available:
+1. Run this command to build:
+   ```sh
+   docker build \
+     -t frontend-local \
+     --build-arg port=3000 \
+     -f frontend.Dockerfile .
+   ```
+2. Run this command, from the root folder:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+   ```sh
+   make db-up
+   ```
+
+3. Run the necessary migrate and seed commands, if you haven't yet.
+
+4. Run this command to expose the container:
+   ```sh
+   docker run -p 3000:3000 --env-file ./.env.docker frontend-local
+   ```
+
+## Running with Docker-Compose (Main config)
+
+Edit the variables in the `.env.compose` file and run `make up` from the root folder.
+
+Any startup instructions will be run from `entrypoint.sh` instead.
 
 ## Expanding the ESLint configuration
 
@@ -22,7 +43,7 @@ export default tseslint.config({
       tsconfigRootDir: import.meta.dirname,
     },
   },
-})
+});
 ```
 
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,7 +52,7 @@ export default tseslint.config({
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from 'eslint-plugin-react';
 
 export default tseslint.config({
   // Set the react version
@@ -46,5 +67,5 @@ export default tseslint.config({
     ...react.configs.recommended.rules,
     ...react.configs['jsx-runtime'].rules,
   },
-})
+});
 ```

frontend/frontend.Dockerfile

@@ -0,0 +1,23 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+COPY ./package*.json ./
+RUN npm install
+COPY ./ ./
+
+ARG VITE_USER_SERVICE
+ARG VITE_QUESTION_SERVICE
+ENV VITE_USER_SERVICE=${VITE_USER_SERVICE}
+ENV VITE_QUESTION_SERVICE=${VITE_QUESTION_SERVICE}
+
+RUN npm run build
+
+FROM node:20-alpine AS production
+RUN npm install -g serve
+WORKDIR /app
+COPY --from=build /app/dist ./dist
+
+ARG port
+EXPOSE ${port} 
+
+CMD ["serve", , "-s", "dist"]

frontend/react.dev.Dockerfile renamed to frontend/frontend.dev.Dockerfile

@@ -1,12 +1,11 @@
 FROM node:20-alpine
 
 WORKDIR /app/
-
 COPY ./frontend/package*.json ./
 RUN npm install
-
 COPY ./frontend/ ./
 
-EXPOSE 5173
+ARG port
+EXPOSE ${port}
 
 CMD ["npm", "run", "dev", "--", "--host"]

frontend/react.Dockerfile

@@ -36,5 +36,12 @@ export async function fetchQuestions(pageNum: number = 0): Promise<IGetQuestions
   // TODO: Add error handling and notifs
   return questionApiClient
     .get(QUESTION_SERVICE_ROUTES.GET_QUESTIONS + `?${params}`)
-    .then((res) => res.data as IGetQuestionsResponse);
+    .then((res) => res.data as IGetQuestionsResponse)
+    .catch((err) => {
+      console.error(err);
+      return {
+        questions: [],
+        totalQuestions: 0,
+      } as IGetQuestionsResponse;
+    });
 }