mocode-software/meldestelle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

client-web umbau

Browse Source
This commit is contained in:
stefan 2025-09-10 14:40:18 +02:00
parent 13c8ed9816
commit fb37c3a64a
27 changed files with 1566 additions and 1053 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/kobweb-app/.kobweb/conf.yaml
View File

@ -1,10 +0,0 @@
site:
title: "Meldestelle Kobweb Application"
server:
files:
dev:
contentRoot: ".kobweb/server/dev"
prod:
contentRoot: ".kobweb/server/prod"
siteRoot: "/"

48
client/kobweb-app/build.gradle.kts
View File

@ -1,48 +0,0 @@
plugins {
alias(libs.plugins.kotlin.multiplatform)
alias(libs.plugins.compose)
}
group = "at.mocode.client.kobweb"
version = "1.0-SNAPSHOT"
// Configure Java 17 toolchain (required by modern Compose/Kobweb)
java {
toolchain {
languageVersion.set(JavaLanguageVersion.of(17))
}
}
kobweb {
app {
index {
description.set("Meldestelle Kobweb Application")
}
}
}
kotlin {
js {
moduleName = "kobweb-app"
compilerOptions.target = "es2015"
browser()
binaries.executable()
}
sourceSets {
jsMain.dependencies {
implementation(libs.compose.runtime)
implementation(libs.kobweb.core)
implementation(libs.kobweb.silk.core)
implementation(libs.kobwebx.markdown)
implementation(libs.compose.html.core)
// Common UI module via published artifact (decoupled build)
implementation("at.mocode.client:common-ui:1.0.0-SNAPSHOT")
// Additional web-specific dependencies
implementation(libs.kotlinx.coroutines.core)
implementation(libs.ktor.client.js)
}
}
}

9
client/kobweb-app/gradle.properties
View File

@ -1,9 +0,0 @@
kotlin.code.style=official
# It seems that live reloading + Compose stresses Gradle out, causing occasional memory dumps, so we give it a bit more
# memory for a better user experience.
org.gradle.jvmargs=-Xmx2048m
org.gradle.caching=true
# Disable configuration cache due to Kobweb plugin 0.23.0 incompatibility causing NPE on apply
org.gradle.configuration-cache=false

30
client/kobweb-app/gradle/libs.versions.toml
View File

@ -1,30 +0,0 @@
[versions]
kobweb = "0.23.0"
jetbrains-compose = "1.6.11"
kotlin = "1.9.23"
kotlinx = "1.8.1"
ktor = "3.2.3"
[libraries]
kobweb-core = { module = "com.varabyte.kobweb:kobweb-core", version.ref = "kobweb" }
kobweb-silk-core = { module = "com.varabyte.kobweb:kobweb-silk", version.ref = "kobweb" }
kobwebx-markdown = { module = "com.varabyte.kobwebx:kobwebx-markdown", version.ref = "kobweb" }
kobweb-silk-icons-fa = { module = "com.varabyte.kobwebx:silk-icons-fa", version.ref = "kobweb" }
compose-html-core = { module = "org.jetbrains.compose.html:html-core", version.ref = "jetbrains-compose" }
compose-runtime = { module = "org.jetbrains.compose.runtime:runtime", version.ref = "jetbrains-compose" }
kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinx" }
ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }
[plugins]
kobweb-application = { id = "com.varabyte.kobweb.application", version.ref = "kobweb" }
kobwebx-markdown = { id = "com.varabyte.kobwebx.markdown", version.ref = "kobweb" }
compose = { id = "org.jetbrains.compose", version.ref = "jetbrains-compose" }
compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

BIN
client/kobweb-app/gradle/wrapper/gradle-wrapper.jar vendored
View File

Binary file not shown.

7
client/kobweb-app/gradle/wrapper/gradle-wrapper.properties vendored
View File

@ -1,7 +0,0 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

251
client/kobweb-app/gradlew vendored
View File

@ -1,251 +0,0 @@
#!/bin/sh
#
# Copyright © 2015 the original authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
# SPDX-License-Identifier: Apache-2.0
#
##############################################################################
#
# Gradle start up script for POSIX generated by Gradle.
#
# Important for running:
#
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
# noncompliant, but you have some other compliant shell such as ksh or
# bash, then to run this script, type that shell name before the whole
# command line, like:
#
# ksh Gradle
#
# Busybox and similar reduced shells will NOT work, because this script
# requires all of these POSIX shell features:
# * functions;
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
# * compound commands having a testable exit status, especially «case»;
# * various built-in commands including «command», «set», and «ulimit».
#
# Important for patching:
#
# (2) This script targets any POSIX shell, so it avoids extensions provided
# by Bash, Ksh, etc; in particular arrays are avoided.
#
# The "traditional" practice of packing multiple parameters into a
# space-separated string is a well documented source of bugs and security
# problems, so this is (mostly) avoided, by progressively accumulating
# options in "$@", and eventually passing that to Java.
#
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
# see the in-line comments for details.
#
# There are tweaks for specific operating systems such as AIX, CygWin,
# Darwin, MinGW, and NonStop.
#
# (3) This script is generated from the Groovy template
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# within the Gradle project.
#
# You can find Gradle at https://github.com/gradle/gradle/.
#
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
app_path=$0
# Need this for daisy-chained symlinks.
while
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
[ -h "$app_path" ]
do
ls=$( ls -ld "$app_path" )
link=${ls#*' -> '}
case $link in #(
/*) app_path=$link ;; #(
*) app_path=$APP_HOME$link ;;
esac
done
# This is normally unused
# shellcheck disable=SC2034
APP_BASE_NAME=${0##*/}
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum
warn () {
echo "$*"
} >&2
die () {
echo
echo "$*"
echo
exit 1
} >&2
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "$( uname )" in #(
CYGWIN* ) cygwin=true ;; #(
Darwin* ) darwin=true ;; #(
MSYS* | MINGW* ) msys=true ;; #(
NONSTOP* ) nonstop=true ;;
esac
CLASSPATH="\\\"\\\""
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD=$JAVA_HOME/jre/sh/java
else
JAVACMD=$JAVA_HOME/bin/java
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD=java
if ! command -v java >/dev/null 2>&1
then
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
fi
# Increase the maximum file descriptors if we can.
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
case $MAX_FD in #(
max*)
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
MAX_FD=$( ulimit -H -n ) ||
warn "Could not query maximum file descriptor limit"
esac
case $MAX_FD in #(
'' | soft) :;; #(
*)
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
ulimit -n "$MAX_FD" ||
warn "Could not set maximum file descriptor limit to $MAX_FD"
esac
fi
# Collect all arguments for the java command, stacking in reverse order:
# * args from the command line
# * the main class name
# * -classpath
# * -D...appname settings
# * --module-path (only if needed)
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
# For Cygwin or MSYS, switch paths to Windows format before running java
if "$cygwin" || "$msys" ; then
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
JAVACMD=$( cygpath --unix "$JAVACMD" )
# Now convert the arguments - kludge to limit ourselves to /bin/sh
for arg do
if
case $arg in #(
-*) false ;; # don't mess with options #(
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
[ -e "$t" ] ;; #(
*) false ;;
esac
then
arg=$( cygpath --path --ignore --mixed "$arg" )
fi
# Roll the args list around exactly as many times as the number of
# args, so each arg winds up back in the position where it started, but
# possibly modified.
#
# NB: a `for` loop captures its iteration list before it begins, so
# changing the positional parameters here affects neither the number of
# iterations, nor the values presented in `arg`.
shift # remove old arg
set -- "$@" "$arg" # push replacement arg
done
fi
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Collect all arguments for the java command:
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
# and any embedded shellness will be escaped.
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
# treated as '${Hostname}' itself on the command line.
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
"$@"
# Stop when "xargs" is not available.
if ! command -v xargs >/dev/null 2>&1
then
die "xargs is not available"
fi
# Use "xargs" to parse quoted args.
#
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
#
# In Bash we could simply go:
#
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
# set -- "${ARGS[@]}" "$@"
#
# but POSIX shell has neither arrays nor command substitution, so instead we
# post-process each arg (as a line of input to sed) to backslash-escape any
# character that might be a shell metacharacter, then use eval to reverse
# that process (while maintaining the separation between arguments), and wrap
# the whole thing up as a single "set" statement.
#
# This will of course break if any of these variables contains a newline or
# an unmatched quote.
#
eval "set -- $(
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
xargs -n1 |
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
tr '\n' ' '
)" '"$@"'
exec "$JAVACMD" "$@"

94
client/kobweb-app/gradlew.bat vendored
View File

@ -1,94 +0,0 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%"=="" set DIRNAME=.
@rem This is normally unused
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if %ERRORLEVEL% equ 0 goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:execute
@rem Setup the command line
set CLASSPATH=
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
:end
@rem End local scope for the variables with windows NT shell
if %ERRORLEVEL% equ 0 goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
set EXIT_CODE=%ERRORLEVEL%
if %EXIT_CODE% equ 0 set EXIT_CODE=1
if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
exit /b %EXIT_CODE%
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega

21
client/kobweb-app/settings.gradle.kts
View File

@ -1,21 +0,0 @@
rootProject.name = "kobweb-app"
pluginManagement {
repositories {
gradlePluginPortal()
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
}
}
dependencyResolutionManagement {
@Suppress("UnstableApiUsage")
repositories {
google()
mavenLocal()
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
}
}

30
client/kobweb-app/src/jsMain/kotlin/at/mocode/client/kobweb/Main.kt
View File

@ -1,30 +0,0 @@
package at.mocode.client.kobweb
import androidx.compose.runtime.*
import com.varabyte.kobweb.core.App
import com.varabyte.kobweb.silk.SilkApp
import com.varabyte.kobweb.silk.components.layout.Surface
import com.varabyte.kobweb.silk.init.InitSilk
import com.varabyte.kobweb.silk.init.InitSilkContext
import com.varabyte.kobweb.compose.ui.Modifier
import com.varabyte.kobweb.compose.ui.modifiers.minHeight
import org.jetbrains.compose.web.css.vh
@InitSilk
fun initSilk(ctx: InitSilkContext) {
// You can configure your app here.
// This will be called once when your app starts up.
//
// As an example, you can use `ctx.stylesheet` to add styles,
// or `ctx.theme` to modify colors, fonts, etc.
}
@App
@Composable
fun MyApp(content: @Composable () -> Unit) {
SilkApp {
Surface(modifier = Modifier.minHeight(100.vh)) {
content()
}
}
}

40
client/kobweb-app/src/jsMain/kotlin/at/mocode/client/kobweb/components/LoadingIndicator.kt
View File

@ -1,40 +0,0 @@
package at.mocode.client.kobweb.components
import androidx.compose.runtime.*
import com.varabyte.kobweb.compose.foundation.layout.Box
import com.varabyte.kobweb.compose.ui.Alignment
import com.varabyte.kobweb.compose.ui.Modifier
import com.varabyte.kobweb.silk.components.text.SpanText
import kotlinx.coroutines.delay
/**
* A simple loading indicator component using only Kobweb/Silk components.
*/
@Composable
fun LoadingIndicator(
message: String = "Loading",
modifier: Modifier = Modifier
) {
var dots by remember { mutableStateOf("") }
LaunchedEffect(Unit) {
while (true) {
delay(500)
dots = when (dots.length) {
0 -> "."
1 -> ".."
2 -> "..."
else -> ""
}
}
}
Box(
modifier = modifier,
contentAlignment = Alignment.Center
) {
SpanText(
text = "$message$dots"
)
}
}

48
client/kobweb-app/src/jsMain/kotlin/at/mocode/client/kobweb/config/AppConfig.kt
View File

@ -1,48 +0,0 @@
package at.mocode.client.kobweb.config
/**
* Application configuration for the Kobweb client.
* Provides centralized configuration management to avoid hardcoded values.
*/
object AppConfig {
/**
* Base URL for the backend services.
* Can be overridden via environment variables or build configuration.
*/
val baseUrl: String = getBaseUrl()
/**
* Application title
*/
const val APP_TITLE = "Meldestelle Kobweb Application"
/**
* Default timeout for network requests in milliseconds
*/
const val DEFAULT_TIMEOUT = 10_000L
/**
* Gets the base URL from various sources with fallback hierarchy:
* 1. Runtime environment variable
* 2. Build-time configuration
* 3. Default localhost for development
*/
private fun getBaseUrl(): String {
// Check for runtime configuration (if available in browser environment)
val runtimeUrl = js("typeof window !== 'undefined' ? window.location.origin : null") as? String
// For development, use localhost backend
// In production, this should be configured during build or deployment
return when {
!runtimeUrl.isNullOrBlank() && runtimeUrl != "null" -> {
// In production, backend might be on same origin or configured path
if (runtimeUrl.contains("localhost") || runtimeUrl.contains("127.0.0.1")) {
"http://localhost:8081" // Development backend
} else {
"$runtimeUrl/api" // Production backend on same origin
}
}
else -> "http://localhost:8081" // Fallback for development
}
}
}

53
client/kobweb-app/src/jsMain/kotlin/at/mocode/client/kobweb/di/ServiceProvider.kt
View File

@ -1,53 +0,0 @@
package at.mocode.client.kobweb.di
import at.mocode.client.data.service.PingService
import at.mocode.client.kobweb.config.AppConfig
import at.mocode.client.ui.viewmodel.PingViewModel
/**
* Simple dependency injection container for the Kobweb application.
* Provides centralized service management and lifecycle handling.
*/
object ServiceProvider {
// Lazy initialization of services
private val _pingService by lazy {
PingService(AppConfig.baseUrl)
}
// Track created ViewModels for cleanup
private val createdViewModels = mutableListOf<PingViewModel>()
/**
* Get the singleton PingService instance
*/
fun getPingService(): PingService = _pingService
/**
* Create a new PingViewModel instance.
* Note: ViewModels should typically be created per screen/component
* to maintain proper state isolation.
*/
fun createPingViewModel(): PingViewModel {
val viewModel = PingViewModel(_pingService)
createdViewModels.add(viewModel)
return viewModel
}
/**
* Cleanup a specific ViewModel
*/
fun cleanupViewModel(viewModel: PingViewModel) {
viewModel.dispose()
createdViewModels.remove(viewModel)
}
/**
* Cleanup all resources when the application is shutting down.
* Should be called when the app is being destroyed.
*/
fun cleanup() {
createdViewModels.forEach { it.dispose() }
createdViewModels.clear()
}
}

99
client/kobweb-app/src/jsMain/kotlin/at/mocode/client/kobweb/pages/Index.kt
View File

@ -1,99 +0,0 @@
package at.mocode.client.kobweb.pages
import androidx.compose.runtime.*
import at.mocode.client.data.service.PingService
import at.mocode.client.ui.viewmodel.PingUiState
import at.mocode.client.ui.viewmodel.PingViewModel
import com.varabyte.kobweb.core.Page
import com.varabyte.kobweb.silk.components.forms.Button
import com.varabyte.kobweb.compose.foundation.layout.Box
import com.varabyte.kobweb.compose.foundation.layout.Column
import com.varabyte.kobweb.compose.foundation.layout.Spacer
import com.varabyte.kobweb.silk.components.text.SpanText
import com.varabyte.kobweb.compose.ui.Modifier
import com.varabyte.kobweb.compose.ui.Alignment
import com.varabyte.kobweb.compose.ui.modifiers.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.rgb
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.H1
import org.jetbrains.compose.web.dom.Text
import at.mocode.client.kobweb.config.AppConfig
import at.mocode.client.kobweb.di.ServiceProvider
import at.mocode.client.kobweb.components.LoadingIndicator
@Page
@Composable
fun HomePage() {
// Use dependency injection for better service management
val viewModel = remember { ServiceProvider.createPingViewModel() }
// Proper lifecycle management with ServiceProvider cleanup
DisposableEffect(viewModel) {
onDispose {
ServiceProvider.cleanupViewModel(viewModel)
}
}
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.px)
) {
H1 {
Text(AppConfig.APP_TITLE)
}
Spacer()
H1 {
Text("Ping Backend Service")
}
Spacer()
// Status display area
Box(
modifier = Modifier
.fillMaxWidth()
.height(100.px),
contentAlignment = Alignment.Center
) {
when (val state = viewModel.uiState) {
is PingUiState.Initial -> {
SpanText(
text = "Klicke auf den Button, um das Backend zu testen",
modifier = Modifier.color(rgb(0, 0, 0))
)
}
is PingUiState.Loading -> {
LoadingIndicator(
message = "Pinge Backend",
modifier = Modifier.fillMaxWidth()
)
}
is PingUiState.Success -> {
SpanText(
text = "Antwort vom Backend: ${state.response.status}",
modifier = Modifier.color(rgb(0, 150, 0))
)
}
is PingUiState.Error -> {
SpanText(
text = "Fehler: ${state.message}",
modifier = Modifier.color(rgb(180, 0, 0))
)
}
}
}
Spacer()
Button(
onClick = { viewModel.pingBackend() },
enabled = viewModel.uiState !is PingUiState.Loading
) {
SpanText("Ping Backend")
}
}
}

303
client/web-app/README.md Normal file
View File

@ -0,0 +1,303 @@
# Meldestelle Web-App
Eine moderne Web-Anwendung basierend auf **Compose for Web** (Compose Multiplatform) für das Meldestelle-Projekt.
## 📋 Überblick
Diese Web-Anwendung implementiert das Frontend für das Meldestelle-System unter Verwendung von Compose for Web. Sie folgt dem Architekturprinzip der maximalen Code-Wiederverwendung durch die Nutzung des `commonMain`-Source-Sets von Kotlin Multiplatform.
### Technologie-Stack
- **Frontend Framework**: Compose for Web (Compose Multiplatform 1.8.2)
- **Programmiersprache**: Kotlin/JS
- **Build-System**: Gradle 8.10
- **HTTP-Client**: Ktor Client
- **UI-Komponenten**: Compose Material 3 (aus commonMain)
- **Bundler**: Webpack (über Kotlin/JS Plugin)
- **Container**: Nginx (Production)
## 🏗️ Architektur
```
client/web-app/
├── src/
│ └── jsMain/
│ ├── kotlin/at/mocode/client/web/
│ │ └── main.kt # Entry Point
│ └── resources/
│ └── index.html # HTML Template
├── build.gradle.kts # Build Konfiguration
└── build/ # Build Artefakte
└── dist/js/productionExecutable/ # Produktionsversion
```
### Design Prinzipien
1. **Code-Wiederverwendung**: Maximale Nutzung des `client:common-ui` Moduls
2. **Compose for Web**: Deklarative UI mit `@Composable` Funktionen
3. **State Management**: Zustandsverwaltung über ViewModels im `commonMain`
4. **Plattform-Trennung**: UI-Code in `jsMain`, Logik in `commonMain`
## 🚀 Schnellstart
### Voraussetzungen
- Java 21+
- Docker und Docker Compose
- Node.js 18+ (wird automatisch im Container installiert)
### Entwicklung starten
#### Mit Docker (Empfohlen)
```bash
# Web-App im Entwicklungsmodus starten
docker compose -f docker-compose.yml -f docker-compose.clients.yml up -d web-app
# Anwendung ist verfügbar unter:
# http://localhost:3000
```
#### Lokale Entwicklung
```bash
# Abhängigkeiten installieren und Entwicklungsserver starten
./gradlew :client:web-app:jsBrowserDevelopmentRun
# Anwendung läuft auf http://localhost:8080
```
### Produktionsbuild
```bash
# Optimierte JavaScript-Bundles erstellen
./gradlew :client:web-app:jsBrowserDistribution
# Artefakte befinden sich in:
# client/web-app/build/dist/js/productionExecutable/
```
## 🔧 Entwicklung
### Projekt-Struktur
```kotlin
// main.kt - Entry Point
fun main() {
renderComposable(rootElementId = "root") {
WebApp()
}
}
@Composable
fun WebApp() {
// Verwendet die gemeinsame App-Komponente aus commonMain
App()
}
```
### Hot-Reload
Die Entwicklungsumgebung unterstützt Hot-Reload:
- Änderungen an Kotlin-Code werden automatisch neu kompiliert
- Browser wird automatisch aktualisiert
- Schnelle Entwicklungszyklen durch Webpack Dev Server
### Build-Konfiguration
Die `build.gradle.kts` konfiguriert:
```kotlin
kotlin {
js(IR) {
browser {
commonWebpackConfig {
outputFileName = "web-app.js"
// Webpack optimization directory
configDirectory = project.projectDir.resolve("webpack.config.d")
}
webpackTask {
mainOutputFileName = "web-app.js"
}
}
binaries.executable()
}
}
```
### Webpack-Optimierungen
Das Projekt verwendet erweiterte Webpack-Optimierungen für bessere Performance:
#### Code Splitting
- **Separate Chunks**: Bundle wird in ~60 kleinere, cacheable Dateien aufgeteilt
- **Vendor Chunks**: Große Libraries (Kotlin stdlib, Compose runtime, Coroutines) werden separat geladen
- **Lazy Loading**: Verbessertes Caching durch getrennte Vendor- und App-Code-Chunks
#### Bundle-Größenoptimierung
- **Tree Shaking**: Entfernt ungenutzten Code
- **Minification**: Aggressive Komprimierung im Produktionsbuild
- **Scope Hoisting**: Optimiert JavaScript-Execution
- **Performance Budget**: Warnt bei zu großen Bundles (500KB pro Asset, 800KB Gesamt)
#### Generierte Chunks (Beispiel)
```
web-app-runtime.js 1.67 KiB (Runtime)
web-app.js 482 bytes (Main App)
web-app-compose-runtime-*.js 274 KiB (Compose Framework)
web-app-kotlin-stdlib.js 165 KiB (Kotlin Standard Library)
web-app-coroutines.js 119 KiB (Kotlinx Coroutines)
web-app-vendors-*.js 1.17 MiB (Weitere Dependencies)
```
```
**Abhängigkeiten:**
- `compose.web.core` - Compose for Web Framework
- `compose.runtime` - Compose Runtime
- `project(":client:common-ui")` - Gemeinsame UI-Komponenten
- `kotlinx-coroutines-core-js` - Coroutines für Web
## 🌐 Deployment
### Docker Container
Die Anwendung wird als Docker-Container deployed:
```dockerfile
# Multi-stage Build
FROM gradle:8.10-jdk21 AS builder
# ... Build Phase
FROM nginx:1.25-alpine AS production
# ... Production Phase
```
**Features:**
- Multi-stage Build für optimale Image-Größe
- Nginx als Static File Server
- Health Checks
- Security Headers
- Gzip Kompression
### Konfiguration
Umgebungsvariablen:
- `NODE_ENV`: Entwicklungs-/Produktionsmodus
- `API_BASE_URL`: Backend API URL
- `APP_TITLE`: Anwendungstitel
- `APP_VERSION`: Versionsnummer
### Health Checks
```bash
# Container Health Check
curl --fail http://localhost:3000/health
# Antwort: {"status":"ok","service":"web-app"}
```
## 🔗 Integration
### Backend-Kommunikation
Die Web-App kommuniziert mit dem Backend über:
- **API Gateway**: `http://api-gateway:8081`
- **REST APIs**: Über Ktor Client
- **WebSocket**: Für Realtime-Updates (geplant)
### Gemeinsame Komponenten
Nutzt Komponenten aus `client:common-ui`:
- **ViewModels**: `PingViewModel` für Backend-Tests
- **UI-Komponenten**: `App`, `PingScreen`
- **Services**: `PingService` für HTTP-Aufrufe
- **Models**: Datenklassen und UI-States
### Beispiel Integration
```kotlin
@Composable
fun WebApp() {
// Verwendet die gemeinsame App-Komponente
// Diese enthält Material 3 Komponenten und ViewModels
App(baseUrl = "http://localhost:8081")
}
```
## 📊 Build-Artefakte
Nach dem Build werden folgende Dateien generiert:
```
build/dist/js/productionExecutable/
├── web-app.js # Hauptanwendung (minifiziert)
├── web-app.js.map # Source Maps
├── 731.js # Code Splitting Chunk
├── index.html # HTML Template
├── skiko.wasm # Compose Runtime (WebAssembly)
└── skiko.js # Compose JavaScript Runtime
```
## 🧪 Testing
### Entwicklungstests
```bash
# Backend-Konnektivität testen
# Öffne http://localhost:3000
# Klicke "Ping Backend" Button
```
### Build-Validierung
```bash
# Build ohne Ausführung testen
./gradlew :client:web-app:jsBrowserDevelopmentRun --dry-run
# Produktionsbuild testen
./gradlew :client:web-app:jsBrowserDistribution
```
## 📚 Weiterführende Dokumentation
- [Web-App Guideline](../../.junie/guidelines/web-app-guideline.md) - Architektur-Richtlinien
- [Docker README](../../README-DOCKER.md) - Container-Dokumentation
- [Compose for Web Docs](https://github.com/JetBrains/compose-multiplatform) - Offizielle Dokumentation
## 🔍 Troubleshooting
### Häufige Probleme
**Problem**: `Cannot connect to backend`
```bash
# Lösung: Backend Services starten
docker-compose -f docker-compose.yml -f docker-compose.services.yml up -d
```
**Problem**: `Module build failed`
```bash
# Lösung: Clean Build
./gradlew :client:web-app:clean :client:web-app:jsBrowserDevelopmentRun
```
**Problem**: `Port 3000 already in use`
```bash
# Lösung: Port in docker-compose.clients.yml ändern
ports:
- "3001:3000" # Externer Port ändern
```
### Logs und Debugging
```bash
# Container Logs anzeigen
docker logs meldestelle-web-app
# Build Logs mit Details
./gradlew :client:web-app:jsBrowserDevelopmentRun --info --stacktrace
```
---
**Letzte Aktualisierung**: 2025-09-10
**Version**: 1.0.0

57
client/web-app/build.gradle.kts Normal file
View File

@ -0,0 +1,57 @@
plugins {
kotlin("multiplatform")
id("org.jetbrains.compose")
id("org.jetbrains.kotlin.plugin.compose")
}
group = "at.mocode.client.web"
version = "1.0.0"
kotlin {
js(IR) {
browser {
commonWebpackConfig {
devServer = devServer?.copy(
port = 8080,
static = mutableListOf("src/jsMain/resources")
)
// Webpack optimization settings
configDirectory = project.projectDir.resolve("webpack.config.d")
}
webpackTask {
args.add("--devtool=source-map")
}
runTask {
args.add("--devtool=source-map")
}
// Add npm dependencies for webpack plugins
useCommonJs()
}
binaries.executable()
}
sourceSets {
val jsMain by getting {
dependencies {
// Compose for Web
implementation(compose.html.core)
implementation(compose.runtime)
// Common UI module (contains ViewModels and shared components)
implementation(project(":client:common-ui"))
// Coroutines for web
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.7.3")
}
}
val jsTest by getting {
dependencies {
implementation(kotlin("test-js"))
}
}
}
}

22
client/web-app/src/jsMain/kotlin/at/mocode/client/web/main.kt Normal file
View File

@ -0,0 +1,22 @@
package at.mocode.client.web
import androidx.compose.runtime.Composable
import at.mocode.client.ui.App
import org.jetbrains.compose.web.renderComposable
/**
* Entry point for the Compose for Web application.
* Follows the web-app guideline by using the shared App component from commonMain.
*/
fun main() {
renderComposable(rootElementId = "root") {
WebApp()
}
}
@Composable
fun WebApp() {
// Use the shared App component from commonMain
// This follows the guideline principle of maximum code reuse
App()
}

23
client/web-app/src/jsMain/resources/index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meldestelle</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}
#root {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>

37
client/web-app/webpack.config.d/compression.js Normal file
View File

@ -0,0 +1,37 @@
// Compression and module resolution optimizations
// Enhanced module resolution to reduce bundle size
config.resolve = config.resolve || {};
config.resolve.alias = config.resolve.alias || {};
// Resolve optimizations
config.resolve.modules = ['node_modules'];
config.resolve.extensions = ['.js', '.json', '.wasm'];
// Output optimizations
config.output = config.output || {};
config.output.pathinfo = false; // Disable path info in production for smaller bundles
// Module concatenation for better tree shaking
config.optimization = config.optimization || {};
config.optimization.concatenateModules = true;
// Enable scope hoisting for better performance
config.optimization.moduleIds = 'deterministic';
config.optimization.chunkIds = 'deterministic';
// Webpack production mode optimizations
if (config.mode === 'production') {
// Disable development features
config.devtool = false; // Disable source maps in production for smaller size
// Additional optimization flags
config.optimization.flagIncludedChunks = true;
config.optimization.mergeDuplicateChunks = true;
config.optimization.removeAvailableModules = true;
config.optimization.removeEmptyChunks = true;
// Aggressive dead code elimination
config.optimization.innerGraph = true;
config.optimization.mangleExports = true;
}

3
client/web-app/webpack.config.d/devserver.js Normal file
View File

@ -0,0 +1,3 @@
// Development server configuration
config.devServer = config.devServer || {};
config.devServer.historyApiFallback = true;

104
client/web-app/webpack.config.d/optimization.js Normal file
View File

@ -0,0 +1,104 @@
const path = require('path');
// Webpack optimization configuration for production builds
config.optimization = {
// Enable tree shaking and dead code elimination
usedExports: true,
sideEffects: false,
// Code splitting configuration optimized for Kotlin/JS
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 300000,
maxInitialRequests: 8, // Allow more initial requests for better caching
maxAsyncRequests: 15,
cacheGroups: {
// Kotlin standard library - separate chunk
kotlinStdlib: {
test: /kotlin-kotlin-stdlib/,
name: 'kotlin-stdlib',
chunks: 'all',
enforce: true,
priority: 30,
reuseExistingChunk: true,
},
// Coroutines - separate chunk
coroutines: {
test: /kotlinx-coroutines/,
name: 'coroutines',
chunks: 'all',
enforce: true,
priority: 25,
reuseExistingChunk: true,
},
// Compose runtime - separate chunk
composeRuntime: {
test: /compose.*runtime/,
name: 'compose-runtime',
chunks: 'all',
enforce: true,
priority: 20,
reuseExistingChunk: true,
},
// Large vendor libraries
largeVendors: {
test: /ktor|androidx-collection|kotlinx-serialization/,
name: 'large-vendors',
chunks: 'all',
enforce: true,
priority: 15,
reuseExistingChunk: true,
},
// Common vendors
vendors: {
test: /[\\/]kotlin[\\/]/,
name: 'vendors',
chunks: 'all',
priority: 10,
reuseExistingChunk: true,
},
// Application code
default: {
minChunks: 2,
priority: -10,
reuseExistingChunk: true,
},
},
},
// Minimize bundle size
minimize: true,
minimizer: [
// Use default TerserPlugin for JS minification
'...',
],
// Runtime chunk optimization
runtimeChunk: {
name: 'runtime',
},
};
// Performance budget adjusted for Kotlin/JS applications
// Note: Kotlin/JS apps require all dependencies loaded initially, so larger budgets are realistic
config.performance = {
maxAssetSize: 400000, // 400KB per asset (realistic for Kotlin libs)
maxEntrypointSize: 2000000, // 2MB total entry point (realistic for Kotlin/JS + Compose)
hints: 'warning',
assetFilter: function(assetFilename) {
// Only check JS files for performance
return assetFilename.endsWith('.js');
},
};
// Production-specific optimizations
if (config.mode === 'production') {
// Additional compression and optimizations
config.optimization.concatenateModules = true;
config.optimization.providedExports = true;
// More aggressive code splitting for production
config.optimization.splitChunks.maxInitialRequests = 10;
config.optimization.splitChunks.maxAsyncRequests = 10;
}

40
docker-compose.clients.yml
View File

@ -9,15 +9,15 @@
services:
# ===================================================================
# Web Application (Kotlin Multiplatform)
# Web Application (Compose for Web)
# ===================================================================
web-app:
build:
context: .
dockerfile: dockerfiles/clients/web-app/Dockerfile
args:
CLIENT_PATH: client/common-ui
CLIENT_MODULE: web-app
CLIENT_PATH: client/web-app
CLIENT_MODULE: client:web-app
CLIENT_NAME: meldestelle-web-app
container_name: meldestelle-web-app
environment:
@ -47,40 +47,6 @@ services:
- "traefik.http.routers.web-app.rule=Host(`localhost`) && PathPrefix(`/`)"
- "traefik.http.services.web-app.loadbalancer.server.port=3000"
# ===================================================================
# KobWeb Application (Kotlin/KobWeb)
# ===================================================================
kobweb-app:
build:
context: .
dockerfile: dockerfiles/clients/kobweb-app/Dockerfile
args:
CLIENT_PATH: client/kobweb-app
CLIENT_MODULE: client:kobweb-app
container_name: meldestelle-kobweb-app
environment:
NODE_ENV: ${NODE_ENV:-production}
API_BASE_URL: http://api-gateway:${GATEWAY_PORT:-8081}
WS_URL: ws://api-gateway:${GATEWAY_PORT:-8081}/ws
APP_TITLE: ${APP_NAME:-Meldestelle KobWeb}
APP_VERSION: ${APP_VERSION:-1.0.0}
ports:
- "3001:80"
depends_on:
- api-gateway
networks:
- meldestelle-network
healthcheck:
test: ["CMD", "curl", "--fail", "http://localhost/health"]
interval: 30s
timeout: 10s
retries: 3
start_period: 60s
restart: unless-stopped
labels:
- "traefik.enable=true"
- "traefik.http.routers.kobweb-app.rule=Host(`localhost`) && PathPrefix(`/kobweb`)"
- "traefik.http.services.kobweb-app.loadbalancer.server.port=80"
# ===================================================================
# Auth Server (Custom Keycloak Extension)

127
dockerfiles/clients/kobweb-app/Dockerfile
View File

@ -1,127 +0,0 @@
# ===================================================================
# Dockerfile for Meldestelle KobWeb Application
# Builds Kotlin/JS (KobWeb) client and serves via Nginx
# ===================================================================
# Build arguments
ARG GRADLE_VERSION=8.14
ARG JAVA_VERSION=21
ARG NGINX_VERSION=alpine
ARG NODE_VERSION=20.11.0
# Client-specific build arguments
ARG CLIENT_PATH=client/kobweb-app
ARG CLIENT_MODULE=client:kobweb-app
# ===================================================================
# Build Stage - Kotlin/JS (KobWeb) Compilation
# ===================================================================
FROM gradle:${GRADLE_VERSION}-jdk${JAVA_VERSION}-alpine AS kotlin-builder
ARG CLIENT_PATH=client/kobweb-app
ARG CLIENT_MODULE=client:kobweb-app
ARG NODE_VERSION=20.11.0
LABEL stage=kotlin-builder
LABEL service=kobweb-app
LABEL maintainer="Meldestelle Development Team"
WORKDIR /workspace
# Install specific Node.js version for Kotlin/JS compatibility
RUN apk add --no-cache wget ca-certificates && \
wget -q -O - https://unofficial-builds.nodejs.org/download/release/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64-musl.tar.xz | \
tar -xJ -C /usr/local --strip-components=1 && \
apk del wget ca-certificates && \
rm -rf /var/cache/apk/* && \
npm config set cache /tmp/.npm-cache && \
npm config set progress false && \
npm config set audit false
# Gradle optimizations
ENV GRADLE_OPTS="-Dorg.gradle.caching=true \
-Dorg.gradle.daemon=false \
-Dorg.gradle.parallel=true \
-Dorg.gradle.configureondemand=true \
-Dorg.gradle.jvmargs=-Xmx3g \
-Dkotlin.compiler.execution.strategy=in-process"
# Kotlin/JS and Node.js environment variables
ENV NODE_OPTIONS="--max-old-space-size=4096" \
NPM_CONFIG_CACHE="/tmp/.npm-cache" \
KOTLIN_JS_GENERATE_EXTERNALS=false
# Copy build configuration first
COPY gradlew gradlew.bat gradle.properties settings.gradle.kts ./
COPY gradle/ gradle/
COPY build.gradle.kts ./
# Copy platform and core dependencies
COPY platform/ platform/
COPY core/ core/
# Copy client modules in dependency order
COPY client/common-ui/ client/common-ui/
COPY ${CLIENT_PATH}/ ${CLIENT_PATH}/
# Clear npm cache and verify Node.js
RUN npm cache clean --force && \
node --version && npm --version
# Warm up dependencies
RUN ./gradlew :${CLIENT_MODULE}:dependencies --no-daemon --info --stacktrace || true
# Build production bundle. For KobWeb projects, jsBrowserProductionWebpack produces static assets
RUN ./gradlew :${CLIENT_MODULE}:jsBrowserProductionWebpack --no-daemon --info --stacktrace
# Verify build output
RUN ls -la /workspace/${CLIENT_PATH}/build/dist/ || (echo "Build failed - no dist directory found" && exit 1)
# ===================================================================
# Production Stage - Nginx serving static assets
# ===================================================================
FROM nginx:${NGINX_VERSION} AS runtime
ARG CLIENT_PATH=client/kobweb-app
ARG GRADLE_VERSION=8.14
ARG JAVA_VERSION=21
ARG NGINX_VERSION=alpine
LABEL service="kobweb-app" \
version="1.0.0" \
description="Meldestelle KobWeb Application" \
maintainer="Meldestelle Development Team" \
build.gradle.version="${GRADLE_VERSION}" \
java.version="${JAVA_VERSION}" \
nginx.version="${NGINX_VERSION}"
RUN apk update && \
apk upgrade && \
apk add --no-cache curl && \
rm -rf /var/cache/apk/*
# Clean default content
RUN rm -rf /usr/share/nginx/html/* && \
rm -f /var/log/nginx/*.log
# Copy built web application
COPY --from=kotlin-builder /workspace/${CLIENT_PATH}/build/dist/ /usr/share/nginx/html/
# Provide a minimal nginx config if none in project (fallback)
# Try to copy project-specific nginx.conf if available
# We use a small trick: copy will fail if file missing, so we create a basic one beforehand
RUN printf "user nginx;\nworker_processes auto;\nerror_log /var/log/nginx/error.log warn;\npid /var/run/nginx.pid;\n\n events { worker_connections 1024; }\n http {\n include /etc/nginx/mime.types;\n default_type application/octet-stream;\n sendfile on;\n keepalive_timeout 65;\n server {\n listen 80;\n server_name _;\n root /usr/share/nginx/html;\n location /health { return 200 'OK'; add_header Content-Type text/plain; }\n location / { try_files $uri $uri/ /index.html; }\n }\n }\n" > /etc/nginx/nginx.conf
# Permissions
RUN chown -R nginx:nginx /usr/share/nginx/html /var/cache/nginx /var/run /var/log/nginx && \
chmod -R 755 /usr/share/nginx/html
USER nginx
HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
CMD curl -f http://localhost/health || exit 1
EXPOSE 80
STOPSIGNAL SIGQUIT
CMD ["sh", "-c", "nginx -t && exec nginx -g 'daemon off;'"]

206
dockerfiles/clients/web-app/Dockerfile
View File

@ -1,169 +1,113 @@
# ===================================================================
# Dockerfile for Meldestelle Web Application
# Based on kotlin-multiplatform-web template
# ===================================================================
# Multi-stage build for Meldestelle Compose for Web Application
# Builds Kotlin/JS (Compose for Web) client and serves via Nginx
# Build arguments
ARG GRADLE_VERSION=8.14
ARG JAVA_VERSION=21
ARG NGINX_VERSION=alpine
ARG NODE_VERSION=20.11.0
# ===================================================================
# Arguments (can be overridden during build)
# ===================================================================
ARG JVM_VERSION=21
ARG GRADLE_VERSION=8.10
ARG NODE_VERSION=18
ARG NGINX_VERSION=1.25-alpine
# Client-specific build arguments (parametrized for better maintainability)
# ===================================================================
# Build Arguments for Client Configuration
# ===================================================================
ARG CLIENT_PATH=client/web-app
ARG CLIENT_MODULE=client:web-app
# ===================================================================
# Build Stage - Kotlin/JS Compilation
# Build Stage - Kotlin/JS (Compose for Web) Compilation
# ===================================================================
FROM gradle:${GRADLE_VERSION}-jdk${JAVA_VERSION}-alpine AS kotlin-builder
FROM gradle:${GRADLE_VERSION}-jdk${JVM_VERSION} AS builder
# Re-declare build arguments for kotlin-builder stage
ARG CLIENT_PATH=client/web-app
ARG CLIENT_MODULE=client:web-app
ARG NODE_VERSION=20.11.0
LABEL stage=kotlin-builder
# Set working directory
WORKDIR /build
# Set build labels
LABEL service=web-app
LABEL maintainer="Meldestelle Development Team"
LABEL stage=build
WORKDIR /workspace
# Install specific Node.js version for Kotlin/JS compatibility
RUN apk add --no-cache wget ca-certificates && \
wget -q -O - https://unofficial-builds.nodejs.org/download/release/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64-musl.tar.xz | \
tar -xJ -C /usr/local --strip-components=1 && \
apk del wget ca-certificates && \
rm -rf /var/cache/apk/* && \
npm config set cache /tmp/.npm-cache && \
npm config set progress false && \
npm config set audit false
# Gradle optimizations for Kotlin Multiplatform builds
ENV GRADLE_OPTS="-Dorg.gradle.caching=true \
-Dorg.gradle.daemon=false \
-Dorg.gradle.parallel=true \
-Dorg.gradle.configureondemand=true \
-Dorg.gradle.jvmargs=-Xmx3g \
-Dkotlin.compiler.execution.strategy=in-process"
# Kotlin/JS and Node.js environment variables
ENV NODE_OPTIONS="--max-old-space-size=4096" \
NPM_CONFIG_CACHE="/tmp/.npm-cache" \
KOTLIN_JS_GENERATE_EXTERNALS=false
# Copy build configuration files first for optimal Docker layer caching
COPY gradlew gradlew.bat gradle.properties settings.gradle.kts ./
# Copy Gradle files first for better layer caching
COPY gradle/ gradle/
COPY gradlew gradlew.bat gradle.properties settings.gradle.kts ./
COPY build.gradle.kts ./
# Copy platform and core dependencies (changes less frequently)
COPY platform/ platform/
# Copy version catalog
COPY gradle/libs.versions.toml gradle/libs.versions.toml
# Copy all source files needed for the build
# Core and platform modules (dependencies)
COPY core/ core/
COPY platform/ platform/
# Copy client modules in dependency order for optimal caching
COPY client/common-ui/ client/common-ui/
COPY ${CLIENT_PATH}/ ${CLIENT_PATH}/
# Infrastructure modules (if needed)
COPY infrastructure/ infrastructure/
# Clear npm cache and verify Node.js installation
RUN npm cache clean --force && \
node --version && npm --version
# Client modules
COPY client/ client/
# Download and cache dependencies in a separate layer
RUN ./gradlew :${CLIENT_MODULE}:dependencies --no-daemon --info --stacktrace
# Copy any additional required directories
COPY temp/ temp/
COPY docs/ docs/
# Build web application with production optimizations and better error handling
RUN ./gradlew :${CLIENT_MODULE}:jsBrowserProductionWebpack --no-daemon --info --stacktrace --debug
# Install Node.js for JavaScript toolchain
RUN apt-get update && \
apt-get install -y curl && \
curl -fsSL https://deb.nodesource.com/setup_${NODE_VERSION}.x | bash - && \
apt-get install -y nodejs
# Verify build output
RUN ls -la /workspace/${CLIENT_PATH}/build/dist/ || (echo "Build failed - no dist directory found" && exit 1)
# Make Gradle wrapper executable
RUN chmod +x gradlew
# Build client application
# For Compose for Web projects, jsBrowserDistribution produces static assets
RUN echo "Building ${CLIENT_MODULE} module..." && \
./gradlew ${CLIENT_MODULE}:jsBrowserDistribution --no-daemon --stacktrace --info
# ===================================================================
# Production Stage - Nginx serving
# Production Stage - Nginx Static File Server
# ===================================================================
FROM nginx:${NGINX_VERSION} AS runtime
FROM nginx:${NGINX_VERSION} AS production
# Re-declare build arguments for runtime stage
ARG CLIENT_PATH=client/web-app
ARG CLIENT_MODULE=client:web-app
ARG GRADLE_VERSION=8.14
ARG JAVA_VERSION=21
ARG NGINX_VERSION=alpine
# Comprehensive metadata
# Set production labels
LABEL service="web-app" \
version="1.0.0" \
description="Meldestelle Web Application - Kotlin Multiplatform Client" \
maintainer="Meldestelle Development Team" \
build.gradle.version="${GRADLE_VERSION}" \
java.version="${JAVA_VERSION}" \
nginx.version="${NGINX_VERSION}"
environment="production" \
description="Meldestelle Compose for Web Application"
# Security and system setup
RUN apk update && \
apk upgrade && \
apk add --no-cache curl jq && \
rm -rf /var/cache/apk/*
# Create nginx user if not exists and set permissions
RUN addgroup -g 1001 -S nginx-group && \
adduser -S -D -H -u 1001 -h /var/cache/nginx -s /sbin/nologin -G nginx-group -g nginx nginx-user
# Remove default nginx content and logs
RUN rm -rf /usr/share/nginx/html/* && \
rm -f /var/log/nginx/*.log
# Copy built distribution files from builder stage
COPY --from=builder /build/${CLIENT_PATH}/build/dist/js/productionExecutable/ /usr/share/nginx/html/
COPY --from=builder /build/${CLIENT_PATH}/src/jsMain/resources/ /usr/share/nginx/html/
# Copy built web application from builder stage
COPY --from=kotlin-builder /workspace/${CLIENT_PATH}/build/dist/ /usr/share/nginx/html/
# Copy custom nginx configuration
COPY dockerfiles/clients/web-app/nginx.conf /etc/nginx/nginx.conf
# Copy optimized nginx configuration
COPY ${CLIENT_PATH}/nginx.conf /etc/nginx/nginx.conf
# Create log directories and set permissions
RUN mkdir -p /var/log/nginx && \
chown -R nginx-user:nginx-group /var/log/nginx && \
chown -R nginx-user:nginx-group /var/cache/nginx && \
chown -R nginx-user:nginx-group /usr/share/nginx/html
# Set proper permissions for nginx
RUN chown -R nginx:nginx /usr/share/nginx/html /var/cache/nginx /var/run /var/log/nginx && \
chmod -R 755 /usr/share/nginx/html
# Health check endpoint
RUN echo '{"status":"ok","service":"web-app"}' > /usr/share/nginx/html/health
# Switch to nginx user for security
USER nginx
# Switch to non-root user
USER nginx-user
# Health check specifically for the web application
HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
CMD curl -f http://localhost/health || exit 1
# Expose port
EXPOSE 3000
# Expose HTTP port
EXPOSE 80
# Health check
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
CMD curl --fail http://localhost:3000/health || exit 1
# Start nginx with proper signal handling for graceful shutdowns
STOPSIGNAL SIGQUIT
# Run nginx in foreground with error handling
CMD ["sh", "-c", "nginx -t && exec nginx -g 'daemon off;'"]
# ===================================================================
# Build and Usage Instructions
# ===================================================================
# Build with default parameters:
# docker build -t meldestelle/web-app:latest -f dockerfiles/clients/web-app/Dockerfile .
#
# Build with custom parameters:
# docker build -t meldestelle/web-app:latest \
# --build-arg NODE_VERSION=20.11.0 \
# --build-arg CLIENT_PATH=client/web-app \
# --build-arg CLIENT_MODULE=client:web-app \
# -f dockerfiles/clients/web-app/Dockerfile .
#
# Run standalone:
# docker run -p 3001:80 --name web-app meldestelle/web-app:latest
#
# Run with API backend:
# docker run -p 3001:80 --link api-gateway:api-gateway --name web-app meldestelle/web-app:latest
#
# Access application:
# http://localhost:3001
# http://localhost:3001/health (health check)
#
# Development with hot-reload (use docker-compose.override.yml instead)
#
# Optimization improvements:
# - Added Node.js v20.11.0 for optimal Kotlin/JS compatibility
# - Parametrized build arguments for better maintainability
# - Enhanced npm and Node.js environment variables
# - Improved error handling with --stacktrace and --debug flags
# - npm cache management for better performance
# ===================================================================
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

99
dockerfiles/clients/web-app/nginx.conf Normal file
View File

@ -0,0 +1,99 @@
user nginx-user;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /tmp/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4096;
# Gzip Settings
gzip on;
gzip_vary on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private must-revalidate auth;
gzip_types
text/plain
text/css
text/xml
text/javascript
application/javascript
application/xml+rss
application/json
image/svg+xml;
# Security Headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
server {
listen 3000;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Main application route
location / {
try_files $uri $uri/ /index.html;
# Cache static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Source maps - no cache for development
location ~* \.map$ {
expires off;
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
}
# Handle webpack development paths (return 404 gracefully)
location ~* ^/webpack:// {
return 404;
}
# Health check endpoint
location /health {
access_log off;
return 200 '{"status":"ok","service":"web-app"}\n';
add_header Content-Type application/json;
}
# API proxy (if needed for backend communication)
location /api/ {
proxy_pass http://api-gateway:8081/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# Error pages
error_page 404 /index.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}

857
kotlin-js-store/yarn.lock
View File

File diff suppressed because it is too large Load Diff

1
settings.gradle.kts
View File

@ -61,6 +61,7 @@ include(":temp:ping-service")
include(":client:common-ui")
// kobweb-app is now an independent build with its own Gradle wrapper (8.14.2). See client/kobweb-app/README.md for details.
//include(":client:kobweb-app")
include(":client:web-app")
include(":client:desktop-app")
// Documentation module