Sho/docker

.dockerignore

@@ -0,0 +1,6 @@
+.ash_history
+.env
+Dockerfile
+docker-compose.yml
+.git/ # some build steps require it to be a git repo
+.gradle/

.env.example

@@ -0,0 +1,14 @@
+# Copy this example to .env for usage and adapt to your needs.
+# The .env file is automatically used by docker-compose command.
+
+# Adapt to your UID:GID if not 1st user, which defaults to 1000:1000
+# This is only necessary if you want to bind your work directory
+# into a running container instance to actively develop this app.
+#GID=1000
+#UID=1000
+
+# Which port to bind container app on host to. leave commented out 
+# for dynamically assigned high port which is the default except for
+# production environment.
+# Note that the value has to end with a colon for correct mapping syntax.
+#HOST_PORT=8082:

.gitignore

@@ -0,0 +1,3 @@
+.ash_history
+.env
+.gradle/

Dockerfile

@@ -2,20 +2,22 @@ FROM alpine:3.19
 
 LABEL authors="Arnd Plumhoff <[email protected]>, Sascha Hoppe <[email protected]>"
 
-ARG ELKLIVE_UID=1002
+ARG ELKLIVE_HOME=/elklive
+ARG ELKLIVE_UID=1000
+ARG ELKLIVE_GID=1000
 
 RUN apk add --update --no-cache yarn git gradle curl
 
-RUN adduser elklive -h /elklive -D -u ${ELKLIVE_UID}
+RUN addgroup -g ${ELKLIVE_GID} elklive \
+ && adduser elklive -h ${ELKLIVE_HOME} -D -u ${ELKLIVE_UID} -G elklive
 
 USER elklive
 
-RUN git clone https://github.com/kieler/elk-live --depth=1 /elklive
+COPY --chown=elklive:elklive . ${ELKLIVE_HOME}
 
-WORKDIR "/elklive/client"
-RUN yarn install && yarn run build
+RUN cd ${ELKLIVE_HOME}/client && yarn install && yarn run build
 
-WORKDIR "/elklive/server"
+WORKDIR "${ELKLIVE_HOME}/server"
 RUN ./gradlew build
 
 EXPOSE 8080

README.md

@@ -13,7 +13,9 @@ Uses:
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/OpenKieler/elkgraph-web)
 
-The easiest way to start working with this project is to open it in [gitpod.io](https://gitpod.io) with the button above. If you would like to compile and run it on your own machine, follow the instructions below.
+The easiest way to start working with this project is to open it in
+[gitpod.io](https://gitpod.io) with the button above. If you would like to
+compile and run it on your own machine, follow the instructions below.
 
 Prerequisites: [yarn](https://yarnpkg.com/), [Java](https://jdk.java.net)
 
@@ -29,5 +31,29 @@ cd ../server
 
 Then point your web browser to `http://localhost:8080/`
 
+This project provides a container based runtime environment for the
+[elk-live](https://github.com/kieler/elk-live) project.
+
+## Usage
+
+Build and/or run image with [Docker](https://www.docker.com). You can start
+container on pre-built image with `docker run ghcr.io/kieler/elk-live:master`.
+
+### Local image build
+
+You can also build an container image locally by using the provided Dockerfile
+or, more comfortable, using docker-compose.yml with `docker-compose up --build`
+and `docker build`, respectively. This way you can locally adapt the runtime
+environment to your needs and even develop actively with nicely separated
+build- and runtime dependencies.
+
+To easily get started with a locally built image, follow the steps below
+
+```terminal
+cp .env.example .env
+vi .env # adapt settings via provided environment
+docker-compose up --build
+```
+
 ## Hosting
-If you would like to host elk-live yourself you can use the automatically built [Docker container](https://github.com/kieler/elk-live/pkgs/container/elk-live). There is also an [example configuration](https://github.com/kieler/elk-live/blob/master/docker-compose.yml) for Docker Compose.
+If you would like to host elk-live yourself you can use the automatically built [Docker container](https://github.com/kieler/elk-live/pkgs/container/elk-live). There is also an [example configuration](https://github.com/kieler/elk-live/blob/master/docker-compose.yml) for Docker Compose.

client/webpack.config.js

@@ -17,11 +17,14 @@ const childProcess = require('child_process');
 const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
 const fs = require('fs');
 const globby = require('globby');
+const package = require('./package.json')
 
 module.exports = async function (env) {
     if (!env) {
         env = {}
     }
+    console.log("environment: ", env);
+    console.log("environment: ", process.env);
 
     const buildRoot = path.resolve(__dirname, 'lib');
     const appRoot = path.resolve(__dirname, 'app');
@@ -40,7 +43,11 @@ module.exports = async function (env) {
     const elkWorkerPath9 = 'node_modules/elkjs-9/lib/elk-worker.min.js';
     const elkWorkerPathLatest = 'node_modules/elkjs-latest/lib/elk-worker.min.js';
     const elkWorkerPathNext = 'node_modules/elkjs-next/lib/elk-worker.min.js';
-    const currentGitCommit = childProcess.execSync('git rev-parse --short HEAD').toString().trim();
+    currentVersion = package.version;
+    if (process.env.GITHUB_SHA) {
+        currentVersion += '-' + process.env.GITHUB_SHA;
+    }
+    console.log("Building ELK-Graph Web version " + currentVersion);
 
     const javaElkVersions = [ 'snapshot' ]; // latest snapshot/nightly at the time of building 
     // Query released ELK versions using maven's REST API
@@ -128,35 +135,35 @@ module.exports = async function (env) {
                 template: 'src/elkgraph/elkgraph_template.html',
                 inject: false,
                 layoutOptionVersions: javaElkVersionsOptions,
-                currentGitCommit: currentGitCommit,
+                currentGitCommit: currentVersion,
             }),
             new HtmlWebpackPlugin({
                 filename: 'examples.html',
                 template: 'src/examples/examples_template.html',
                 inject: false,
                 layoutOptionVersions: javaElkVersionsOptions,
-                currentGitCommit: currentGitCommit,
+                currentGitCommit: currentVersion,
             }),
             new HtmlWebpackPlugin({
                 filename: 'json.html',
                 template: 'src/json/json_template.html',
                 inject: false,
                 nextVersion: elkjsNext.version,
                 latestVersion: elkjsLatest.version,
-                currentGitCommit: currentGitCommit,
+                currentGitCommit: currentVersion,
             }),
             new HtmlWebpackPlugin({
                 filename: 'models.html',
                 template: 'src/models/models_template.html',
                 inject: false,
                 elkjsVersion: elkjsLatest.version,
-                currentGitCommit: currentGitCommit,
+                currentGitCommit: currentVersion,
             }),
             new HtmlWebpackPlugin({
                 filename: 'conversion.html',
                 template: 'src/conversion/conversion_template.html',
                 inject: false,
-                currentGitCommit: currentGitCommit,
+                currentGitCommit: currentVersion,
             }),
             new CopyWebpackPlugin([{
                 from: monacoEditorPath,

docker-compose.yml

@@ -1,14 +1,18 @@
-version: "2"
-
 services: 
   elkweb: 
-    container_name: elkweb
-    image: ghcr.io/kieler/elk-live:master
+    build:
+      context: .
+      args:
+        - ELKLIVE_UID=${UID:-1000}
+        - ELKLIVE_GID=${GID:-1000}
     ports: 
-      - 8082:8080
+      - ${HOST_PORT}8080
+    # Activate to bind work dir into container, e.g. for local development
+    # volumes:
+    #   - .:/elklive
     restart: unless-stopped
     cpus: 0.5
-    mem_limit: 536870912
+    mem_limit: 1024m
     healthcheck:
       test: curl --fail http://localhost:8080 || exit 1
       interval: 60s