feature(alpha-deployment): Docker setup and alpha deployment

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.git
+.vscode

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

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

.gitignore

@@ -4,7 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
+yarn-debug.log*
 lerna-debug.log*
 
 node_modules

Dockerfile

@@ -0,0 +1,86 @@
+# -------------------------- Dev ---------------------------------------
+
+FROM node:22-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 yarn
+    && npm install -g yarn@8.6.0 yarn@1.22.19 --force \
+    && git config --global --add safe.directory /code
+
+WORKDIR /code
+
+# Build stage for web app
+FROM dev AS web-app-serve-build
+
+COPY ./package.json /code/
+
+RUN yarn install
+
+COPY . /code/
+
+# 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
+# NOTE: Static env variables:
+# These env variables are use during build
+ENV VITE_FIREBASE_API_KEY=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_API_KEY
+ENV VITE_FIREBASE_AUTH_DOMAIN=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_AUTH_DOMAIN
+ENV VITE_FIREBASE_DATABASE_URL=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_DATABASE_URL
+ENV VITE_FIREBASE_PROJECT_ID=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_PROJECT_ID
+ENV VITE_FIREBASE_STORAGE_BUCKET=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_STORAGE_BUCKET
+ENV VITE_FIREBASE_MESSAGING_SENDER_ID=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_MESSAGING_SENDER_ID
+ENV VITE_FIREBASE_APP_ID=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_APP_ID
+ENV VITE_FIREBASE_MEASUREMENT_ID=WEB_APP_SERVE_PLACEHOLDER_VITE_FIREBASE_MEASUREMENT_ID
+
+ENV VITE_COMMUNITY_DASHBOARD_URL=WEB_APP_SERVE_PLACEHOLDER_VITE_COMMUNITY_DASHBOARD_URL
+ENV VITE_BASE_URL=WEB_APP_SERVE_PLACEHOLDER_VITE_BASE_URL
+ENV VITE_PRIVACY_POLICY_URL=WEB_APP_SERVE_PLACEHOLDER_VITE_PRIVACY_POLICY_URL
+ENV VITE_IMPRINT_URL=WEB_APP_SERVE_PLACEHOLDER_VITE_IMPRINT_URL
+ENV VITE_APP_LOGO=WEB_APP_SERVE_PLACEHOLDER_VITE_APP_LOGO
+ENV VITE_PROJECTS_FALLBACK_IMAGE=WEB_APP_SERVE_PLACEHOLDER_VITE_PROJECTS_FALLBACK_IMAGE
+ENV VITE_ALLOW_UNVERIFIED_USERS=WEB_APP_SERVE_PLACEHOLDER_VITE_ALLOW_UNVERIFIED_USERS
+
+# Locales
+ENV VITE_DEFAULT_LOCALE=WEB_APP_SERVE_PLACEHOLDER_VITE_DEFAULT_LOCALE
+ENV VITE_FALLBACK_LOCALE=WEB_APP_SERVE_PLACEHOLDER_VITE_FALLBACK_LOCALE
+ENV VITE_SUPPORTED_LOCALES=WEB_APP_SERVE_PLACEHOLDER_VITE_SUPPORTED_LOCALES
+
+# Theme
+ENV VITE_THEME_LIGHT_PRIMARY=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_PRIMARY
+ENV VITE_THEME_LIGHT_SECONDARY=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_SECONDARY
+ENV VITE_THEME_LIGHT_TERTIARY=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_TERTIARY
+ENV VITE_THEME_LIGHT_ACCENT=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_ACCENT
+ENV VITE_THEME_LIGHT_ERROR=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_ERROR
+ENV VITE_THEME_LIGHT_WARNING=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_WARNING
+ENV VITE_THEME_LIGHT_INFO=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_INFO
+ENV VITE_THEME_LIGHT_SUCCESS=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_SUCCESS
+ENV VITE_THEME_LIGHT_NEUTRAL=WEB_APP_SERVE_PLACEHOLDER_VITE_THEME_LIGHT_NEUTRAL
+
+# App Attribution
+ENV VITE_APP_NAME=WEB_APP_SERVE_PLACEHOLDER_VITE_APP_NAME
+ENV VITE_APP_WEBSITE_URL=WEB_APP_SERVE_PLACEHOLDER_VITE_APP_WEBSITE_URL
+ENV VITE_APP_ATTRIBUTION_TITLE=WEB_APP_SERVE_PLACEHOLDER_VITE_APP_ATTRIBUTION_TITLE
+ENV VITE_APP_ATTRIBUTION_URL=WEB_APP_SERVE_PLACEHOLDER_VITE_APP_ATTRIBUTION_URL
+
+ENV APPLY_CONFIG__ENABLE_DEBUG=false
+ENV APPLY_CONFIG__DEBUG_USE_BIOME=true
+
+ENV APPLY_CONFIG__DESTINATION_DIRECTORY=/usr/share/nginx/html/
+ENV APPLY_CONFIG__APPLY_CONFIG_PATH=/web-app-serve/default-app-apply-config.sh
+
+RUN WEB_APP_SERVE_ENABLED=true yarn build-only --outDir=/code/build
+
+COPY ./src/ /web-app-serve/
+
+FROM web-app-serve AS web-app-serve-example
+
+LABEL maintainer="Togglecorp"
+LABEL org.opencontainers.image.source="github.com/mapswipe/mapswipe-web"
+
+FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
+
+# Env for apply-config script
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
+
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

docker.compose.yml

@@ -0,0 +1,48 @@
+# NOTE: Please read ./README.md before using this
+
+services:
+  react:
+    depends_on:
+      - web
+    build:
+      context: ../
+      target: dev
+    command: sh -c 'yarn install && yarn dev'
+    environment:
+      VITE_FIREBASE_API_KEY: '${VITE_FIREBASE_API_KEY:-AIzaSyBuvneRh621iQkac31JNKWOYElhpRA_XYM}'
+      VITE_FIREBASE_AUTH_DOMAIN: '${VITE_FIREBASE_AUTH_DOMAIN:-tc-mapswipe-alpha-2.firebaseapp.com}'
+      VITE_FIREBASE_DATABASE_URL: '${VITE_FIREBASE_DATABASE_URL:-https://tc-mapswipe-alpha-2-default-rtdb.asia-southeast1.firebasedatabase.app}'
+      VITE_FIREBASE_PROJECT_ID: '${VITE_FIREBASE_PROJECT_ID:-tc-mapswipe-alpha-2}'
+      VITE_FIREBASE_STORAGE_BUCKET: '${VITE_FIREBASE_STORAGE_BUCKET:-tc-mapswipe-alpha-2.firebasestorage.app}'
+      VITE_FIREBASE_MESSAGING_SENDER_ID: '${VITE_FIREBASE_MESSAGING_SENDER_ID:-1054350869566}'
+      VITE_FIREBASE_MEASUREMENT_ID: '${VITE_FIREBASE_MEASUREMENT_ID:-123}'
+      VITE_COMMUNITY_DASHBOARD_URL: '${VITE_COMMUNITY_DASHBOARD_URL:-https://community.mapswipe.org}'
+      VITE_BASE_URL: '${VITE_BASE_URL:-https://mapswipe.org/privacy/}'
+      VITE_PRIVACY_POLICY_URL: '${VITE_PRIVACY_POLICY_URL:-https://mapswipe.org/privacy/}'
+      VITE_IMPRINT_URL: '${VITE_IMPRINT_URL:-https://mapswipe.org/privacy/}'
+      VITE_APP_LOGO: '${VITE_APP_LOGO:-./img/mapswipe-white.svg}'
+      VITE_PROJECTS_FALLBACK_IMAGE: '${VITE_PROJECTS_FALLBACK_IMAGE:-./img/map-pin-600x400.jpg}'
+      VITE_ALLOW_UNVERIFIED_USERS: '${VITE_ALLOW_UNVERIFIED_USERS:-true}'
+      VITE_DEFAULT_LOCALE: '${VITE_DEFAULT_LOCALE:-en}'
+      VITE_FALLBACK_LOCALE: '${VITE_FALLBACK_LOCALE:-en}'
+      VITE_SUPPORTED_LOCALES: '${VITE_SUPPORTED_LOCALES:-en,de,fr}'
+      VITE_THEME_LIGHT_PRIMARY: '${VITE_THEME_LIGHT_PRIMARY:-#060E2F}'
+      VITE_THEME_LIGHT_SECONDARY: '${VITE_THEME_LIGHT_SECONDARY:-#0D1949}'
+
+      VITE_THEME_LIGHT_TERTIARY=: '${VITE_THEME_LIGHT_TERTIARY:-#EEF2FB}'
+      VITE_THEME_LIGHT_ACCENT: '${VITE_THEME_LIGHT_ACCENT:-#589AE3}'
+      VITE_THEME_LIGHT_ERROR: '${VITE_THEME_LIGHT_ERROR:-#C62828}'
+      VITE_THEME_LIGHT_WARNING: '${VITE_THEME_LIGHT_WARNING:-8E0000}'
+      VITE_THEME_LIGHT_INFO: '${VITE_THEME_LIGHT_INFO:-#2196f3}'
+      VITE_THEME_LIGHT_SUCCESS: '${VITE_THEME_LIGHT_SUCCESS:-#4caf50}'
+      VITE_THEME_LIGHT_NEUTRAL: '${VITE_THEME_LIGHT_NEUTRAL:-#272727}'
+
+      VITE_APP_NAME: '${VITE_APP_NAME:-MapSwipe}'
+      VITE_APP_WEBSITE_URL: '${VITE_APP_WEBSITE_URL:-https://mapswipe.org}'
+      VITE_APP_ATTRIBUTION_TITLE: '${VITE_APP_ATTRIBUTION_TITLE:-MapSwipe}'
+      VITE_APP_ATTRIBUTION_URL: '${VITE_APP_ATTRIBUTION_URL:-https://mapswipe.org/privacy/}'
+
+    volumes:
+      - ../:/code
+    ports:
+      - 127.0.0.1:3000:3000

env.d.ts

@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+type ImportMetaEnvAugmented = import('@julr/vite-plugin-validate-env').ImportMetaEnvAugmented<
+  typeof import('../../env').default
+>

env.ts

@@ -0,0 +1,62 @@
+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({
+    overrideDefine,
+    validator: 'builtin',
+    schema: {
+        // NOTE: These are the dynamic env variables
+        VITE_FIREBASE_API_KEY: Schema.string.optional(),
+        VITE_FIREBASE_AUTH_DOMAIN: Schema.string.optional(),
+        VITE_FIREBASE_DATABASE_URL: Schema.string.optional(),
+        VITE_FIREBASE_PROJECT_ID: Schema.string.optional(),
+        VITE_FIREBASE_STORAGE_BUCKET: Schema.string.optional(),
+        VITE_FIREBASE_MESSAGING_SENDER_ID: Schema.string.optional(),
+        VITE_FIREBASE_APP_ID: Schema.string.optional(),
+        VITE_FIREBASE_MEASUREMENT_ID: Schema.string.optional(),
+
+        VITE_BASE_URL: Schema.string.optional(),
+        VITE_PRIVACY_POLICY_URL: Schema.string.optional(),
+        VITE_IMPRINT_URL: Schema.string.optional(),
+        VITE_APP_LOGO: Schema.string.optional(),
+        VITE_PROJECTS_FALLBACK_IMAGE: Schema.string.optional(),
+        VITE_ALLOW_UNVERIFIED_USERS: Schema.string.optional(),
+
+        VITE_DEFAULT_LOCALE: Schema.string.optional(),
+        VITE_FALLBACK_LOCALE: Schema.string.optional(),
+        VITE_SUPPORTED_LOCALES: Schema.string.optional(),
+
+        VITE_THEME_LIGHT_PRIMARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_SECONDARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_TERTIARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_ACCENT: Schema.string.optional(),
+        VITE_THEME_LIGHT_ERROR: Schema.string.optional(),
+        VITE_THEME_LIGHT_WARNING: Schema.string.optional(),
+        VITE_THEME_LIGHT_INFO: Schema.string.optional(),
+        VITE_THEME_LIGHT_SUCCESS: Schema.string.optional(),
+        VITE_THEME_LIGHT_NEUTRAL: Schema.string.optional(),
+
+        VITE_APP_NAME: Schema.string(),
+        VITE_APP_WEBSITE_URL: Schema.string.optional(),
+        VITE_APP_ATTRIBUTION_TITLE: Schema.string.optional(),
+        VITE_APP_ATTRIBUTION_URL: Schema.string.optional(),
+
+        VITE_COMMUNITY_DASHBOARD_URL: Schema.string.optional(),
+
+        VITE_MAPILLARY_API_KEY: Schema.string.optional(),
+
+        VITE_OSM_OAUTH_REDIRECT_URI: Schema.string.optional(),
+    },
+});

package.json

@@ -19,6 +19,7 @@
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@togglecorp/fujs": "^2.2.0",
     "@turf/bbox": "^7.2.0",
+    "@julr/vite-plugin-validate-env": "github:toggle-corp/vite-plugin-validate-env#v2.2.0-tc.1",
     "base-64": "^1.0.0",
     "firebase": "^11.8.1",
     "mapillary-js": "^4.1.2",

web-app-serve/.gitignore

@@ -0,0 +1,15 @@
+.env
+.vite/
+
+# Tooling
+node_modules/
+.eslintcache
+tsconfig.tsbuildinfo
+
+# Custom
+build/
+generated/
+coverage/
+stats.html
+.env
+.env

web-app-serve/Dockerfile

@@ -0,0 +1,56 @@
+FROM nginx:1 AS web-app-serve
+
+LABEL org.opencontainers.image.authors="dev@togglecorp.com" \
+      org.opencontainers.image.source="https://github.com/toggle-corp/web-app-serve" \
+      org.opencontainers.image.title="web-app-serve"
+
+ARG BIOME_VERSION=2.0.6
+ARG RIPGREP_VERSION=14.1.1
+ARG JQ_VERSION=1.8.1
+
+RUN mkdir /build && \
+    # Installing ripgrep
+    curl -L \
+        -o /build/ripgrep.tar.gz \
+        "https://github.com/BurntSushi/ripgrep/releases/download/${RIPGREP_VERSION}/ripgrep-${RIPGREP_VERSION}-x86_64-unknown-linux-musl.tar.gz" && \
+    mkdir "/build/ripgrep" && \
+    tar xf "/build/ripgrep.tar.gz" --directory="/build/ripgrep" && \
+    mv "$(find /build/ripgrep -type f -name rg)" "/usr/local/bin/rg" && \
+    chmod +x "/usr/local/bin/rg" && \
+    rg --version && \
+    # Installing jq
+    curl -L \
+        -o /usr/local/bin/jq \
+        "https://github.com/jqlang/jq/releases/download/jq-${JQ_VERSION}/jq-linux-amd64" && \
+    chmod +x "/usr/local/bin/jq" && \
+    jq --version && \
+    # Installing biome
+    curl -L \
+         -o "/usr/local/bin/biome" \
+        "https://github.com/biomejs/biome/releases/download/@biomejs/biome@${BIOME_VERSION}/biome-linux-x64" && \
+    chmod +x "/usr/local/bin/biome" && \
+    biome --version && \
+    # Cleanup
+    rm -rf /build
+
+# NOTE: Used by apply-config.sh
+ENV APPLY_CONFIG__ENABLE_DEBUG=false
+ENV APPLY_CONFIG__DEBUG_USE_BIOME=true
+
+ENV APPLY_CONFIG__DESTINATION_DIRECTORY=/usr/share/nginx/html/
+ENV APPLY_CONFIG__APPLY_CONFIG_PATH=/web-app-serve/default-app-apply-config.sh
+
+COPY ./src/ /web-app-serve/
+RUN ln -sf /web-app-serve/apply-config.sh /docker-entrypoint.d/apply-config.sh && \
+    mkdir /etc/nginx/templates && \
+    ln -sf /web-app-serve/nginx.conf.template /etc/nginx/templates/default.conf.template
+
+FROM web-app-serve AS web-app-serve-example
+
+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 ./example/source "$APPLY_CONFIG__SOURCE_DIRECTORY"

web-app-serve/default-app-apply-config.sh

@@ -0,0 +1,8 @@
+#!/bin/env bash
+
+set -xe
+
+while IFS='=' read -r KEY VALUE; do
+    # FIXME: If js and value is empty string, replace it with undefined?
+    find "$DESTINATION_DIRECTORY" -type f -exec sed -i "s|\<WEB_APP_SERVE_PLACEHOLDER__$KEY\>|$VALUE|g" {} +
+done < <(env | grep '^VITE_')

web-app-serve/docker-compose.yml

@@ -0,0 +1,14 @@
+name: mapswipe-web-app
+
+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'