Merge pull request #143 from UAlberta-CMPUT401/feature/docker

Feature/docker

.gitignore

@@ -6,3 +6,4 @@ venv
 
 node_modules/
 
+backend/firebase-credentials.json

backend/.env.example

@@ -1,7 +1,14 @@
-# port to run service on
+# port for frontend (used for docker)
+FRONTEND_PORT=80
+
+# domain of site
+DOMAIN=localhost
+
+# port to run backend service on
 PORT=3000
 
 # the lowest priority of logs that is displayed (usually `debug` for development and `warn` in production)
+# log levels - error: 0, warn: 1, info: 2, http: 3, verbose: 4, debug: 5, silly: 6
 LOG_LEVEL=debug
 
 # database host name (usually `localhost` for development and `db` in production)

backend/Dockerfile

@@ -0,0 +1,8 @@
+FROM node:20
+WORKDIR /usr/app/backend
+COPY package.json ./
+RUN npm install
+COPY . ./
+RUN npm run build
+ENV DOTENV_CONFIG_PATH=/usr/app/backend/.env.production.local
+CMD ["node", "-r", "dotenv/config", "dist/src/server.js"]

backend/src/app.ts

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
 import express, { Request, Response, NextFunction } from 'express';
 import { Routes } from '@interfaces/routes.interface';
-import { NODE_ENV, PORT } from '@config/env';
+import { NODE_ENV, DOMAIN, PORT } from '@config/env';
 import { logger } from '@utils/logger';
 import { loggerMiddleware } from '@middlewares/logger.middleware';
 import { initializeApp, applicationDefault } from 'firebase-admin/app';
@@ -46,8 +46,17 @@ export class App {
   private initializeMiddlewares() {
     this.app.use(loggerMiddleware);
     this.app.use(express.json());
-    if (NODE_ENV === 'development') {
-      this.app.use(cors())
+    if (NODE_ENV === 'development' || DOMAIN === undefined) {
+      this.app.use(cors());
+    } else {
+      this.app.use(cors({
+        origin: [
+          `http://${DOMAIN}`,
+          `http://${DOMAIN}:80`, // HTTP
+          `https://${DOMAIN}:443`, // HTTPS
+          `http://${DOMAIN}:3001`, // Testing
+        ]
+      }))
     }
     const swaggerDocument = YAML.load(this.apiSpecPath);
     this.app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
@@ -62,14 +71,14 @@ export class App {
   }
 
   private initializeCronJobs() {
-    console.log('Starting cron job for aut-checkout every 5 minutes');
+    logger.info('Starting cron job for aut-checkout every 5 minutes');
     cron.schedule('*/1 * * * *', async () => {
-      console.log('Running auto-checkout cron job...');
+      logger.info('Running auto-checkout cron job...');
       try{
         await this.shiftSignupService.autoCheckOut();
-        console.log('Auto-checkout cron job completed');
+        logger.info('Auto-checkout cron job completed');
       } catch (error){
-        console.error('Error running auto-checkout cron job', error);
+        logger.error('Error running auto-checkout cron job', error);
       }
     })
   }

backend/src/common/config/env.ts

@@ -13,4 +13,4 @@ if (!fs.existsSync(envPath)) {
 config({ path: envPath });
 
 export const CREDENTIALS = process.env.CREDENTIALS === 'true';
-export const { NODE_ENV, PORT, LOG_LEVEL, DB_NAME, DB_HOST, DB_USER, DB_PORT, DB_PASSWORD, OPEN_WEATHER_KEY } = process.env;
+export const { NODE_ENV, DOMAIN, PORT, LOG_LEVEL, DB_NAME, DB_HOST, DB_USER, DB_PORT, DB_PASSWORD, OPEN_WEATHER_KEY } = process.env;

docker-compose.yml

@@ -0,0 +1,39 @@
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    env_file:
+      - ./frontend/.env.production.local
+    restart: always
+    ports:
+      - "${FRONTEND_PORT}:80"
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    env_file:
+      - ./backend/.env.production.local
+    depends_on:
+      db:
+        condition: service_healthy
+    restart: always
+    ports:
+      - "${PORT}:${PORT}"
+  db:
+    image: postgres:14
+    environment:
+      POSTGRES_USER: ${DB_USER}
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_DB: ${DB_NAME}
+    ports:
+      - "${DB_PORT}:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USER} -d ${DB_NAME}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+volumes:
+  postgres_data:

frontend/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:20 as build
+WORKDIR /usr/app/frontend
+COPY package.json ./
+RUN npm install
+COPY . ./
+RUN npm run build
+FROM nginx:alpine
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /usr/app/frontend/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen 80;
+    server_name localhost;
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend/src/app/AppLayout.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { AppBar, Toolbar, IconButton, Typography, Drawer, List, ListItem, ListItemButton, ListItemText, CssBaseline } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { Box } from '@mui/system';
-import CreateEvent from './pages/CreateEvent'; // Import your component
 
 const drawerWidth = 240;
 
@@ -74,7 +73,6 @@ const AppLayout: React.FC = () => {
                 }}
             >
                 <Toolbar />
-                <CreateEvent isSidebarOpen={isDrawerOpen} /> {/* Pass isSidebarOpen prop */}
             </Box>
         </Box>
     );

frontend/src/app/pages/CreateEvent/CreateEventDialog.tsx

@@ -90,8 +90,8 @@ const CreateEventDialog: React.FC<CreateEventDialogProps> = ({ open, onClose, st
         const eventData = {
             title,
             venue,
-            start: `${startDateLocal}T${startTimeLocal}`,
-            end: `${endDateLocal}T${endTimeLocal}`,
+            start: startDateTime.toISOString(),
+            end: endDateTime.toISOString(),
             address
         };
 

frontend/src/theme/theme.d.ts

@@ -15,4 +15,10 @@ declare module '@mui/material/styles' {
   interface TypeBackground {
     base1: string;
   }
+  interface Theme {
+    cssVariables: boolean;
+  }
+  interface ThemeOptions {
+    cssVariables?: boolean;
+  }
 }