chore: run dist with environment variables

Author: pratapalakshmi

apps/backoffice-v2/Dockerfile

@@ -22,10 +22,18 @@ CMD ["npm", "run", "dev", "--host"]
 
 FROM nginx:stable-alpine as prod
 
+WORKDIR /app
+
 COPY --from=dev /app/dist /usr/share/nginx/html
 
+COPY --from=dev /app/entrypoint.sh /app/entrypoint.sh
+
 COPY example.nginx.conf /etc/nginx/conf.d/default.conf
 
+RUN chmod a+x /app/entrypoint.sh;
+
 EXPOSE 80
 
+ENTRYPOINT [ "/app/entrypoint.sh" ]
+
 CMD ["nginx", "-g", "daemon off;"]

apps/backoffice-v2/entrypoint.sh

@@ -0,0 +1,54 @@
+#!/usr/bin/env sh
+
+if [[ -z "$VITE_DOMAIN" ]]
+then
+    VITE_DOMAIN="http://localhost:3000"
+fi
+
+if [[ -z "$VITE_API_KEY" ]]
+then
+    VITE_API_KEY="secret"
+fi
+
+if [[ -z "$VITE_AUTH_ENABLED" ]]
+then
+    VITE_AUTH_ENABLED=true
+fi
+
+
+if [[ -z "$VITE_MOCK_SERVER" ]]
+then
+    VITE_MOCK_SERVER=false
+fi
+
+if [[ -z "$VITE_POLLING_INTERVAL" ]]
+then
+    VITE_POLLING_INTERVAL=10
+fi
+
+if [[ -z "$VITE_ASSIGNMENT_POLLING_INTERVAL" ]]
+then
+    VITE_ASSIGNMENT_POLLING_INTERVAL=5
+fi
+
+if [[ -z "$VITE_FETCH_SIGNED_URL" ]]
+then
+    VITE_FETCH_SIGNED_URL=false
+fi
+
+cat << EOF > /usr/share/nginx/html/config.js
+globalThis.env = {
+  VITE_API_URL: "$VITE_DOMAIN/api/v1/internal",
+  VITE_API_KEY: "$VITE_API_KEY",
+  VITE_AUTH_ENABLED: "$VITE_AUTH_ENABLED",
+  VITE_MOCK_SERVER: "$VITE_MOCK_SERVER",
+  VITE_POLLING_INTERVAL: "$VITE_POLLING_INTERVAL",
+  VITE_ASSIGNMENT_POLLING_INTERVAL: "$VITE_ASSIGNMENT_POLLING_INTERVAL",
+  VITE_FETCH_SIGNED_URL: "$VITE_FETCH_SIGNED_URL",
+  VITE_ENVIRONMENT_NAME: "local",
+  MODE: "production"
+}
+EOF
+
+# Handle CMD command
+exec "$@"

apps/backoffice-v2/global.d.ts

@@ -0,0 +1,3 @@
+declare global {
+  export var env: { [key: string]: any };
+}

apps/backoffice-v2/index.html

@@ -8,6 +8,7 @@
     <link rel="manifest" href="/manifest.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ballerine - Backoffice</title>
+    <script type="text/javascript" src="/config.js"></script>
     <script>
       let cachedTheme = localStorage.getItem('theme');
       const themes = ['dark', 'light'];

apps/backoffice-v2/public/config.js

@@ -0,0 +1,9 @@
+globalThis.env = {
+  VITE_API_URL: import.meta.env.VITE_API_URL || 'http://google.com',
+  VITE_KYB_DEFINITION_ID: import.meta.env.VITE_KYB_DEFINITION_ID || 'kyb_parent_kyc_session_example',
+  VITE_API_KEY: import.meta.env.VITE_API_KEY || 'secret',
+  VITE_ENVIRONMENT_NAME: import.meta.env.VITE_ENVIRONMENT_NAME || 'local',
+  VITE_DEFAULT_EXAMPLE_TOKEN: import.meta.env.VITE_DEFAULT_EXAMPLE_TOKEN || '12345678-1234-1234-1234-123456789012',
+  VITE_SENTRY_AUTH_TOKEN: import.meta.env.VITE_SENTRY_AUTH_TOKEN || '',
+  VITE_SENTRY_DSN: import.meta.env.VITE_SENTRY_DSN || '',
+};

apps/backoffice-v2/src/common/env/env.ts

@@ -10,7 +10,7 @@ export const formatErrors = (errors: ZodFormattedError<Map<string, string>, stri
     .filter(Boolean);
 };
 
-const _env = EnvSchema.safeParse(import.meta.env);
+const _env = EnvSchema.safeParse(globalThis.env);
 
 // TypeScript complains with !env.success
 if (_env.success === false) {

apps/backoffice-v2/src/main.tsx

@@ -17,6 +17,7 @@ import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import { initializeMonitoring } from '@/initialize-monitoring/initialize-monitoring';
 import { initializeSessionRecording } from '@/initialize-session-recording/initialize-session-recording';
+import '../public/config.js?url';
 
 initializeMonitoring();
 
@@ -53,3 +54,8 @@ void prepare().then(() => {
     );
   }
 });
+
+//@ts-ignore
+globalThis.env = globalThis.env || {
+  API_URL: import.meta.env.VITE_API_URL,
+};