create new compose using build and watch

Dockerfile

@@ -0,0 +1,7 @@
+FROM oven/bun:1 as install
+RUN mkdir -p /temp/prod
+COPY . /temp/prod
+RUN cd /temp/prod && bun install --production --frozen-lockfile && bun run build
+
+FROM nginx AS release
+COPY --from=install /temp/prod/dist /usr/share/nginx/html

compose.yaml

@@ -1,5 +1,3 @@
-version: "3"
-
 services:
   mongodb:
     image: mongo:bionic
@@ -15,31 +13,43 @@ services:
       - mongodb_data:/data/db
 
   bot-api:
-    image: oven/bun:1
+    image: git.fai.st/fedi-image-bot/bot-api:latest
     container_name: bot-api
-    command: bun run docker-dev
-    working_dir: /usr/src/app
     ports:
       - "8080:8080"
     depends_on:
       - mongodb
     environment:
+      PORT: 8080
       MONGODB_URI: "mongodb://mongodb:27017/bot"
       MONGODB_USER: "root"
       MONGODB_PASS: "password"
       JWTSECRET: "cooljwtsecret"
-    volumes:
-      - ./:/usr/src/app:ro
 
-  bot-image-moderation-fe:
-    image: oven/bun:1
-    container_name: bot-image-moderation-fe
-    command: bun run dev --host
-    working_dir: /usr/src/app
+  fe-middleware:
+    image: git.fai.st/fedi-image-bot/fe-middleware:latest
+    container_name: fe-middleware
     ports:
       - "8081:8081"
-    volumes:
-      - ./:/usr/src/app
+    depends_on:
+      - bot-api
+    environment:
+      PORT: 8081
+      BOT_API_URI: "http://bot-api:8080"
+      GELBOORU_IMAGES_PER_REQUEST: 100 # Number of images per request, maximum 100
+      GELBOORU_TAGS: "2girls sleeping" # Tags of the images. The images will have all of these tags
+
+  bot-image-moderation-fe:
+    build: .
+    container_name: bot-image-moderation-fe
+    ports:
+      - "80:80"
+    develop:
+      watch:
+        - action: rebuild
+          path: .
+          ignore:
+            - node_modules/
 
 volumes:
   mongodb_data:

package.json

@@ -4,10 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "docker compose down -v && docker compose watch",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
     "react": "^18.2.0",

src/components/ImageModerator/ImageModerator.tsx

@@ -7,7 +7,7 @@ export interface ImageModeratorProps {
 }
 
 export default function ImageModerator({ acceptLabel, discardLabel }: ImageModeratorProps) {
-    const endpoint = "https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1";
+    const endpoint = "http://fe-middleware:8081/image";
 
     const [isLoading, setIsLoading] = useState(true);
     const [imageSrc, setImageSrc] = useState("");
@@ -18,7 +18,6 @@ export default function ImageModerator({ acceptLabel, discardLabel }: ImageModer
         setIsLoading(true);
         fetch(endpoint, {
             method: "GET",
-            mode: "no-cors",
         })
             .then(response => {
                 if (!response.ok) throw new Error("Response was not ok");