Package mobymask-v2 stack web-apps similar to laconic-console app (#310)

* Build MobyMask web-app at container build step * Fix web-app start script to use env variables in config * Replace variables in built web-app files * Use published mobymask-ui package from gitea * Use published react-peer/test-app from gitea * Remove local gitea publish TODO
2023-04-18 18:25:58 +05:30
parent 172300d7bd
commit cf79f0de0a
16 changed files with 210 additions and 57 deletions
@@ -1,14 +1,57 @@
-FROM node:18.15.0-alpine3.16
+# Originally from: https://github.com/devcontainers/images/blob/main/src/javascript-node/.devcontainer/Dockerfile
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=16-bullseye
+FROM node:${VARIANT}

-RUN apk --update --no-cache add make git jq bash
+ARG USERNAME=node
+ARG NPM_GLOBAL=/usr/local/share/npm-global

-WORKDIR /app
+# This container pulls npm package from a registry configured via env var
+ARG CERC_NPM_REGISTRY_URL

-COPY . .
+# Add NPM global to PATH.
+ENV PATH=${NPM_GLOBAL}/bin:${PATH}
+# Prevents npm from printing version warnings
+ENV NPM_CONFIG_UPDATE_NOTIFIER=false

-RUN npm install -g serve
+RUN \
+  # Configure global npm install location, use group to adapt to UID/GID changes
+  if ! cat /etc/group | grep -e "^npm:" > /dev/null 2>&1; then groupadd -r npm; fi \
+  && usermod -a -G npm ${USERNAME} \
+  && umask 0002 \
+  && mkdir -p ${NPM_GLOBAL} \
+  && touch /usr/local/etc/npmrc \
+  && chown ${USERNAME}:npm ${NPM_GLOBAL} /usr/local/etc/npmrc \
+  && chmod g+s ${NPM_GLOBAL} \
+  && npm config -g set prefix ${NPM_GLOBAL} \
+  && su ${USERNAME} -c "npm config -g set prefix ${NPM_GLOBAL}" \
+  # Install eslint
+  && su ${USERNAME} -c "umask 0002 && npm install -g eslint" \
+  && npm cache clean --force > /dev/null 2>&1

-RUN echo "Building mobymask-ui" && \
-    npm install
+# Install additional OS packages.
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends jq bash

-WORKDIR /app
+# We do this to get a yq binary from the published container, for the correct architecture we're building here
+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 ./start-serving-app.sh /scripts
+
+# Configure the local npm registry
+RUN npm config set @cerc-io:registry ${CERC_NPM_REGISTRY_URL}
+
+RUN mkdir -p /config
+
+# Install simple web server for now (use nginx perhaps later)
+RUN yarn global add http-server
+
+# Globally install the payload web app package
+RUN yarn global add @cerc-io/mobymask-ui
+
+# Expose port for http
+EXPOSE 80
+
+CMD ["/scripts/start-serving-app.sh"]
@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+if [ -n "$CERC_SCRIPT_DEBUG" ]; then
+    set -x
+fi
+if [[ $# -ne 3 ]]; then
+    echo "Illegal number of parameters" >&2
+    exit 1
+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
+fi
+if ! [[ -d ${webapp_files_dir} ]]; then
+    echo "Webapp directory ${webapp_files_dir} does not exist" >&2
+    exit 1
+fi
+# First some magic using sed to translate our yaml config file into an array of key value pairs like:
+# ${config_prefix}<path-through-objects>=<value>
+# sed "s/'//g" is used to remove single quote for relayNodes value
+readarray -t config_kv_pair_array < <( sed -E 's/([^:]+):\s*(.*)/\1=\2/g' ${config_file_name} | sed "s/'//g" |  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[@]}"
+do
+    kv_pair=(${kv_pair_string//=/ })
+    template_string_to_replace=${kv_pair[0]}
+    template_value_to_substitute=${kv_pair[1]}
+    # Run find and sed to do the substitution of one variable over all files
+    # See: https://stackoverflow.com/a/21479607/1701505
+    echo "Substituting: ${template_string_to_replace} = ${template_value_to_substitute}"
+
+    # TODO: Pass keys to be replaced without double quotes
+    if [[ "$template_string_to_replace" =~ ^${config_prefix}_(relayNodes|chainId)$ ]]; then
+        find ${webapp_files_dir} -type f -exec sed -i 's#"'"${template_string_to_replace}"'"#'"${template_value_to_substitute}"'#g' {} +
+    else
+        # Note: we do not escape our strings, on the expectation they do not container the '#' char.
+        find ${webapp_files_dir} -type f -exec sed -i 's#'${template_string_to_replace}'#'${template_value_to_substitute}'#g' {} +
+    fi
+done
@@ -6,4 +6,7 @@ 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
+CERC_NPM_REGISTRY_URL="https://git.vdb.to/api/packages/cerc-io/npm/"
+
+docker build -t cerc/mobymask-ui:local  ${build_command_args} -f ${SCRIPT_DIR}/Dockerfile \
+  --build-arg CERC_NPM_REGISTRY_URL ${SCRIPT_DIR}
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+if [ -n "$CERC_SCRIPT_DEBUG" ]; then
+    set -x
+fi
+
+# TODO: Don't hard wire this:
+webapp_files_dir=/usr/local/share/.config/yarn/global/node_modules/@cerc-io/mobymask-ui/build
+/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} MOBYMASK_HOSTED_CONFIG
+http-server -p 80 ${webapp_files_dir}
@@ -1,14 +1,30 @@
 FROM node:18.15.0-alpine3.16

-RUN apk --update --no-cache add make git python3 jq
+# This container pulls npm package from a registry configured via env var
+ARG CERC_NPM_REGISTRY_URL

-WORKDIR /app
+RUN apk --update --no-cache add make git python3 jq bash

-COPY . .
+# We do this to get a yq binary from the published container, for the correct architecture we're building here
+COPY --from=docker.io/mikefarah/yq:latest /usr/bin/yq /usr/local/bin/yq

-RUN yarn global add serve
+RUN mkdir -p /scripts
+COPY ./apply-webapp-config.sh /scripts
+COPY ./start-serving-app.sh /scripts

-RUN echo "Building react-peer" && \
-    yarn install --ignore-scripts && yarn build --ignore @cerc-io/test-app
+# Configure the local npm registry
+RUN npm config set @cerc-io:registry ${CERC_NPM_REGISTRY_URL}

-WORKDIR /app
+RUN mkdir -p /config
+
+# Install simple web server for now (use nginx perhaps later)
+RUN yarn global add http-server
+
+# Globally install the payload web app package
+RUN yarn global add @cerc-io/test-app
+
+
+# Expose port for http
+EXPOSE 80
+
+CMD ["/scripts/start-serving-app.sh"]
@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+if [ -n "$CERC_SCRIPT_DEBUG" ]; then
+    set -x
+fi
+if [[ $# -ne 3 ]]; then
+    echo "Illegal number of parameters" >&2
+    exit 1
+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
+fi
+if ! [[ -d ${webapp_files_dir} ]]; then
+    echo "Webapp directory ${webapp_files_dir} does not exist" >&2
+    exit 1
+fi
+# First some magic using sed to translate our yaml config file into an array of key value pairs like:
+# ${config_prefix}<path-through-objects>=<value>
+# sed "s/'//g" is used to remove single quote for relayNodes value
+readarray -t config_kv_pair_array < <( sed -E 's/([^:]+):\s*(.*)/\1=\2/g' ${config_file_name} | sed "s/'//g" |  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[@]}"
+do
+    kv_pair=(${kv_pair_string//=/ })
+    template_string_to_replace=${kv_pair[0]}
+    template_value_to_substitute=${kv_pair[1]}
+    # Run find and sed to do the substitution of one variable over all files
+    # See: https://stackoverflow.com/a/21479607/1701505
+    echo "Substituting: ${template_string_to_replace} = ${template_value_to_substitute}"
+
+    # TODO: Pass keys to be replaced without double quotes
+    if [[ "$template_string_to_replace" == "${config_prefix}_relayNodes" ]]; then
+        find ${webapp_files_dir} -type f -exec sed -i 's#"'"${template_string_to_replace}"'"#'"${template_value_to_substitute}"'#g' {} +
+    else
+        # Note: we do not escape our strings, on the expectation they do not container the '#' char.
+        find ${webapp_files_dir} -type f -exec sed -i 's#'${template_string_to_replace}'#'${template_value_to_substitute}'#g' {} +
+    fi
+done
@@ -6,4 +6,7 @@ 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/react-peer:local -f ${SCRIPT_DIR}/Dockerfile ${build_command_args} ${CERC_REPO_BASE_DIR}/react-peer
+CERC_NPM_REGISTRY_URL="https://git.vdb.to/api/packages/cerc-io/npm/"
+
+docker build -t cerc/react-peer:local  ${build_command_args} -f ${SCRIPT_DIR}/Dockerfile \
+  --build-arg CERC_NPM_REGISTRY_URL ${SCRIPT_DIR}
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+if [ -n "$CERC_SCRIPT_DEBUG" ]; then
+    set -x
+fi
+
+# TODO: Don't hard wire this:
+webapp_files_dir=/usr/local/share/.config/yarn/global/node_modules/@cerc-io/test-app/build
+/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} MOBYMASK_HOSTED_CONFIG
+http-server -p 80 ${webapp_files_dir}