Add Docker

.github/workflows/ci.yml

@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - 'develop'
+      - web-app-serve-session-01/barsha
 
 env:
   APP_TITLE: Timur

.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/barsha
+
+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 }}

.gitignore

@@ -12,4 +12,4 @@ pnpm-debug.log*
 build/
 generated/
 coverage/
-stats.html
+stats.html

Dockerfile

@@ -12,15 +12,48 @@ RUN apt-get update -y \
 WORKDIR /code
 
 # -------------------------- Nginx - Builder --------------------------------
-FROM dev AS nginx-build
+
+
+# Build stage for web app
+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=Barsha
+
+# 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
+ENV APP_GRAPHQL_DOMAIN=APP_GRAPHQL_ENDPOINT=http://localhost:8000/graphql/
+ENV APP_UMAMI_SRC=http://barsha.com
+ENV APP_UMAMI_ID=123abc
+ENV APP_SENTRY_DSN=http://barsha.com
+ENV APP_ENVIRONMENT=production
+
+# 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/workshop-playground/"
+LABEL org.opencontainers.image.authors="barsha.thakuri@company.com"
+
+# Env for apply-config script
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
 
-RUN pnpm generate:type && pnpm build
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

docker-compose.yml

@@ -16,4 +16,4 @@ services:
     volumes:
       - ../:/code
     ports:
-      - 127.0.0.1:3000:3000
+      - 127.0.0.1:3000:3000

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: {
+        // NOTE: These are the dynamic env variables
+        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') {
+                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,14 +43,13 @@
         "@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": "github: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",
         "@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",
@@ -90,5 +90,5 @@
         "vitest": "^1.2.2",
         "workbox-window": "^7.1.0"
     },
-    "packageManager": "pnpm@8.6.0+sha1.71f9126a20cd3d00fa47c188f956918858180e54"
+    "packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184"
 }