Features/ci integration

.dockerignore

@@ -0,0 +1,9 @@
+.git
+*/.git
+node_modules
+*/node_modules
+npm-debug.log
+dist
+.swc
+.env
+!.env/.env

.env/.env

@@ -1 +1,20 @@
-VITE_UNITY_UI_VERSION=${npm_package_version}
+# GENERAL
+VITE_UNITY_UI_VERSION=${npm_package_version}
+VITE_ADMIN_EMAIL=ENV_UNITY_UI_ADMIN_EMAIL
+
+# Auth
+VITE_AUTH_OAUTH_CLIENT_ID=ENV_UNITY_UI_AUTH_OAUTH_CLIENT_ID
+VITE_AUTH_OAUTH_REDIRECT_URI=ENV_UNITY_UI_AUTH_OAUTH_REDIRECT_URI
+VITE_AUTH_OAUTH_LOGOUT_ENDPOINT=ENV_UNITY_UI_AUTH_OAUTH_LOGOUT_ENDPOINT
+VITE_AUTH_OAUTH_PROVIDER_URL=ENV_UNITY_UI_AUTH_OAUTH_PROVIDER_URL
+VITE_AUTH_APP_ADMIN_GROUP_NAME=ENV_UNITY_UI_AUTH_APP_ADMIN_GROUP_NAME
+VITE_AUTH_APP_APP_VIEWER_GROUP_NAME=ENV_UNITY_UI_AUTH_APP_APP_VIEWER_GROUP_NAME
+
+# ADS
+VITE_ADS_URL=ENV_UNITY_UI_ADS_URL
+
+# DS
+VITE_STAC_BROWSER_URL=ENV_UNITY_UI_STAC_BROWSER_URL
+
+# SPS
+VITE_SPS_WPST_ENDPOINT=ENV_UNITY_UI_SPS_WPST_ENDPOINT

.env/.env.docker.example

@@ -0,0 +1,19 @@
+# GENERAL
+ENV_UNITY_UI_ADMIN_EMAIL=REPLACE_WITH_ADMIN_EMAIL
+
+# Auth
+ENV_UNITY_UI_AUTH_OAUTH_CLIENT_ID=REPLACE_WITH_COGNITO_USER_POOL_CLIENT_ID
+ENV_UNITY_UI_AUTH_OAUTH_REDIRECT_URI=REPLACE_WITH_URL_OF_APPLICATION_WITH_PORT_IF_NEEDED
+ENV_UNITY_UI_AUTH_OAUTH_LOGOUT_ENDPOINT=REPLACE_WITH_COGNITO_DOMAIN/logout
+ENV_UNITY_UI_AUTH_OAUTH_PROVIDER_URL=REPLACE_WITH_COGNITO_DOMAIN/oauth2
+ENV_UNITY_UI_AUTH_APP_ADMIN_GROUP_NAME=REPLACE_WITH_USER_POOL_ADMIN_GROUP_NAME
+ENV_UNITY_UI_AUTH_APP_APP_VIEWER_GROUP_NAME=REPLACE_WITH_USER_PROOL_VIEWER_GROUP_NAME
+
+# ADS
+ENV_UNITY_UI_ADS_URL=REPLACE_WITH_ADS_URL
+
+# DS
+VITE_STAC_BROWSER_URL=REPLACE_WITH_STAC_BROWSER_URL
+
+# SPS
+ENV_UNITY_UI_SPS_WPST_ENDPOINT=REPLACE_WITH_ADES_WPST_URL

.github/workflows/docker-build.yml

@@ -0,0 +1,30 @@
+name: Docker Build and Push
+
+on:
+  push:
+    branches:
+      - main  # or any other branch you want to trigger the workflow
+      - "features/*"
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Log in to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io  # replace with your registry if different
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and Push "Latest" Docker image
+        id: build-and-push-latest
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ghcr.io/${{ github.repository }}/unity-ui-application:latest  # replace with your image name and tag

.gitignore

@@ -10,6 +10,9 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.env
+!.env/.env
+!.env/.env.docker.example
 
 node_modules
 dist

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.5.0] (unreleased)
 - Updated Navbar CSS styling to match Figma designs [#5](https://github.com/unity-sds/unity-ui/issues/5)
+- Added CI/CD workflow to build application as a docker image. [#21](https://github.com/unity-sds/unity-ui/issues/21)
+- Updated application build configuration. Stateful information has been removed from project configuration. Instead we now allow environment variables to be supplied to the container at startup which in turn get injected into the Unity UI Codebase. This is in support of moving to dynamic configuration of the application via Unity Marketplace. Related to [#3](https://github.com/unity-sds/unity-sds-portal/issues/3)
 
 ## [0.4.0] - 2023-12-13
 - Updated /job/new endpoint so it lists the applications for which jobs may be executed.

Dockerfile

@@ -0,0 +1,56 @@
+############################################################
+############################################################
+# Code Building Stage
+
+FROM node:lts-hydrogen as builder
+
+RUN apt-get update
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Copy source to workdir
+COPY . .
+
+# Install dependencies
+RUN npm clean-install
+
+# Build distribution
+RUN npm run build
+
+############################################################
+############################################################
+# Build Image Stage
+
+FROM ubuntu:18.04
+LABEL version="0.1.0"
+
+ENV UNITY_WWW_ROOT=/var/www/unity-ui
+ENV ENTRYPOINT_FOLDER=/entrypoint.d
+
+RUN apt-get update \
+      && apt-get install -y apache2 \
+      && rm -rf /var/lib/apt/lists/* \
+      && apt-get clean
+
+# Create app directory and copy distribution code from builder stage
+WORKDIR ${UNITY_WWW_ROOT}
+COPY --from=builder /usr/src/app/dist ./
+
+# Configure apache2
+COPY ./etc/apache2/sites-available/unity-ui.conf /etc/apache2/sites-available/
+RUN echo "ServerName localhost" >> /etc/apache2/apache2.conf
+RUN a2dissite 000-default.conf
+RUN a2ensite unity-ui.conf
+
+# Copy and set up files needed for container startup
+COPY ./entrypoint.d/* ${ENTRYPOINT_FOLDER}/
+RUN chmod 777 -R ${ENTRYPOINT_FOLDER}/* && chmod +x -R ${ENTRYPOINT_FOLDER}/*
+
+EXPOSE 80
+
+# Default process to run on container startup
+ENTRYPOINT ["/entrypoint.d/docker-entrypoint.sh"]
+
+# Default options to pass to apache when starting container in docker-entrypoint.sh
+CMD ["-k", "start"]

Makefile

@@ -0,0 +1,44 @@
+export IMAGE_NAME = unity-ui
+export CONTAINER_NAME = unity-ui
+export RUN_OPTIONS = 
+
+build-no-cache: RUN_OPTIONS = "--no-cache"
+build-no-cache: build
+
+build:
+	docker buildx build --progress=plain $(RUN_OPTIONS) -t ${IMAGE_NAME} -f Dockerfile .
+
+destroy-container:
+	docker container rm ${CONTAINER_NAME}
+
+destroy-image:
+	docker image rm ${IMAGE_NAME}
+
+kill:
+	docker kill ${CONTAINER_NAME}
+
+run:
+	docker run --env-file=./.env/.env.docker -t -i --rm -p 8080:80 --name ${CONTAINER_NAME} ${IMAGE_NAME} 
+
+start:
+	docker start ${CONTAINER_NAME}
+
+stop:
+	docker stop ${CONTAINER_NAME}
+
+# ----------------------------------------------------------------------------
+# Self-Documented Makefile
+# ref: http://marmelab.com/blog/2016/02/29/auto-documented-makefile.html
+# ----------------------------------------------------------------------------
+help:						## (DEFAULT) This help information
+	@echo ====================================================================
+	@grep -E '^## .*$$'  \
+		$(MAKEFILE_LIST)  \
+		| awk 'BEGIN { FS="## " }; {printf "\033[33m%-24s\033[0m \n", $$2}'
+	@echo
+	@grep -E '^[0-9a-zA-Z_-]+:.*?## .*$$'  \
+		$(MAKEFILE_LIST)  \
+		| awk 'BEGIN { FS=":.*?## " }; {printf "\033[36m%-24s\033[0m %s\n", $$1, $$2}'  \
+#		 | sort
+.PHONY: help
+.DEFAULT_GOAL := help

entrypoint.d/docker-entrypoint.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+#set -x; : "$0" "$@"  # Use for debugging
+
+# Inject Environment Variables for React App
+source ${ENTRYPOINT_FOLDER}/env.sh
+
+rm -f /var/run/apache2/apache2.pid
+
+# Run the main container process
+# (Arguments for Apache supplied from the Dockerfile CMD)
+exec /usr/sbin/apachectl -D FOREGROUND "$@"

entrypoint.d/env.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+for i in $(env | grep ENV_UNITY_UI_)
+do
+    key=$(echo $i | cut -d '=' -f 1)
+    value=$(echo $i | cut -d '=' -f 2-)
+    echo $key=$value
+    # sed All files
+    # find $UNITY_WWW_ROOT -type f -exec sed -i "s|${key}|${value}|g" '{}' +
+
+    # sed .js only
+    find $UNITY_WWW_ROOT -type f \( -name '*.js' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+done

etc/apache2/sites-available/unity-ui.conf

@@ -0,0 +1,15 @@
+<VirtualHost *:80>
+
+    ServerName localhost
+    DocumentRoot /var/www/unity-ui/
+    ErrorLog ${APACHE_LOG_DIR}/error.log
+    CustomLog ${APACHE_LOG_DIR}/access.log combined
+
+    <Directory /var/www/unity-ui/>
+       Options -Indexes
+       AllowOverride All
+       Order allow,deny
+       allow from all
+    </Directory>
+
+</VirtualHost>

package.json

@@ -5,10 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build-integration": "tsc && vite build --mode integration --base=/dashboard/",
-    "build-test": "tsc && vite build --mode test --base=/dashboard/",
-    "build-sips-test": "tsc && vite build --mode sips-test --base=/unity-sips-test/dashboard/",
-    "build-prod": "tsc && vite build --mode production",
+    "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

src/Config.tsx

@@ -24,4 +24,9 @@ const Config = {
 
 }
 
+if( import.meta.env.DEV ) {
+  // Output Configuration on every call to help with debugging only in DEV mode
+  console.log(Config)
+}
+
 export default Config;