Merge branch 'subsetter_front' into develop_v2

.github/workflows/frontend-gh-pages.yml

@@ -43,7 +43,6 @@ jobs:
           touch .env
           echo VITE_APP_API_URL=${{ secrets.VITE_APP_API_URL }} >> .env
           echo VITE_APP_FULL_URL=${{ secrets.VITE_APP_FULL_URL }} >> .env
-          echo VITE_OAUTH2_REDIRECT_URL=${{ secrets.VITE_OAUTH2_REDIRECT_URL }} >> .env
           echo VITE_APP_BASE=${{ secrets.VITE_APP_BASE }} >> .env
           cp .env ../.env
       - name: Install dependencies

app/docker-compose.yml

@@ -18,8 +18,11 @@ services:
 
   frontend:
     image: frontend
+    env_file:
+      - .env
     build:
       dockerfile: ./frontend/Dockerfile
+      context: ./
     ports:
       - 8080:5003
     restart: unless-stopped

app/frontend/.dockerignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+dist

app/frontend/Dockerfile

@@ -1,13 +1,24 @@
+# in order to get the required .env, context must be app/
+# docker build -f app/frontend/Dockerfile app/
 FROM node:20.9.0 as build-stage
+WORKDIR /tmp
+# COPY *env* ./
+# RUN [ -f ".env" ] || cp env.template .env
+# RUN grep '^VITE' .env > /.env
+
 WORKDIR /app
-COPY .env ../.env
-COPY ./frontend .
+ADD frontend .
 RUN npm update
 RUN npm run build
 
 FROM nginx:1.24.0 as production-stage
 RUN mkdir /app
 COPY --from=build-stage /app/dist /app
-COPY --from=build-stage /.env .env
+# COPY --from=build-stage .env .env
 COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+
+# Allow substitution of env vars at runtime
+COPY frontend/docker-entrypoint.sh /
+RUN chmod +x /docker-entrypoint.sh
+ENTRYPOINT ["/docker-entrypoint.sh"]
 EXPOSE 5003

app/frontend/docker-entrypoint.sh

@@ -1,6 +1,14 @@
-#!/bin/bash
+#!/bin/sh
+ROOT_DIR=/app
+# Replace env vars in files served by NGINX
+for file in $ROOT_DIR/assets/*.js $ROOT_DIR/index.html;
+do
+    echo "Processing $file ...";
+    # LC_ALL=C sed -i "" 's|VITE_APP_API_URL_PLACEHOLDER|'${VITE_APP_API_URL}'|g' $file
+    sed -i 's|VITE_APP_API_URL_PLACEHOLDER|'${VITE_APP_API_URL}'|g' $file
+    sed -i 's|VITE_APP_FULL_URL_PLACEHOLDER|'${VITE_APP_FULL_URL}'|g' $file
+    sed -i 's|VITE_APP_BASE_PLACEHOLDER|'${VITE_APP_BASE}'|g' $file
+done
 
-npm i @vue/cli-service
-npm install
-npm run build
-npm run serve -- --port 5003
+echo "Starting Nginx"
+nginx -g 'daemon off;'

app/frontend/src/constants.js

@@ -1,8 +1,7 @@
-export const APP_NAME = import.meta.env.VITE_APP_NAME || "";
-export const APP_URL = import.meta.env.VITE_APP_FULL_URL || "";
-export const APP_BASE = import.meta.env.VITE_APP_BASE || "";
+export const APP_URL = import.meta.env.VITE_APP_FULL_URL || "VITE_APP_FULL_URL_PLACEHOLDER";
+export const APP_BASE = import.meta.env.VITE_APP_BASE || "VITE_APP_BASE_PLACEHOLDER";
 
-export const API_BASE = import.meta.env.VITE_APP_API_URL || "";
+export const API_BASE = import.meta.env.VITE_APP_API_URL || "VITE_APP_API_URL_PLACEHOLDER";
 export const ENDPOINTS = {
   openapi: `${API_BASE}/openapi.json`,
   authCuahsiAuthorize: `${API_BASE}/auth/front/authorize`,