Feat/web app serve

.dockerignore

@@ -107,6 +107,7 @@ build/Release
 
 # Dependency directories
 node_modules
+**/node_modules
 jspm_packages
 
 # Typescript v1 declaration files
@@ -145,4 +146,4 @@ Dockerfile
 .dockerignore
 
 # git
-.gitignore
+.gitignore

.github/workflows/ci.yml

@@ -286,19 +286,3 @@ jobs:
 
       - name: Build
         run: pnpm build
-
-  validate_helm:
-    name: Validate Helm
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@main
-
-      - name: Install Helm
-        uses: azure/setup-helm@v4
-
-      - name: Helm lint
-        run: helm lint ./nginx-serve/helm --values ./nginx-serve/helm/values-test.yaml
-
-      - name: Helm template
-        run: helm template ./nginx-serve/helm --values ./nginx-serve/helm/values-test.yaml

.github/workflows/publish-web-app-serve.yml

@@ -0,0 +1,23 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - project/*
+
+permissions:
+  packages: write
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Publish web-app-serve
+        uses: toggle-corp/web-app-serve/.github/actions/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

@@ -0,0 +1,55 @@
+# syntax=docker/dockerfile:1-labs
+
+# -------------------------- Dev ---------------------------------------
+FROM node:20-bookworm AS dev
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /code
+
+# -------------------------- Nginx - Builder --------------------------------
+FROM dev AS web-app-build
+
+# NOTE: --parents is not yet available in stable syntax, using docker/dockerfile:1-labs
+COPY --parents package.json pnpm-lock.yaml pnpm-workspace.yaml ./**/package.json patches/ /code/
+
+RUN corepack prepare --activate
+
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+COPY . /code/
+
+# 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
+
+LABEL maintainer="IFRC"
+LABEL org.opencontainers.image.source="https://github.com/IFRCGo/go-web-app"
+
+# NOTE: Used by apply-config.sh
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
+
+COPY --from=web-app-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

app/env.ts

@@ -1,29 +1,40 @@
-import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
+import {
+    Schema,
+    defineConfig,
+    overrideDefineForWebAppServe,
+} 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')
+}
+const overrideDefine = webAppServeEnabled
+        ? overrideDefineForWebAppServe
+        : undefined;
 
 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}"`);
-        }
-        if (value === 'APP_ENVIRONMENT_PLACEHOLDER') {
-            console.warn(`Using ${value} for app environment. Make sure to not use this for builds without helm chart`)
-        }
-        return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
+    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(),
     },
-    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,
 });

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": "^1.0.1",
+        "@julr/vite-plugin-validate-env": "git+https://github.com/toggle-corp/vite-plugin-validate-env#v2.2.0-tc.1",
         "@types/file-saver": "^2.0.5",
         "@types/mapbox-gl": "^1.13.0",
         "@types/node": "^20.11.6",

app/vite.config.ts

@@ -11,8 +11,6 @@ import { VitePluginRadar } from 'vite-plugin-radar';
 import svgr from 'vite-plugin-svgr';
 import pkg from './package.json';
 
-import envConfig from './env';
-
 /* Get commit hash */
 const commitHash = execSync('git rev-parse --short HEAD').toString();
 
@@ -45,7 +43,9 @@ export default defineConfig(({ mode }) => {
             reactSwc(),
             tsconfigPaths(),
             webfontDownload(),
-            validateEnv(envConfig),
+            validateEnv({
+                configFile: 'env',
+            }),
             isProd ? compression() : undefined,
             isProd ? visualizer({ sourcemap: true }) : undefined,
             VitePluginRadar({