chore(web-app-serve):add docker configuration

Author: roshni73

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

@@ -0,0 +1,25 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - web-serve-session-1/roshni
+
+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 }}

.github/workflows/web-app-serve/docker-compose.yml

@@ -0,0 +1,15 @@
+# NOTE: The name should is mandatory and should be unique
+name: togglecorp-timur-test
+
+services:
+  web-app-serve:
+    build:
+      context: ../
+      target: web-app-serve
+    environment:
+      # web-app-serve config
+      APPLY_CONFIG__ENABLE_DEBUG: true
+    # NOTE: See "Dockerfile" to get dynamic env variables for .env file
+    env_file: .env
+    ports:
+      - '8050:80'

.gitignore

@@ -1,6 +1,7 @@
 .env
 .vite/
 
+**.env
 # Tooling
 node_modules/
 .eslintcache

Dockerfile

@@ -1,26 +1,53 @@
 # -------------------------- Dev ---------------------------------------
 
-FROM node:18-bullseye AS dev
-
-RUN apt-get update -y \
-    && apt-get install -y --no-install-recommends git \
-    && rm -rf /var/lib/apt/lists/* \
-    # NOTE: yarn > 1.22.19 breaks yarn-install invoked by pnpm
-    && npm install -g pnpm@8.6.0 yarn@1.22.19 --force \
-    && git config --global --add safe.directory /code
-
-WORKDIR /code
-
-# -------------------------- Nginx - Builder --------------------------------
-FROM dev AS nginx-build
-
-COPY ./package.json ./pnpm-lock.yaml /code/
-
-RUN pnpm install
-
-COPY . /code/
-
-# Build variables (Requires backend pulled)
-ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql
-
-RUN pnpm generate:type && pnpm build
+    FROM node:18-bullseye AS dev
+
+    RUN apt-get update -y \
+        && apt-get install -y --no-install-recommends git \
+        && rm -rf /var/lib/apt/lists/* \
+        # NOTE: yarn > 1.22.19 breaks yarn-install invoked by pnpm
+        && npm install -g pnpm@8.6.0 yarn@1.22.19 --force \
+        && git config --global --add safe.directory /code
+    
+    WORKDIR /code
+    
+    # -------------------------- Nginx - Builder --------------------------------
+    FROM dev AS web-app-serve-build
+    
+    COPY ./package.json ./pnpm-lock.yaml /code/
+    
+    RUN pnpm install
+    
+    COPY . /code/
+    
+    # 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_GRAPHQL_DOMAIN=http://localhost:8100/graphql
+    ENV APP_ENVIRONMENT=production
+    ENV APP_SENTRY_DSN=hello
+    
+    # NOTE: WEB_APP_SERVE_ENABLED=true will skip defining the above dynamic env variables
+    # See "overrideDefine" field in "./env.ts"
+    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 && 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
+    
+    LABEL org.opencontainers.image.source="https://github.com/toggle-corp/web-app-serve"
+    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,38 @@
-import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
+import { defineConfig, Schema, overrideDefineForWebAppServe } 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: {
+        // NOTE: These are the dynamic env variables
+        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');
+        },
+        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(),
 });

package.json

@@ -23,6 +23,7 @@
         "@codemirror/lang-markdown": "^6.2.5",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
+        "@julr/vite-plugin-validate-env": "github:toggle-corp/vite-plugin-validate-env#v2.2.0-tc.1",
         "@replit/codemirror-vim": "^6.2.1",
         "@sentry/react": "^8.26.0",
         "@togglecorp/fujs": "^2.2.0",
@@ -43,14 +44,12 @@
         "@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": "^2.2.0",
         "@types/node": "^20.11.6",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
         "@typescript-eslint/eslint-plugin": "^5.59.5",
         "@typescript-eslint/parser": "^5.59.5",
         "@vite-pwa/assets-generator": "^1.0.0",
-        "sharp": "^0.33.5",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "@vitest/coverage-v8": "^1.2.2",
         "autoprefixer": "^10.4.14",
@@ -74,6 +73,7 @@
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^8.3.2",
         "rollup-plugin-visualizer": "^5.9.0",
+        "sharp": "^0.33.5",
         "stylelint": "^16.7.0",
         "stylelint-config-concentric": "^2.0.2",
         "stylelint-config-recommended": "^14.0.1",