feat(workshop): web-app-serve setup

Author: shreeyash07

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

@@ -0,0 +1,25 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - web-app-serve-session-01/shreeyash # TODO: REMOVE me
+
+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="Shreeyash Dashboard"
+ENV APP_GRAPHQL_ENDPOINT=https://my-best-dashboard.com/graphql/
+
+ENV APP_ENVIRONMENT=production
+
+ENV APP_GRAPHQL_DOMAIN=https://my-best-dashboard.com/domain/
+
+# 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_ANALYTIC_SRC=WEB_APP_SERVE_PLACEHOLDER__APP_ANALYTIC_SRC
+
+# 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
+
+LABEL org.opencontainers.image.source="https://github.com/toggle-corp/shreeyash-dashboard"
+LABEL org.opencontainers.image.authors="shreeyash.shrestha@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,40 @@
-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, 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

@@ -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": "^2.2.0",
+        "@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",

pnpm-lock.yaml

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

web-app-serve/.gitignore

@@ -0,0 +1,15 @@
+# NOTE: The name should is mandatory and should be unique
+name: shreeyash-dashboard
+
+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'