fixup! refactor: replace nginx-serve with web-app-serve

Author: tnagorra

Dockerfile

@@ -21,25 +21,27 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
 COPY . /code/
 
-# Dynamic configs. Can be changed with containers. (Placeholder values)
-ENV APP_TITLE=APP_TITLE_PLACEHOLDER
-ENV APP_ENVIRONMENT=APP_ENVIRONMENT_PLACEHOLDER
-ENV APP_MAPBOX_ACCESS_TOKEN=APP_MAPBOX_ACCESS_TOKEN_PLACEHOLDER
-ENV APP_TINY_API_KEY=APP_TINY_API_KEY_PLACEHOLDER
-ENV APP_API_ENDPOINT=https://APP-API-ENDPOINT-PLACEHOLDER.COM/
-ENV APP_RISK_API_ENDPOINT=https://APP-RISK-API-ENDPOINT-PLACEHOLDER.COM/
-ENV APP_SDT_URL=https://APP-SDT-URL-PLACEHOLDER.COM/
-ENV APP_SENTRY_DSN=https://APP-SENTRY-DSN-PLACEHOLDER.COM
-
-# Static configs (Configured when building docker image)
-ARG APP_SENTRY_TRACES_SAMPLE_RATE=
-ENV APP_SENTRY_TRACES_SAMPLE_RATE=${APP_SENTRY_TRACES_SAMPLE_RATE}
-ARG APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=
-ENV APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=${APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE}
-ARG APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=
-ENV APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=${APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE}
-
-RUN pnpm build
+# Configuration Example
+# These environment variables can be dynamicallly updated in containers.
+# NOTE: These variables are not included in the build but they should still be valid
+# See the schema field in ./app/env.ts
+ENV APP_TITLE=GO
+ENV APP_ENVIRONMENT=staging
+ENV APP_API_ENDPOINT=https://goadmin-example.ifrc.org/api/
+ENV APP_ADMIN_URL=https://goadmin-example.ifrc.org/admin/
+ENV APP_MAPBOX_ACCESS_TOKEN=example-mapbox-access-token
+ENV APP_TINY_API_KEY=example-tiny-api-key
+ENV APP_RISK_API_ENDPOINT=https://go-risk-example.northeurope.cloudapp.azure.com/api/
+ENV APP_SDT_URL=https://surveydesigner-example-api.ifrc.org
+ENV APP_SENTRY_DSN=https://[email protected]/123
+ENV APP_SENTRY_TRACES_SAMPLE_RATE=0.2
+ENV APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=0.2
+ENV APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=0.2
+ENV APP_GOOGLE_ANALYTICS_ID=example-google-analytics-id
+
+# NOTE: WEB_APP_SERVE_ENABLED will skip defining the above env variables
+# See overrideDefine field in ./app/env.ts
+RUN WEB_APP_SERVE_ENABLED=true pnpm build
 
 # ---------------------------------------------------------------------------
 FROM ghcr.io/toggle-corp/web-app-serve:v0.1.1 AS web-app-serve
@@ -48,8 +50,6 @@ LABEL maintainer="IFRC"
 LABEL org.opencontainers.image.source="https://github.com/IFRCGo/go-web-app"
 
 # NOTE: Used by apply-config.sh
-ENV APPLY_CONFIG__APPLY_CONFIG_PATH=/code/apply-config.sh
 ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
 
 COPY --from=web-app-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"
-COPY ./web-app-serve/apply-config.sh "$APPLY_CONFIG__APPLY_CONFIG_PATH"

app/env.ts

@@ -1,29 +1,49 @@
-import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
+import { Schema, defineConfig } from '@julr/vite-plugin-validate-env';
+
+const webAppServeEnabled = process.env.WEB_APP_SERVE_ENABLED?.toLowerCase() === 'true';
+if (webAppServeEnabled) {
+    console.warn('Building application for WEB_APP_SERVE')
+}
 
 export default defineConfig({
-    APP_TITLE: Schema.string(),
-    APP_ENVIRONMENT: (key, value) => {
-        // NOTE: APP_ENVIRONMENT_PLACEHOLDER is meant to be used with image builds
-        // The value will be later replaced with the actual value
-        const regex = /^production|staging|testing|alpha-\d+|development|APP_ENVIRONMENT_PLACEHOLDER$/;
-        const valid = !!value && (value.match(regex) !== null);
-        if (!valid) {
-            throw new Error(`Value for environment variable "${key}" must match regex "${regex}", instead received "${value}"`);
+    validator: "builtin",
+    schema: {
+        APP_TITLE: Schema.string(),
+        APP_ENVIRONMENT: (key, value) => {
+            const regex = /^production|staging|testing|alpha-\d+|development$/;
+            const valid = !!value && (value.match(regex) !== null);
+            if (!valid) {
+                throw new Error(`Value for environment variable "${key}" must match regex "${regex}", instead received "${value}"`);
+            }
+            return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development');
+        },
+        APP_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+        APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
+        APP_TINY_API_KEY: Schema.string(),
+        APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),
+        APP_SDT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        APP_SENTRY_DSN: Schema.string.optional(),
+        APP_SENTRY_TRACES_SAMPLE_RATE: Schema.number.optional(),
+        APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE: Schema.number.optional(),
+        APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE: Schema.number.optional(),
+        APP_GOOGLE_ANALYTICS_ID: Schema.string.optional(),
+    },
+    overrideDefine: (key, value) => {
+        // Default:
+        if (!webAppServeEnabled) {
+            return JSON.stringify(value);
         }
-        if (value === 'APP_ENVIRONMENT_PLACEHOLDER') {
-            console.warn(`Using ${value} for app environment. Make sure to not use this for builds without helm chart`)
+        // Override: Skip defining env variables if web app serve is enabled
+        if (value === null || value === undefined) {
+            // NOTE: value should always be defined during build
+            throw `Value for ${key} should not be null or undefined`;
         }
-        return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
+        const replacement_str = `WEB_APP_SERVE_PLACEHOLDER__${key}`;
+        // NOTE: For string values, we need to stringify 'replacement_str'
+        // This adds double quotes around the replacement string
+        return typeof value === 'string'
+            ? JSON.stringify(replacement_str)
+            : replacement_str;
     },
-    APP_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
-    APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
-    APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
-    APP_TINY_API_KEY: Schema.string(),
-    APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),
-    APP_SDT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
-    APP_SENTRY_DSN: Schema.string.optional(),
-    APP_SENTRY_TRACES_SAMPLE_RATE: Schema.number.optional(),
-    APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE: Schema.number.optional(),
-    APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE: Schema.number.optional(),
-    APP_GOOGLE_ANALYTICS_ID: Schema.string.optional(),
 });

app/package.json

@@ -62,7 +62,7 @@
         "@eslint/eslintrc": "^3.1.0",
         "@eslint/js": "^9.20.0",
         "@eslint/json": "^0.5.0",
-        "@julr/vite-plugin-validate-env": "^2.2.0",
+        "@julr/vite-plugin-validate-env": "git+https://github.com/toggle-corp/vite-plugin-validate-env#97fc110",
         "@types/file-saver": "^2.0.5",
         "@types/mapbox-gl": "^1.13.0",
         "@types/node": "^20.11.6",

pnpm-lock.yaml

@@ -0,0 +1 @@
+.env

web-app-serve/.gitignore

@@ -7,19 +7,7 @@ services:
       target: web-app-serve
     environment:
       APPLY_CONFIG__ENABLE_DEBUG: true
-      # App configs (Placeholder replacement)
-      APP_TITLE: ${APP_TITLE:-GO API}
-      APP_ENVIRONMENT: ${APP_ENVIRONMENT:-Staging}
-      APP_MAPBOX_ACCESS_TOKEN: ${APP_MAPBOX_ACCESS_TOKEN:-my-secret-mapbox-access-token}
-      APP_TINY_API_KEY: ${APP_TINY_API_KEY:-my-secret-tiny-api-key}
-      APP_API_ENDPOINT: ${APP_API_ENDPOINT:-https://goadmin-stage.ifrc.org/api/}
-      APP_RISK_API_ENDPOINT: ${APP_RISK_API_ENDPOINT:-https://go-risk-staging.northeurope.cloudapp.azure.com/api/}
-      APP_SDT_URL: ${APP_SDT_URL:-https://surveydesigner-stage-api.ifrc.org}
-      APP_SENTRY_DSN: ${APP_SENTRY_DSN:-https://[email protected]/123}
+    # NOTE: See ../Dockerfile for example values and env variables
+    env_file: .env
     ports:
-      - '8001:80'
-    develop:
-      watch:
-        - action: sync+restart
-          path: ./apply-config.sh
-          target: /code/apply-config.sh
+      - '8050:80'