Getting Started

Create a Project

To use fritz2, set up a Kotlin multiplatform-project using one of these options:

Setup Gradle Build

plugins {
    kotlin("multiplatform") version "2.0.20"
    // KSP support needed for Lens generation
    id("com.google.devtools.ksp") version "2.0.20-1.0.25"
}

repositories {
    mavenCentral()
}

val fritz2Version = "1.0-SNAPSHOT"

//group = "my.fritz2.app"
//version = "0.0.1-SNAPSHOT"

kotlin {
    jvm()
    js(IR) {
        browser()
    }.binaries.executable()

    sourceSets {
        commonMain {
            dependencies {
                implementation("dev.fritz2:core:$fritz2Version")
                // implementation("dev.fritz2:headless:$fritz2Version") // optional headless comp
            }
        }
        jvmMain {
            dependencies {
            }
        }
        jsMain {
            dependencies {
            }
        }
    }
}

// KSP support for Lens generation
dependencies.kspCommonMainMetadata("dev.fritz2:lenses-annotation-processor:$fritz2Version")
kotlin.sourceSets.commonMain { tasks.withType<KspTaskMetadata> { kotlin.srcDir(destinationDirectory) } }

Organize Your Code

When using the Kotlin Multiplatform project structure, we recommend organizing your code like this:

.
├── src
│   ├── commonMain
│   │   └── kotlin
│   │       └── <packages>
│   │           └── model.kt (common model for client (JS) and server (JVM))
│   └── jsMain
│       ├── kotlin
│       │   └── <packages>
│       │       └── app.kt  (contains main function)
│       └── resources
│           └── index.html  (starting point for your app)
├── build.gradle.kts  (dependencies and tasks)
└── settings.gradle.kts  (project name)

The index.html is just a normal web-page. Be sure to include the resulting script-file from your KotlinJS-build. You can mark an element of your choice with an id (or use the body by default) to later render your fritz2 tags to it:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
  </head>
  <body id="target">
    Loading...
    <script src="project-name.js"></script>
  </body>
</html>

app.kt is the starting point of your fritz2 app, so make sure it has a main-function. Inside main, create some content by opening a render context and mounting it to the DOM of your index.html:

fun main() {
    render("#target") { // using id selector here, leave blank to use document.body by default
        h1 { +"My App" }
        div("some-fix-css-class") {
            p(id = "someId") {
                +"Hello World!"
            }
        }
    }
}

running example in browser

Run the project by calling ./gradlew jsRun in your project's main directory. Add -t to enable automatic building and reloading in the browser after changing your code.

Pre-Release Builds

If you want to use the latest fritz2 snapshot-builds before we release them, add the following lines to your build.gradle.kts:

repositories {
    mavenCentral()
    maven("https://s01.oss.sonatype.org/content/repositories/snapshots/") // new repository here
}

val fritz2Version = "1.0-SNAPSHOT" // set the newer snapshot version here

If you encounter any problems with these snapshot-versions, please open an issue.

Edit this page on Github