nginx

config/env/.env.prod.db

@@ -0,0 +1,3 @@
+POSTGRES_USER=set_me
+POSTGRES_PASSWORD=set_me
+POSTGRES_DB=balancer_prod

docker-compose.prod.yml

@@ -5,7 +5,7 @@ services:
     volumes:
       - postgres_data:/var/lib/postgresql/data/
     env_file:
-      - ./.env.prod.db
+      - ./config/env/.env.prod.db
   backend:
     build: 
       context: ./server
@@ -18,16 +18,11 @@ services:
     depends_on:
       - db
   frontend:
-    image: balancer-frontend
     build:
-      context: frontend
-      dockerfile: Dockerfile
-      args:
-        - IMAGE_NAME=balancer-frontend
+      context: ./frontend
+      dockerfile: Dockerfile.prod
     ports:
-        - "3000:3000"
-    environment:
-        - CHOKIDAR_USEPOLLING=true
+      - "3000:80"
     depends_on:
       - backend
 

frontend/Dockerfile.prod

@@ -0,0 +1,19 @@
+FROM node:18 as builder
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+RUN npm ci --legacy-peer-deps
+
+COPY . .
+
+RUN npm run build
+
+FROM nginx:latest
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=builder /usr/src/app/build /usr/share/nginx/html
+
+EXPOSE 80

frontend/nginx.conf

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

frontend/src/components/Header/Chat.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // import { Link } from "react-router-dom";
-import "../../components/Header/Chat.css";
+import "../../components/Header/chat.css";
 import { useState, useEffect, useRef } from "react";
 
 import axios from "axios";

frontend/src/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import { useState, useRef, useEffect, Fragment } from "react";
 import accountLogo from "../../assets/account.svg";
 import { Link, useNavigate } from "react-router-dom";
 import LoginMenuDropDown from "./LoginMenuDropDown";
-import "../../components/Header/Header.css";
+import "../../components/Header/header.css";
 import Chat from "./Chat";
 import { FeatureMenuDropDown } from "./FeatureMenuDropDown";
 import MdNavBar from "./MdNavBar";

frontend/src/pages/DrugSummary/DrugSummaryForm.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // import { Link } from "react-router-dom";
-import "../../components/Header/Chat.css";
+import "../../components/Header/chat.css";
 import { useState, useEffect, useRef } from "react";
 import axios from "axios";
 // import TypingAnimation from "./components/TypingAnimation.tsx";

frontend/src/pages/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import Header from "../../components/Header/Header";
 import Footer from "../../components/Footer/Footer";
 import LoginMenuDropDown from "../../components/Header/LoginMenuDropDown";
 import { connect } from "react-redux";
-import { useAuth } from "./AuthHooks";
+import { useAuth } from "./authHooks.ts";
 import { RootState } from "../../services/actions/types";
 import { useLocation } from "react-router-dom";
 

frontend/vite.config.ts

@@ -4,7 +4,7 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
-    outDir: '../server/build', // Custom output directory
+    outDir: 'build', // Custom output directory
     assetsDir: 'static',
   },
   plugins: [react()],
@@ -16,4 +16,4 @@ export default defineConfig({
     strictPort: true,
     port: 3000,
   },
-});
+});

server/Dockerfile.prod

@@ -68,4 +68,4 @@ RUN chown -R app:app $APP_HOME
 USER app
 
 # run entrypoint.prod.sh
-ENTRYPOINT ["/home/app/web/entrypoint.prod.sh"]
+ENTRYPOINT ["/home/app/web/entrypoint.prod.sh"]