From e43afe21fe34120a7a50787df9e1adff966027bc Mon Sep 17 00:00:00 2001
From: nabarun <nabarun@deepstacksoft.com>
Date: Tue, 11 Apr 2023 15:38:29 +0530
Subject: [PATCH] Build MobyMask web-app at container build step

---
 .../compose/docker-compose-mobymask-app.yml   |  5 +++--
 .../watcher-mobymask-v2/config-template.yml   |  9 ++++++++
 .../watcher-mobymask-v2/mobymask-app-start.sh | 19 +++++++++--------
 .../apply-webapp-config.sh                    |  5 +++--
 .../cerc-laconic-console-host/Dockerfile      |  2 +-
 .../start-serving-app.sh                      |  2 +-
 .../cerc-mobymask-ui/Dockerfile               | 21 ++++++++++++++++---
 .../container-build/cerc-mobymask-ui/build.sh |  3 ++-
 .../cerc-mobymask-ui/mobymask-config.json     |  9 ++++++++
 .../cerc-mobymask-ui/start-serving-app.sh     |  8 +++++++
 .../fixturenet-laconic-loaded/README.md       |  2 +-
 app/data/stacks/mobymask-v2/web-apps.md       |  2 +-
 12 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 app/data/config/watcher-mobymask-v2/config-template.yml
 rename app/data/container-build/{cerc-laconic-console-host => }/apply-webapp-config.sh (94%)
 create mode 100644 app/data/container-build/cerc-mobymask-ui/mobymask-config.json
 create mode 100755 app/data/container-build/cerc-mobymask-ui/start-serving-app.sh

diff --git a/app/data/compose/docker-compose-mobymask-app.yml b/app/data/compose/docker-compose-mobymask-app.yml
index df14d7db..3fc4edb4 100644
--- a/app/data/compose/docker-compose-mobymask-app.yml
+++ b/app/data/compose/docker-compose-mobymask-app.yml
@@ -3,6 +3,7 @@ version: '3.2'
 services:
   # Builds and serves the MobyMask react-app
   mobymask-app:
+    restart: unless-stopped
     image: cerc/mobymask-ui:local
     env_file:
       - ../config/watcher-mobymask-v2/mobymask-params.env
@@ -20,12 +21,12 @@ services:
       - ./wait-for-it.sh -h ${CERC_WATCHER_HOST:-$${DEFAULT_CERC_WATCHER_HOST}} -p ${CERC_WATCHER_PORT:-$${DEFAULT_CERC_WATCHER_PORT}} -s -t 0 -- ./mobymask-app-start.sh
     volumes:
       - ../config/wait-for-it.sh:/app/wait-for-it.sh
-      - ../config/watcher-mobymask-v2/mobymask-app-config.json:/app/src/mobymask-app-config.json
+      - ../config/watcher-mobymask-v2/config.yml:/config/config.yml
       - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/app/mobymask-app-start.sh
       - peers_ids:/peers
       - mobymask_deployment:/server
     ports:
-      - "0.0.0.0:3002:3000"
+      - "0.0.0.0:3002:80"
     healthcheck:
       test: ["CMD", "nc", "-v", "localhost", "3000"]
       interval: 20s
diff --git a/app/data/config/watcher-mobymask-v2/config-template.yml b/app/data/config/watcher-mobymask-v2/config-template.yml
new file mode 100644
index 00000000..5a806be5
--- /dev/null
+++ b/app/data/config/watcher-mobymask-v2/config-template.yml
@@ -0,0 +1,9 @@
+# Config for mobymask-app running with mobymask-v2-watcher
+
+address:
+
+chainId:
+
+relayNodes:
+
+watcherUrl:
diff --git a/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh b/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh
index c494ed5c..6ca2f36a 100755
--- a/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh
+++ b/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh
@@ -28,13 +28,14 @@ else
   echo "Taking deployed contract details from env"
 fi
 
-# Export config values in a json file
-jq --arg address "$CERC_DEPLOYED_CONTRACT" \
-  --argjson chainId "$CERC_CHAIN_ID" \
-  --argjson relayNodes "$CERC_RELAY_NODES" \
-  '.address = $address | .chainId = $chainId | .relayNodes = $relayNodes' \
-  /app/src/mobymask-app-config.json > /app/src/config.json
+# Use yq to replace the values in the YAML file with environment variables
+yq e \
+    --arg deployed_contract "$CERC_DEPLOYED_CONTRACT" \
+    --arg watcher_url "$CERC_APP_WATCHER_URL" \
+    --arg chain_id "$CERC_CHAIN_ID" \
+    --argjson relay_nodes "$CERC_RELAY_NODES" \
+    '.address = $deployed_contract | .chainId = $chain_id | .relayNodes = $relay_nodes | .watcherUrl = $watcher_url' \
+    /config/config-template.yml \
+    | envsubst > /config/config.yml
 
-REACT_APP_WATCHER_URI="$CERC_APP_WATCHER_URL/graphql" npm run build
-
-serve -s build
+sh /scripts/mobymask-app-start.sh
diff --git a/app/data/container-build/cerc-laconic-console-host/apply-webapp-config.sh b/app/data/container-build/apply-webapp-config.sh
similarity index 94%
rename from app/data/container-build/cerc-laconic-console-host/apply-webapp-config.sh
rename to app/data/container-build/apply-webapp-config.sh
index bf041708..1bd25c48 100755
--- a/app/data/container-build/cerc-laconic-console-host/apply-webapp-config.sh
+++ b/app/data/container-build/apply-webapp-config.sh
@@ -8,6 +8,7 @@ if [[ $# -ne 2 ]]; then
 fi
 config_file_name=$1
 webapp_files_dir=$2
+config_prefix=$3
 if ! [[ -f ${config_file_name} ]]; then
     echo "Config file ${config_file_name} does not exist" >&2
     exit 1
@@ -17,8 +18,8 @@ if ! [[ -d ${webapp_files_dir} ]]; then
     exit 1
 fi
 # First some magic using yq to translate our yaml config file into an array of key value pairs like:
-# LACONIC_HOSTED_CONFIG_<path-through-objects>=<value>
-readarray -t config_kv_pair_array < <( yq '.. | select(length > 2) | ([path | join("_"), .] | join("=") )' ${config_file_name} | sed 's/^/LACONIC_HOSTED_CONFIG_/' )
+# ${config_prefix}<path-through-objects>=<value>
+readarray -t config_kv_pair_array < <( yq '.. | select(length > 2) | ([path | join("_"), .] | join("=") )' ${config_file_name} | sed "s/^/${config_prefix}_/" )
 declare -p config_kv_pair_array
 # Then iterate over that kv array making the template substitution in our web app files
 for kv_pair_string in "${config_kv_pair_array[@]}"
diff --git a/app/data/container-build/cerc-laconic-console-host/Dockerfile b/app/data/container-build/cerc-laconic-console-host/Dockerfile
index a31aa265..cddde3b4 100644
--- a/app/data/container-build/cerc-laconic-console-host/Dockerfile
+++ b/app/data/container-build/cerc-laconic-console-host/Dockerfile
@@ -42,7 +42,7 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
 COPY --from=docker.io/mikefarah/yq:latest /usr/bin/yq /usr/local/bin/yq
 
 RUN mkdir -p /scripts
-COPY ./apply-webapp-config.sh /scripts
+COPY ../apply-webapp-config.sh /scripts
 COPY ./start-serving-app.sh /scripts
 
 # [Optional] Uncomment if you want to install more global node modules
diff --git a/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh b/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh
index a322e5fb..6897c88a 100755
--- a/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh
+++ b/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh
@@ -4,5 +4,5 @@ if [ -n "$CERC_SCRIPT_DEBUG" ]; then
 fi
 # TODO: Don't hard wire this:
 webapp_files_dir=/usr/local/share/.config/yarn/global/node_modules/@cerc-io/console-app/dist/production
-/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir}
+/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} LACONIC_HOSTED_CONFIG
 http-server -p 80 ${webapp_files_dir}
diff --git a/app/data/container-build/cerc-mobymask-ui/Dockerfile b/app/data/container-build/cerc-mobymask-ui/Dockerfile
index c04b001d..8271c343 100644
--- a/app/data/container-build/cerc-mobymask-ui/Dockerfile
+++ b/app/data/container-build/cerc-mobymask-ui/Dockerfile
@@ -1,14 +1,29 @@
 FROM node:18.15.0-alpine3.16
 
+ARG REPO_DIR
+
 RUN apk --update --no-cache add make git jq bash
 
+RUN mkdir -p /scripts
+COPY ../apply-webapp-config.sh /scripts
+COPY ./start-serving-app.sh /scripts
+
+# Install simple web server for now (use nginx perhaps later)
+RUN yarn global add http-server
+
 WORKDIR /app
 
-COPY . .
+COPY ${REPO_DIR} .
 
-RUN npm install -g serve
+COPY ./mobymask-config.json /src/config.json
 
 RUN echo "Building mobymask-ui" && \
-    npm install
+    npm install && \
+    REACT_APP_WATCHER_URI="MOBYMASK_HOSTED_CONFIG_watcherUrl/graphql" npm run build
 
 WORKDIR /app
+
+# Expose port for http
+EXPOSE 80
+
+CMD ["/scripts/start-serving-app.sh"]
diff --git a/app/data/container-build/cerc-mobymask-ui/build.sh b/app/data/container-build/cerc-mobymask-ui/build.sh
index 52687093..9939fed2 100755
--- a/app/data/container-build/cerc-mobymask-ui/build.sh
+++ b/app/data/container-build/cerc-mobymask-ui/build.sh
@@ -6,4 +6,5 @@ source ${CERC_CONTAINER_BASE_DIR}/build-base.sh
 # See: https://stackoverflow.com/a/246128/1701505
 SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 
-docker build -t cerc/mobymask-ui:local -f ${SCRIPT_DIR}/Dockerfile ${build_command_args} ${CERC_REPO_BASE_DIR}/mobymask-ui
+docker build -t cerc/mobymask-ui:local -f ${SCRIPT_DIR}/Dockerfile \
+  --build-arg REPO_DIR=${CERC_REPO_BASE_DIR}/mobymask-ui ${SCRIPT_DIR}
diff --git a/app/data/container-build/cerc-mobymask-ui/mobymask-config.json b/app/data/container-build/cerc-mobymask-ui/mobymask-config.json
new file mode 100644
index 00000000..f1d53acc
--- /dev/null
+++ b/app/data/container-build/cerc-mobymask-ui/mobymask-config.json
@@ -0,0 +1,9 @@
+{
+  "name": "MobyMask",
+  "address": "MOBYMASK_HOSTED_CONFIG_address",
+  "chainId": "MOBYMASK_HOSTED_CONFIG_chainId",
+  "relayNodes": "MOBYMASK_HOSTED_CONFIG_relayNodes",
+  "peer": {
+    "enableDebugInfo": true
+  }
+}
diff --git a/app/data/container-build/cerc-mobymask-ui/start-serving-app.sh b/app/data/container-build/cerc-mobymask-ui/start-serving-app.sh
new file mode 100755
index 00000000..e1b460e9
--- /dev/null
+++ b/app/data/container-build/cerc-mobymask-ui/start-serving-app.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+if [ -n "$CERC_SCRIPT_DEBUG" ]; then
+    set -x
+fi
+# TODO: Don't hard wire this:
+webapp_files_dir=/app/build
+/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} MOBYMASK_HOSTED_CONFIG
+http-server -p 80 ${webapp_files_dir}
diff --git a/app/data/stacks/fixturenet-laconic-loaded/README.md b/app/data/stacks/fixturenet-laconic-loaded/README.md
index 2fc21594..b94189c2 100644
--- a/app/data/stacks/fixturenet-laconic-loaded/README.md
+++ b/app/data/stacks/fixturenet-laconic-loaded/README.md
@@ -14,7 +14,7 @@ $ chmod +x ./laconic-so
 $ export PATH=$PATH:$(pwd)  # Or move laconic-so to ~/bin or your favorite on-path directory
 ```
 ## 2. Prepare the local build environment
-Note that this step needs only to be done once on a new machine. 
+Note that this step needs only to be done once on a new machine.
 Detailed instructions can be found [here](../build-support/README.md). For the impatient run these commands:
 ```
 $ laconic-so --stack build-support build-containers --exclude cerc/builder-gerbil
diff --git a/app/data/stacks/mobymask-v2/web-apps.md b/app/data/stacks/mobymask-v2/web-apps.md
index 09d6834d..382b8af5 100644
--- a/app/data/stacks/mobymask-v2/web-apps.md
+++ b/app/data/stacks/mobymask-v2/web-apps.md
@@ -29,7 +29,7 @@ git checkout laconic
 Build the container images:
 
 ```bash
-laconic-so --stack mobymask-v2 build-containers --include cerc/react-peer-v2,cerc/mobymask-ui
+laconic-so --stack mobymask-v2 build-containers --include cerc/react-peer,cerc/mobymask-ui
 ```
 
 This should create the required docker images in the local image registry