Dynamic Websites with Htmx + WebComponents + Kotlinx.Html

This is the demo code for the talk on "Dynamic Websites with Htmx, WebComponents, and Kotlinx."

Features

• Htmx

  • HxBoost for Tabs

  • ActiveSearch for products table

• Web Components

  • Github’s Relative-Time Element

• Kotlinx.Html

• Spring Boot

  • Spring Validation

  • Spring Security

  • Spring Security Test

  • Custom Argument Resolver

• IntelliJ Language Injections

Preconditions

• Install the java version from .sdkmanrc via SdkMan by calling sdk env

• Install the node version from assets/.nvmrc via fnm (or nvm]) by calling fnm use

Usage

• Build and move .js files to src/main/resources/public via cd assets && npm ci && npm run dist

• Run server via ./gradlew bootRun and open localhost:8080.

• Run tests via ./gradlew test

LiveReload / Restart

LiveReload is great for fast iteration. It’ll restart spring and refresh your browser window for changes.

To use it:

1. Make sure you have the LiveReload extension installed in Firefox/Chrome

2. Remap Build Project to ⌘S for convenience

3. Run your application via IntelliJ ./gradlew bootRun

4. Open the site in your browser

5. If the LiveReload Extension symbol in your browser shows "connected", then your browser will refresh on changes

6. Press ⌘S every time you make changes. It’ll be faster than waiting for the dev tools to detect the changes.