Add web app serve for alpha deployment

Author: barshathakuri

.dockerignore

@@ -1,143 +1,4 @@
-# Swap files
-*.swp
-
-# Byte-compiled / optimized / DLL files
-__pycache__
-*.py[cod]
-*$py.class
-
-# C extensions
-*.so
-
-# Distribution / packaging
-.Python
-env
-build
-develop-eggs
-dist
-downloads
-eggs
-.eggs
-lib
-lib64
-parts
-sdist
-var
-*.egg-info
-.installed.cfg
-*.egg
-
-# PyInstaller
-#  Usually these files are written by a python script from a template
-#  before PyInstaller builds the exe, so as to inject date/other infos into it.
-*.manifest
-*.spec
-
-# Installer logs
-pip-log.txt
-pip-delete-this-directory.txt
-
-# Unit test / coverage reports
-htmlcov
-.tox
-.coverage
-.coverage.*
-.cache
-nosetests.xml
-coverage.xml
-*,cover
-.hypothesis
-
-# Translations
-*.mo
-*.pot
-
-# Django stuff:
-*.log
-
-# Sphinx documentation
-docs/_build
-
-# PyBuilder
-target
-
-#Ipython Notebook
-.ipynb_checkpoints
-
-# SASS cache
-.sass-cache
-media_test
-
-# Rope project settings
-.ropeproject
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
 node_modules
-jspm_packages
-
-# Typescript v1 declaration files
-typings
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env*
-
-# Sensitive Deploy Files
-deploy/eb/
-data/
-
-# tox
-./.tox
-
-backend/
-!backend/schema.graphql
-geographical_data/
+dist
+.git
+.vscode

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

@@ -0,0 +1,25 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - feature/web-app-serve # TODO: Delete 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/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

@@ -1,6 +1,6 @@
 # -------------------------- Dev ---------------------------------------
 
-FROM node:18-bullseye AS dev
+FROM node:20-bookworm AS dev
 
 RUN apt-get update -y \
     && apt-get install -y --no-install-recommends \
@@ -15,7 +15,6 @@ WORKDIR /code
 
 RUN git config --global --add safe.directory /code
 
-
 # -------------------------- Builder ---------------------------------------
 FROM dev AS builder
 
@@ -27,32 +26,26 @@ RUN pnpm install
 
 COPY . /code/
 
-# -------------------------- Nginx - Builder --------------------------------
-FROM builder AS nginx-build
+FROM builder AS web-app-serve-build
 
 # Dynamic configs. Can be changed with containers. (Placeholder values)
-ENV APP_TITLE=APP_TITLE_PLACEHOLDER
-ENV APP_ENVIRONMENT=APP_ENVIRONMENT_PLACEHOLDER
-ENV APP_MAPBOX_ACCESS_TOKEN=APP_MAPBOX_ACCESS_TOKEN_PLACEHOLDER
-ENV APP_GOOGLE_ANALYTICS_ID=APP_GOOGLE_ANALYTICS_ID_PLACEHOLDER
-ENV APP_GRAPHQL_API_ENDPOINT=https://APP-GRAPHQL-API-ENDPOINT-PLACEHOLDER.COM/
-ENV APP_HCAPTCHA_SITEKEY=APP_HCAPTCHA_SITEKEY_PLACEHOLDER
+ENV APP_TITLE=Alerthub
+ENV APP_ENVIRONMENT=production
+ENV APP_MAPBOX_ACCESS_TOKEN=pk.ey
+ENV APP_GOOGLE_ANALYTICS_ID=G-PZ
+ENV APP_GRAPHQL_API_ENDPOINT=https://my-best-dashboard.com/graphql/
+ENV APP_HCAPTCHA_SITEKEY=100--ff
 
 # Build variables (Requires backend pulled)
 ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql
 
-RUN pnpm generate && pnpm build
+RUN pnpm generate && WEB_APP_SERVE_ENABLED=true
 
-# ---------------------------------------------------------------------------
-FROM nginx:1 AS nginx-serve
+FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
 
 LABEL maintainer="IFRC"
-LABEL org.opencontainers.image.source="github.com/IFRCGo/alert-hub-web-app"
-
-COPY ./nginx-serve/apply-config.sh /docker-entrypoint.d/
-COPY ./nginx-serve/nginx.conf.template /etc/nginx/templates/default.conf.template
-COPY --from=nginx-build /code/build /code/build
+LABEL org.opencontainers.image.source="https://github.com/IFRCGo/alert-hub-web-app"
 
 ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
-ENV APPLY_CONFIG__DESTINATION_DIRECTORY=/usr/share/nginx/html/
-ENV APPLY_CONFIG__OVERWRITE_DESTINATION=true
+
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

docker-compose-with-backend.yml

@@ -1,4 +1,6 @@
 # NOTE: `../` refers to the web-app folder, relative to `./backend/docker-compose.yml` (the main Docker Compose file).
+name: alerthub
+
 services:
   react:
     build:

env.ts

@@ -1,33 +1,48 @@
-import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
+import {
+    defineConfig,
+    overrideDefineForWebAppServe,
+    Schema,
+} from '@julr/vite-plugin-validate-env';
 
-export default defineConfig({
-    // Used in vite
-    APP_GOOGLE_ANALYTICS_ID: Schema.string.optional(),
+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;
 
-    // Used in application
-    APP_TITLE: Schema.string.optional(), // NOTE: not used right now
-    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_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
-    APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
+export default defineConfig({
+      overrideDefine,
+          validator: 'builtin',
+          schema: {
+            APP_GOOGLE_ANALYTICS_ID: Schema.string.optional(),
+            APP_TITLE: Schema.string.optional(), // NOTE: not used right now
+            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_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+            APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
 
-    APP_HCAPTCHA_SITEKEY: Schema.string.optional(),
+            APP_HCAPTCHA_SITEKEY: Schema.string.optional(),
 
-    // Used in codegen
-    APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string(), // NOTE: this is both url and file path
+            // Used in codegen
+            APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string(), // NOTE: this is both url and file path
 
-    // Used in application, automatically injected by vite
-    APP_COMMIT_HASH: Schema.string.optional(),
-    APP_VERSION: Schema.string.optional(),
-})
+            // Used in application, automatically injected by vite
+            APP_COMMIT_HASH: Schema.string.optional(),
+            APP_VERSION: Schema.string.optional(),
+        },
+    });