fix docker config & env var at build time

Author: berdal84

README.md

@@ -20,7 +20,7 @@ There is two ways to start the apps, the first one rely on docker and docker-com
 
 Prerequisites: docker and docker-compose 3.8+
 
-Run `docker-compose up`
+Run `docker compose --file docker-compose.base.yml --file docker-compose.dev.yml up`
 
 #### Manually
 

docker-compose.yml docker-compose.base.yml

@@ -11,6 +11,8 @@ services:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
       POSTGRES_DB: postgres
+    networks:
+      - backend
 
   #=== API ===#
 
@@ -25,14 +27,29 @@ services:
       DB_USER: postgres
       DB_PASSWORD: postgres
       DB_HOST: postgres
-    ports:
-      - 8000:8000
+    restart: always
+    depends_on:
+      - database
+    networks:
+      - backend
+      - frontend
 
   #=== Frontend ===#
 
   frontend:
     container_name: frontend
-    build: ./frontend
+    build:
+      context: ./frontend
     restart: always
-    ports:
-      - 3000:3000
+    depends_on:
+      - api
+    networks:
+      - frontend
+
+#=== Networks ===#
+
+networks:
+  frontend:
+    name: frontend_network
+  backend:
+    name: backend_network

docker-compose.dev.yml

@@ -0,0 +1,26 @@
+version: "3.8"
+services:
+
+  # This file is supposed to be used in addition to the base docker-compose.yml
+  # ex:
+  #     docker compose --file docker-compose.base.yml --file docker-compose.dev.yml up
+  
+  database:
+    ports:
+      - target: 5432  
+        # published: 5432 # Not required
+  
+  api:
+    ports:
+      - target: 8000
+        published: 8000
+
+  frontend:
+    build:
+      context: ./frontend
+      args:
+        - API_BASE_URL=http://0.0.0.0:8000
+    ports:
+      - target: 3000
+        published: 3000 # Public
+

docker-compose.prod.yml

@@ -0,0 +1,26 @@
+version: "3.8"
+services:
+
+  # This file is supposed to be used in addition to the base docker-compose.yml
+  # ex:
+  #     docker compose --file docker-compose.base.yml --file docker-compose.prod.yml up
+  
+  database:
+    ports:
+      - target: 5432  
+      #  published:  # NOT publicly accessible
+  
+  api:
+    ports:
+      - target: 8000
+        published: 8000
+
+  frontend:
+    build:
+      context: ./frontend
+      args:
+        - API_BASE_URL=http://54.36.191.123:8000
+    ports:
+      - target: 3000
+        published: 80 # Public
+

frontend/Dockerfile

@@ -22,11 +22,13 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+ARG API_BASE_URL=http://0.0.0.0
+ENV API_BASE_URL=$API_BASE_URL
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
 # ENV NEXT_TELEMETRY_DISABLED 1
-
 RUN yarn build
 
 # If using npm comment out above and use below instead

frontend/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'standalone',
+    env: {
+        API_BASE_URL: process.env['API_BASE_URL'] ?? 'http://localhost:8000'
+    }
 }
 
 module.exports = nextConfig

frontend/src/app/components/SampleDetails.tsx

@@ -73,7 +73,7 @@ export default function SampleDetails({ sample, onEdit, onClose, onDelete }: Sam
                             <td>{file_name ?
                                 <a
                                     // TODO: would be better to include the url in API's response
-                                    href={`http://localhost:8000/sample/${id}/download`}
+                                    href={`${process.env.API_BASE_URL}/sample/${id}/download`}
                                     className="underline"
                                     title="Download File"
                                 >

frontend/src/app/utilities/useApi.ts

@@ -3,14 +3,13 @@ import { useCallback } from "react";
 import { useAppContext, useAppDispatchContext } from "../contexts/AppContext";
 import { Page, Sample, SampleCreate, SampleUpdate } from "@/app/types";
 
-
 /**
  * Create a new AXIOS instance to query the API
  * See https://www.npmjs.com/package/axios
 */
 const api = axios.create({
-    baseURL: `${process.env.BIOSTACK_API_HOST ?? 'http://localhost'}/sample`,
-    timeout: 3000,
+    baseURL: `${process.env.API_BASE_URL}/sample`,
+    timeout: 5000,
     headers: {
         'Accept': 'application/json',
     }