Layer 0: Set up Mill module for dashboard with Vite + Tailwind + Web Awesome #345

New issue

Closed

opened 2026-04-15 08:43:16 +00:00 by mprihoda · 1 comment

mprihoda commented

2026-04-15 08:43:16 +00:00

(Migrated from github.com)

Layer: 0 — Build Infrastructure
Parent: #343

Problem

The current dashboard is compiled as part of core/ via scala-cli. To adopt a modern frontend stack (Vite + Tailwind CSS v4 + Web Awesome components), we need a proper build tool that can manage the frontend pipeline.

Solution

Create a Mill build in the repository with a dashboard module that depends on core types (either by compiling core/ source or depending on the pre-built iw-core.jar)
Set up Vite for frontend asset bundling (CSS, JS)
Set up Tailwind CSS v4 with @tailwindcss/vite plugin, scanning Scala source for class names via @source directive
Integrate Web Awesome components via scalatags-webawesome bridge (cherry-picked component imports in main.js)
Dashboard builds as a fat jar with Vite assets bundled as resources
Dev mode with Vite HMR support (similar to procedures project pattern)

Reference implementation

The procedures project (~/ops/procedures-PROC-274) has a working example of this stack:

dashboard-frontend/vite.config.js — Vite + Tailwind plugin
dashboard-frontend/src/main.js — Web Awesome component imports
dashboard-frontend/src/main.css — Tailwind with @source scanning Scala files
dashboard-jvm/src/content/HtmlTemplates.scala — Scalatags + Web Awesome tags
Server-side rendering with HTMX, no ScalaJS needed

Key decisions

Keep Cask as the HTTP server (it works, and migrating to Tapir/Netty is not required for this layer)
Move dashboard Scala source from core/dashboard/ to a dedicated dashboard/ module
The dashboard.scala and server-daemon.scala commands launch the built dashboard jar

New directory structure

iw-cli/
├── core/                        # model, adapters, output (scala-cli compiled)
├── build/
│   ├── iw-core.jar              # pre-compiled core
│   └── iw-dashboard.jar         # Mill-built dashboard with assets
├── dashboard/
│   ├── build.mill               # Mill module definition
│   ├── jvm/src/                  # Scala server code (moved from core/dashboard/)
│   └── frontend/
│       ├── vite.config.js
│       ├── package.json
│       ├── src/main.js           # Web Awesome imports
│       └── src/main.css          # Tailwind entry
├── commands/                     # scala-cli scripts (unchanged)
└── iw-run                        # launcher (unchanged)

**Layer:** 0 — Build Infrastructure **Parent:** #343 ## Problem The current dashboard is compiled as part of `core/` via scala-cli. To adopt a modern frontend stack (Vite + Tailwind CSS v4 + Web Awesome components), we need a proper build tool that can manage the frontend pipeline. ## Solution 1. **Create a Mill build** in the repository with a `dashboard` module that depends on core types (either by compiling `core/` source or depending on the pre-built `iw-core.jar`) 2. **Set up Vite** for frontend asset bundling (CSS, JS) 3. **Set up Tailwind CSS v4** with `@tailwindcss/vite` plugin, scanning Scala source for class names via `@source` directive 4. **Integrate Web Awesome** components via `scalatags-webawesome` bridge (cherry-picked component imports in `main.js`) 5. **Dashboard builds as a fat jar** with Vite assets bundled as resources 6. **Dev mode** with Vite HMR support (similar to procedures project pattern) ## Reference implementation The procedures project (`~/ops/procedures-PROC-274`) has a working example of this stack: - `dashboard-frontend/vite.config.js` — Vite + Tailwind plugin - `dashboard-frontend/src/main.js` — Web Awesome component imports - `dashboard-frontend/src/main.css` — Tailwind with `@source` scanning Scala files - `dashboard-jvm/src/content/HtmlTemplates.scala` — Scalatags + Web Awesome tags - Server-side rendering with HTMX, no ScalaJS needed ## Key decisions - Keep Cask as the HTTP server (it works, and migrating to Tapir/Netty is not required for this layer) - Move dashboard Scala source from `core/dashboard/` to a dedicated `dashboard/` module - The `dashboard.scala` and `server-daemon.scala` commands launch the built dashboard jar ## New directory structure ``` iw-cli/ ├── core/ # model, adapters, output (scala-cli compiled) ├── build/ │ ├── iw-core.jar # pre-compiled core │ └── iw-dashboard.jar # Mill-built dashboard with assets ├── dashboard/ │ ├── build.mill # Mill module definition │ ├── jvm/src/ # Scala server code (moved from core/dashboard/) │ └── frontend/ │ ├── vite.config.js │ ├── package.json │ ├── src/main.js # Web Awesome imports │ └── src/main.css # Tailwind entry ├── commands/ # scala-cli scripts (unchanged) └── iw-run # launcher (unchanged) ```

mprihoda commented

2026-06-24 08:18:05 +00:00

(Migrated from github.com)

Completed — merged in PR #370.