🚧 Don't hardcode API url in frontend

Author: SilviaAmAm

Dockerfile

@@ -47,6 +47,7 @@ COPY ./frontend/package-lock.json ./frontend/package.json ./
 RUN npm ci
 
 COPY ./frontend .
+COPY ./frontend/.env.production.template ./.env.production
 
 RUN npm run build
 
@@ -71,6 +72,7 @@ COPY ./backend/bin/celery_worker.sh /celery_worker.sh
 COPY ./backend/bin/celery_beat.sh /celery_beat.sh
 COPY ./backend/bin/celery_flower.sh /celery_flower.sh
 COPY ./backend/bin/check_celery_worker_liveness.py /check_celery_worker_liveness.py
+COPY ./frontend/scripts/replace-envvars.sh /replace-envvars.sh
 
 RUN mkdir -p /app/log /app/media /app/src/openarchiefbeheer/static/
 

backend/bin/docker_start.sh

@@ -26,6 +26,10 @@ done
 >&2 echo "Apply database migrations"
 python src/manage.py migrate
 
+# Populate the environment variables for the frontend
+>&2 echo "Replace frontend env vars"
+/replace-envvars.sh
+
 # Start server
 >&2 echo "Starting server"
 exec uwsgi \

docker-compose.yml

@@ -24,7 +24,7 @@ services:
 
   web:
     image: maykinmedia/open-archiefbeheer:latest
-    environment:
+    environment: &web_env
       - ALLOWED_HOSTS=localhost
       - DJANGO_SETTINGS_MODULE=openarchiefbeheer.conf.docker
       - SECRET_KEY=${SECRET_KEY:-django-insecure-!bkx+tx18&lvp(@_9)9ut(y(keqho*zhz1&^sqqgq9*i=__w(}
@@ -41,6 +41,13 @@ services:
       - SESSION_COOKIE_SECURE=False
       - TWO_FACTOR_FORCE_OTP_ADMIN=False
       - TWO_FACTOR_PATCH_ADMIN=False
+      - CELERY_BROKER_URL=redis://redis:6379/0
+      - CELERY_RESULT_BACKEND=redis://redis:6379/0
+      - CELERY_LOGLEVEL=DEBUG
+      - REACT_APP_API_SCHEME=http
+      - REACT_APP_API_HOST=localhost
+      - REACT_APP_API_PORT=8080
+      - REACT_APP_API_PATH=/api/v1
     ports:
       - 8080:8080
     depends_on:
@@ -49,6 +56,32 @@ services:
     networks:
       - open-archiefbeheer-dev
 
+  celery:
+    image: maykinmedia/open-archiefbeheer:latest
+    command: /celery_worker.sh
+    environment: *web_env
+    healthcheck:
+      test: [ "CMD", "python", "/app/bin/check_celery_worker_liveness.py" ]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 10s
+    depends_on:
+      - db
+      - redis
+    networks:
+      - open-archiefbeheer-dev
+
+  celery-beat:
+    image: maykinmedia/open-archiefbeheer:latest
+    command: /celery_beat.sh
+    environment: *web_env
+    depends_on:
+      - db
+      - redis
+    networks:
+      - open-archiefbeheer-dev
+
   nginx:
     image: nginx
     volumes:

frontend/.env.example

@@ -0,0 +1,4 @@
+REACT_APP_API_SCHEME=http
+REACT_APP_API_HOST=localhost
+REACT_APP_API_PORT=8080
+REACT_APP_API_PATH=/api/v1

frontend/.env.production.template

@@ -0,0 +1,4 @@
+REACT_APP_API_SCHEME=REACT_APP_API_SCHEME_PLACEHOLDER
+REACT_APP_API_HOST=REACT_APP_API_HOST_PLACEHOLDER
+REACT_APP_API_PORT=REACT_APP_API_PORT_PLACEHOLDER
+REACT_APP_API_PATH=REACT_APP_API_PATH_PLACEHOLDER

frontend/scripts/replace-envvars.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+set -eux -o pipefail
+
+for file in /app/static/js/*.js;
+do
+  sed -i 's|REACT_APP_API_SCHEME_PLACEHOLDER|'${REACT_APP_API_SCHEME}'|g' $file
+  sed -i 's|REACT_APP_API_HOST_PLACEHOLDER|'${REACT_APP_API_HOST}'|g' $file
+  sed -i 's|REACT_APP_API_PORT_PLACEHOLDER|'${REACT_APP_API_PORT}'|g' $file
+  sed -i 's|REACT_APP_API_PATH_PLACEHOLDER|'${REACT_APP_API_PATH}'|g' $file
+done

frontend/src/lib/api/request.ts

@@ -1,16 +1,16 @@
 import { getCookie } from "../cookie/cookie";
 
-/** Scheme for all API requests.. */
-export const API_SCHEME = "http";
+/** Scheme for all API requests. */
+export const API_SCHEME = process.env.REACT_APP_API_SCHEME;
 
 /** The host for the API server. */
-export const API_HOST = "localhost";
+export const API_HOST = process.env.REACT_APP_API_HOST;
 
 /** The port for the API server. */
-export const API_PORT = 8080;
+export const API_PORT = process.env.REACT_APP_API_PORT;
 
 /** The base path for all API requests. */
-export const API_PATH = "/api/v1";
+export const API_PATH = process.env.REACT_APP_API_PATH;
 
 /** The base url for all API requests. */
 export const API_BASE_URL = `${API_SCHEME}://${API_HOST}:${API_PORT}${API_PATH}`;