Feat/web app serve

.dockerignore

@@ -130,9 +130,16 @@ typings
 # dotenv environment variables file
 .env
 .env*
+**/.env
+**/.env*
 
 # Sensitive Deploy Files
 deploy/eb/
 
 # tox
 ./.tox
+
+
+# Backend
+backend
+!backend/schema.graphql

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

@@ -0,0 +1,24 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+
+permissions:
+  packages: write
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Publish web-app-serve
+        uses: toggle-corp/web-app-serve-action@v0.1.1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

@@ -12,15 +12,45 @@ RUN apt-get update -y \
 WORKDIR /code
 
 # -------------------------- Nginx - Builder --------------------------------
-FROM dev AS nginx-build
+FROM dev AS web-app-serve-build
 
 COPY ./package.json ./pnpm-lock.yaml /code/
 
 RUN pnpm install
 
 COPY . /code/
 
-# Build variables (Requires backend pulled)
+# NOTE: Dynamic env variables
+# These env variables can be dynamically defined in web-app-serve container runtime.
+# These variables are not included in the build files but the values should still be valid.
+# See "schema" field in "./env.ts"
+ENV APP_TITLE=Timur
+ENV APP_ENVIRONMENT=production
+ENV APP_GRAPHQL_DOMAIN=https://api.example.com
+ENV APP_SENTRY_DSN=https://xyzl@sentry.example.com/123
+
+# NOTE: These are set directly in `vite.config.ts`
+# We're using raw web-app-serve placeholder values here to treat them as dynamic values
+ENV APP_UMAMI_SRC=WEB_APP_SERVE_PLACEHOLDER__APP_UMAMI_SRC
+ENV APP_UMAMI_ID=WEB_APP_SERVE_PLACEHOLDER__APP_UMAMI_ID
+
+# NOTE: Static env variables:
+# These env variables are used during build
 ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql
 
-RUN pnpm generate:type && pnpm build
+# NOTE: WEB_APP_SERVE_ENABLED=true will skip defining the above dynamic env variables
+# See "overrideDefine" field in "./env.ts"
+RUN pnpm generate:type && WEB_APP_SERVE_ENABLED=true pnpm build
+
+# ---------------------------------------------------------------------
+# Final image using web-app-serve
+FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
+
+MAINTAINER navin
+LABEL org.opencontainers.image.source="https://github.com/toggle-corp/timur"
+LABEL org.opencontainers.image.authors="dev@togglecorp.com"
+
+# Env for apply-config script
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
+
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

env.ts

@@ -1,23 +1,41 @@
-import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
+import {
+    defineConfig,
+    overrideDefineForWebAppServe,
+    Schema,
+} from '@julr/vite-plugin-validate-env';
+
+const webAppServeEnabled = process.env.WEB_APP_SERVE_ENABLED?.toLowerCase() === 'true';
+if (webAppServeEnabled) {
+    // eslint-disable-next-line no-console
+    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 nginx-serve`)
-        }
-        return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
+    overrideDefine,
+    validator: 'builtin',
+    schema: {
+        APP_TITLE: Schema.string(),
+        APP_ENVIRONMENT: (key: string, value: string) => {
+            // 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') {
+                // eslint-disable-next-line no-console
+                console.warn(`Using ${value} for app environment. Make sure to not use this for builds without nginx-serve`);
+            }
+            return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
+        },
+        APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string(),
+        APP_GRAPHQL_DOMAIN: Schema.string(),
+        APP_UMAMI_SRC: Schema.string.optional(),
+        APP_UMAMI_ID: Schema.string.optional(),
+        APP_SENTRY_DSN: Schema.string.optional(),
     },
-    APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string(),
-    APP_GRAPHQL_DOMAIN: Schema.string(),
-    APP_UMAMI_SRC: Schema.string.optional(),
-    APP_UMAMI_ID: Schema.string.optional(),
-    APP_SENTRY_DSN: Schema.string.optional(),
 });

knip.json

@@ -1,20 +1,15 @@
 {
     "$schema": "https://unpkg.com/knip@5/schema.json",
     "ignoreDependencies": [
-        "virtual:pwa-info",
-        "virtual:pwa-register",
+        "dotenv",
         "sharp"
     ],
     "entry": [
-        "src/**/*.test.ts",
-        "src/**/*.test.tsx",
         "generated/**/*.ts",
         "src/index.tsx!"
     ],
     "project": [
         "src/**/*.d.ts",
-        "src/**/*.test.ts",
-        "src/**/*.test.tsx",
         "src/**/*.tsx!",
         "src/**/*.ts!"
     ]

package.json

@@ -43,7 +43,7 @@
         "@graphql-codegen/cli": "^5.0.2",
         "@graphql-codegen/client-preset": "^4.3.3",
         "@graphql-typed-document-node/core": "^3.2.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/node": "^20.11.6",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
@@ -67,7 +67,7 @@
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "graphql": "^16.9.0",
         "happy-dom": "^15.7.3",
-        "knip": "^5.29.2",
+        "knip": "^5.61.3",
         "patch-package": "^7.0.0",
         "postcss": "^8.3.0",
         "postcss-nested": "^6.0.1",