Ant frontend container

Dockerfile

@@ -50,14 +50,17 @@ COPY ./tsconfig* babel.config.json tsconfig-js.json jest.config-ts.json .eslintr
 # Build and install internal dependencies
 RUN yarn build:internal-dependencies
 
-COPY packages/ packages/
+COPY packages/ ./packages/
 
-RUN yarn build:non-internal-dependencies
+# Build server packages
+# Not using parrallel tasks (-P)  as node eats all the ram
+RUN yarn workspaces foreach --verbose --from '@tupaia/*-server' run build
 
 # Build final production image
 FROM node:14.19.3-alpine3.15 as dist
 WORKDIR /tupaia
 
+# We could copy just the servers here but the size difference is negligble and not worth the extra  layers.
 COPY --from=builder /tupaia/packages/ ./packages/
 COPY --from=builder /tupaia/node_modules/ ./node_modules
 # TODO: Remove dev dependencies here. Running yarn workspaces focus -A

frontend.Dockerfile

@@ -0,0 +1,73 @@
+FROM node:14.19.3-alpine3.15 as base
+
+# Install features not available in base alpine distro
+RUN apk --no-cache add bash && \
+    yarn set version berry # set Yarn v3
+
+# Copy *just the package.json* of each package in a separate stage so we don't cachebust it
+WORKDIR /pre
+FROM base as yarnprep
+COPY .yarnrc.yml package.json yarn.lock ./
+COPY packages/ pkgs/
+RUN for pkg in $(ls pkgs); do if test -s pkgs/$pkg/package.json; then mkdir -p packages/$pkg && mv -v pkgs/$pkg/package.json packages/$pkg/; fi; done
+
+
+FROM base as builder
+WORKDIR /tupaia
+COPY --from=yarnprep /pre/package.json /pre/yarn.lock /pre/.yarnrc.yml ./
+COPY .yarn ./.yarn
+COPY --from=yarnprep /pre/packages/ ./packages
+
+# Run yarn without building, so we can cache node_modules without code changes
+# invalidating this layer. Trying to install just the dependencies for the
+# frontend packages doesn't work as root level dev dependencies are needed for
+# the build. I can't figure out a way to install these deps without installing
+# everything.
+RUN SKIP_BUILD_INTERNAL_DEPENDENCIES=true yarn workspaces focus -A
+
+## Add content of all internal dependency packages ready for internal dependencies to be built
+COPY packages/access-policy/. ./packages/access-policy
+COPY packages/utils/. ./packages/utils
+COPY packages/tsutils/. ./packages/tsutils
+COPY packages/types/. ./packages/types
+COPY packages/ui-components/. ./packages/ui-components
+COPY scripts/bash/ ./scripts/bash/
+
+#  Build tooling configuration files
+COPY ./tsconfig* babel.config.json tsconfig-js.json jest.config-ts.json .eslintrc ./
+
+# Build and install internal dependencies
+RUN scripts/bash/buildInternalDependencies.sh --packagePath packages/web-frontend && \
+    scripts/bash/buildInternalDependencies.sh --packagePath packages/admin-panel && \
+    scripts/bash/buildInternalDependencies.sh --packagePath packages/psss
+
+# Build the frontends
+COPY packages/web-frontend packages/web-frontend
+COPY packages/admin-panel packages/admin-panel
+COPY packages/psss packages/psss
+
+# Not using parrallel tasks (-P)  as node eats all the ram
+RUN yarn workspaces foreach --verbose -j 1 --from '{@tupaia/psss,@tupaia/admin-panel,@tupaia/web-frontend}' run build
+
+FROM docker.io/bitnami/git:2.40.1 as h5bp
+# add h5bp config
+RUN git clone https://github.com/h5bp/server-configs-nginx.git && \
+    cd ./server-configs-nginx && \
+    git checkout tags/2.0.0
+
+# Build final production image
+FROM nginx:1.24.0-alpine3.17
+RUN apk add bash
+WORKDIR /home/ubuntu/tupaia
+
+COPY packages/devops/configs/servers.conf /etc/nginx/conf.d/servers.conf
+COPY --from=h5bp server-configs-nginx/h5bp /etc/nginx/h5bp
+# copy .env files into package dirs prior to nginx startup
+COPY scripts/docker/nginx/create-env.sh /docker-entrypoint.d/50-create-env.sh
+# Use /home/ubuntu as workdir to be compatible with existing nginx config
+# (packages/devops/configs/servers.conf)
+WORKDIR "/home/ubuntu/tupaia"
+COPY packages/devops/misc/error_page.html ./error_page.html
+COPY --from=builder /tupaia/packages/web-frontend/build ./packages/web-frontend/build
+COPY --from=builder /tupaia/packages/admin-panel/build ./packages/admin-panel/build
+COPY --from=builder /tupaia/packages/psss/build ./packages/psss/build

scripts/docker/nginx/create-env.sh

@@ -0,0 +1,53 @@
+#!/bin/bash
+
+# Convert the env files generated by the downloadEnv container into js objects.
+# Run by the frontend container prior to nginx startup
+
+# Usage: create-env.sh <env source dir> <package dirs>
+tupaia_env_dir=${1:-/env/packages}
+shift
+if [ -z $# ]; then
+    tupaia_package_dirs=(/home/ubuntu/tupaia/packages/*)
+else
+    tupaia_package_dirs=("$@")
+fi
+
+function env-js() {
+    # Read $1 and write to $2 as a js object `window._env__`
+    # Adapted from
+    # https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70
+    env_src=$1
+    env_js=$2
+
+    echo "window.env = {" > "$env_js"
+    # Read each line in .env file. Each line represents key=value pairs
+    while read -r line || [[ -n "$line" ]]; do
+      # Split env variables by character `=`
+      if printf '%s\n' "$line" | grep -q -e '='; then
+        varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
+        varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
+      fi
+
+      # Read value of current variable if exists as Environment variable
+      # otherwise use value from .env file
+      value=${!varname:-$varvalue}
+      # Append configuration property to JS file
+      echo "  $varname: \"$value\"," >> "$env_js"
+    done < "$env_src"
+
+    echo "}" >> "$env_js"
+}
+
+for p in "${tupaia_package_dirs[@]}"; do
+    package=$(basename "$p")
+    if [ -f "$tupaia_env_dir/$package/.env" ]; then
+        echo  "creating $p/.env-config.js"
+        if [[ $package == "web-frontend" ]]; then
+            # web frontend serves different bundles for desktop and mobile
+            env-js "$tupaia_env_dir/$package/.env" "$p/build/mobile/.env-config.js"
+            env-js "$tupaia_env_dir/$package/.env" "$p/build/desktop/.env-config.js"
+        else
+            env-js "$tupaia_env_dir/$package/.env" "$p/build/.env-config.js"
+        fi
+    fi
+done