Configure Docker Development Environment

.github/workflows/ci.yml

@@ -8,10 +8,14 @@ on:
     branches:
       - main
 
+env:
+  HUSKY: 0
+
 jobs:
   build-backend:
-    name: Build Backend
+    name: Build & Test Backend
     runs-on: ubuntu-latest
+
     steps:
       # Step 1: Checkout the code
       - name: Checkout code
@@ -21,14 +25,57 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: './api/package-lock.json'
+
+      # Install root dependencies first
+      - name: Install root dependencies
+        run: npm ci --ignore-scripts
+        env:
+          HUSKY: 0
 
-      # Step 3: Install dependencies
-      - name: Install dependencies
-        run: npm install
+      # Step 3: Install backend dependencies
+      - name: Install backend dependencies
+        run: npm ci --ignore-scripts
         working-directory: ./api
 
       # Step 4: Build the backend if necessary (you can remove this if not needed)
       - name: Build Backend
         run: npm run build
-        working-directory: ./api
+        working-directory: ./api
+
+  build-frontend:
+    name: Build & Test Frontend
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the code
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # Step 2: Set up Node.js
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: './app/package-lock.json'
+
+      # Install root dependencies first
+      - name: Install root dependencies
+        run: npm ci --ignore-scripts
+        env:
+          HUSKY: 0
+
+      # Step 3: Install frontend dependencies
+      - name: Install frontend dependencies
+        run: npm ci --ignore-scripts
+        working-directory: ./app
+
+      # Step 5: Build Frontend
+      - name: Build Frontend
+        run: npm run build
+        working-directory: ./app
+        env:
+          CI: true

Dockerfile.api

@@ -1,23 +1,33 @@
 # Use an official Node.js runtime as a parent image
-FROM node:18
+FROM node:20-slim
+
+# Install OpenSSL and build dependencies
+RUN apt-get update -y && \
+    apt-get install -y openssl python3 make g++
 
 # Set the working directory in the container
 WORKDIR /app
 
-# Copy package.json and package-lock.json
-COPY ./api/package*.json ./
+# Copy package files
+COPY package*.json ./
+COPY ./api/package*.json ./api/
+COPY ./prisma ./prisma/
+
+# Install dependencies with retries (including dev dependencies)
+ENV HUSKY=0
+ENV NPM_CONFIG_LOGLEVEL=verbose
 
-# Install the dependencies
-RUN npm install
+RUN npm install --no-optional && \
+    cd ./api && npm install --no-optional
 
-# Copy the rest of your application code
-COPY ./api ./
+# Generate Prisma Client
+RUN npx prisma generate
 
-# Build the TypeScript code
-RUN npm run build
+# Create a script to handle startup
+COPY ./scripts/docker-entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
 
-# Expose the port the app runs on
-EXPOSE 5000
+# Use nodemon for development
+RUN npm install -g nodemon ts-node
 
-# Command to run your app (start after build)
-CMD ["npm", "start"]
+ENTRYPOINT ["docker-entrypoint.sh"]

Dockerfile.app

@@ -0,0 +1,24 @@
+# Development stage only
+FROM node:20-slim
+
+# Install OpenSSL
+RUN apt-get update -y && \
+    apt-get install -y openssl && \
+    rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+COPY ./app/package*.json ./app/
+
+# Install dependencies
+RUN npm install && \
+    cd ./app && npm install
+
+# Create a script to handle startup
+COPY ./scripts/docker-entrypoint-app.sh /usr/local/bin/docker-entrypoint.sh
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+ENTRYPOINT ["docker-entrypoint.sh"]

api/package.json

@@ -13,26 +13,23 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@prisma/client": "^5.22.0",
     "@types/express": "^5.0.0",
     "@types/multer": "^1.4.12",
-    "@types/node": "^22.9.1",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/jsonwebtoken": "^9.0.7",
     "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
     "jsonwebtoken": "^9.0.2",
     "multer": "^1.4.5-lts.1",
     "pg": "^8.13.1",
-    "prisma": "^5.22.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.6.3"
+    "ts-node": "^10.9.2"
   },
   "devDependencies": {
     "@types/bcrypt": "^5.0.2",
     "@types/cors": "^2.8.17",
-    "@types/jsonwebtoken": "^9.0.7",
-    "@types/pg": "^8.11.10",
+    "@types/pg": "^8.11.0",
     "ts-node-dev": "^2.0.0"
   }
 }

api/src/server.ts

@@ -3,8 +3,8 @@ import dotenv from 'dotenv';
 
 dotenv.config();
 
-const PORT = process.env.PORT || 5000;
+const PORT = parseInt(process.env.PORT || '5000', 10);
 
-app.listen(PORT, () => {
+app.listen(PORT, '0.0.0.0', () => {
     console.log(`API running on port ${PORT}`);
 });

app/package.json

@@ -7,15 +7,13 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.86",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "@babel/plugin-proposal-private-property-in-object": "^7.16.7"
   },
@@ -42,10 +40,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.18",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1"
   }
 }

app/src/Pages/Annotate.tsx

@@ -10,7 +10,6 @@ const Annotate = () => {
     const [annotations, setAnnotations] = useState<Array<{ x: number; y: number; width: number; height: number; label: string }>>([]);
     const [isUploading, setIsUploading] = useState(false);
     const [isProcessing, setIsProcessing] = useState(false);
-    const [error, setError] = useState<string | null>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
     const imageRef = useRef<HTMLImageElement>(null);
     const selectedFileRef = useRef<File | null>(null);
@@ -24,7 +23,6 @@ const Annotate = () => {
                 setSelectedImage(e.target?.result as string);
                 setUploadedImage(null);
                 setAnnotations([]);
-                setError(null);
             };
             reader.readAsDataURL(file);
         }
@@ -34,7 +32,6 @@ const Annotate = () => {
         if (!selectedImage || !selectedFileRef.current) return;
 
         setIsUploading(true);
-        setError(null);
 
         try {
             const formData = new FormData();
@@ -51,17 +48,15 @@ const Annotate = () => {
             });
 
             if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.message || 'Upload failed');
+                throw new Error('Upload failed');
             }
 
-            const data = await response.json();
+            await response.json(); // Just consume the response
             setUploadedImage(selectedImage);
             setSelectedImage(null);
             selectedFileRef.current = null;
         } catch (error) {
             console.error('Upload failed:', error);
-            setError(error instanceof Error ? error.message : 'Upload failed');
         } finally {
             setIsUploading(false);
         }

docker-compose.yml

@@ -1,27 +1,52 @@
 services:
   postgres:
-    image: postgres
     container_name: hias-db
+    image: postgres:latest
     environment:
       POSTGRES_USER: hias-user
       POSTGRES_PASSWORD: 123456
       POSTGRES_DB: hias
     ports:
       - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
 
   api:
+    container_name: hias-api
     build:
       context: .
       dockerfile: Dockerfile.api
-    container_name: hias-api
     environment:
-      POSTGRES_USER: hias-user
-      POSTGRES_PASSWORD: 123456
-      POSTGRES_DB: hias
-      POSTGRES_HOST: postgres
-      NODE_ENV: production
+      - DATABASE_URL=postgresql://hias-user:123456@postgres:5432/hias?schema=public
+      - PORT=5000
+      - NODE_ENV=development
     ports:
       - "5000:5000"
+    volumes:
+      - ./api:/app/api
+      - ./prisma:/app/prisma
+      - /app/api/node_modules
     depends_on:
       - postgres
-    command: ["npm", "run", "start"]
+    command: sh -c "cd /app/api && npm run dev"
+
+  app:
+    container_name: hias-app
+    build:
+      context: .
+      dockerfile: Dockerfile.app
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./app:/app/app
+      - /app/app/node_modules
+    depends_on:
+      - api
+    environment:
+      - NODE_ENV=development
+      - PORT=3000
+      - REACT_APP_API_URL=http://localhost:5000
+    command: sh -c "cd /app/app && npm start"
+
+volumes:
+  postgres_data: