swanadiva
a0c8483c0e
- New ARCHITECTURE_HTMX.md — comprehensive HTMX architecture doc - ARCHITECTURE.md — updated to point to HTMX version - UI_COMPONENTS.md — replaced React tree with HTMX partials - SPRINT_PLAN.md — all sprint tasks updated for HTMX - BUILD_SYSTEM.md — simplified (no Vite, no npm) - TIMELINE.md — 3.5 week HTMX timeline - PROGRESS.md — updated status + HTMX - AGENTS.md — updated checkpoint with HTMX decision
184 lines
4.4 KiB
Markdown
184 lines
4.4 KiB
Markdown
# Hostkeeper V2 — Build System
|
|
|
|
> **Status**: Updated untuk HTMX
|
|
> **Last Updated**: 2026-07-07
|
|
> **Frontend**: Go HTML template + HTMX + TailwindCSS v4 (tanpa Vite/npm/React)
|
|
|
|
---
|
|
|
|
## 1. Build Overview
|
|
|
|
Hostkeeper V2 adalah **single Go binary** yang melayani HTML + static files.
|
|
|
|
| Platform | Output | Wrapper | Backend |
|
|
|----------|--------|---------|---------|
|
|
| macOS (ARM64) | `.dmg` | Electron (opsional) | Go binary |
|
|
| macOS (x64) | `.dmg` | Electron (opsional) | Go binary |
|
|
| Windows (x64) | `.exe` installer | Electron (opsional) | Go binary |
|
|
| Linux (x64) | `.AppImage` | Electron (opsional) | Go binary |
|
|
| Android (ARM64) | `.aab` | WebView | Go library (.aar) |
|
|
| iOS (ARM64) | `.ipa` | WKWebView | Go framework (.xcframework) |
|
|
|
|
**Catatan**: Tanpa Electron app tetap bisa jalan — tinggal buka `http://localhost:1947` di browser.
|
|
|
|
---
|
|
|
|
## 2. Build Pipeline
|
|
|
|
```
|
|
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
|
|
│ TailwindCSS │ │ Go Build │ │ Platform │
|
|
│ Build │ → │ (single │ → │ Package │
|
|
│ (CSS) │ │ binary) │ │ (opsional) │
|
|
└──────────────┘ └──────────────┘ └──────────────┘
|
|
```
|
|
|
|
### Step 1: CSS Build
|
|
|
|
```bash
|
|
# TailwindCSS v4 — input.css → output.css
|
|
npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css
|
|
|
|
# Atau via Makefile
|
|
make css
|
|
```
|
|
|
|
### Step 2: Go Build
|
|
|
|
```bash
|
|
# Development (hot reload via air)
|
|
go run .
|
|
|
|
# Production (single binary with embedded static)
|
|
CGO_ENABLED=0 go build -ldflags="-s -w" -o dist/hostkeeper .
|
|
|
|
# Cross-compile
|
|
CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -o dist/hostkeeper-darwin-arm64 .
|
|
CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o dist/hostkeeper-linux-amd64 .
|
|
CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -o dist/hostkeeper-windows-amd64.exe .
|
|
```
|
|
|
|
### Step 3: Elektron Package (Opsional)
|
|
|
|
```bash
|
|
cd app/electron
|
|
npm install
|
|
npm run build # produces .dmg / .exe / .AppImage
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Development Workflow
|
|
|
|
```bash
|
|
# Terminal 1: Go backend (dengan hot reload)
|
|
cd app/backend
|
|
go run .
|
|
|
|
# Terminal 2: CSS watch
|
|
cd app/backend
|
|
npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css --watch
|
|
|
|
# Buka browser
|
|
open http://localhost:1947
|
|
```
|
|
|
|
### Hot Reload Tools
|
|
|
|
```bash
|
|
# Install air
|
|
go install github.com/air-verse/air@latest
|
|
|
|
# Run
|
|
air
|
|
```
|
|
|
|
---
|
|
|
|
## 4. Struktur Build Output
|
|
|
|
```
|
|
dist/
|
|
├── hostkeeper ← Go binary (single file)
|
|
├── static/ ← Embedded static assets
|
|
│ ├── css/
|
|
│ ├── js/
|
|
│ ├── xterm/
|
|
│ └── img/
|
|
└── views/ ← Embedded HTML templates
|
|
├── layout.html
|
|
└── partials/
|
|
```
|
|
|
|
GoFiber `embed` package untuk embed static + views:
|
|
|
|
```go
|
|
//go:embed static/* views/*
|
|
var embedFS embed.FS
|
|
|
|
func main() {
|
|
app := fiber.New()
|
|
app.Static("/static", "./static")
|
|
engine := html.NewFileSystem(http.FS(embedFS), ".html")
|
|
app.Settings.Views = engine
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Dependencies
|
|
|
|
### Go
|
|
|
|
```
|
|
github.com/gofiber/fiber/v2
|
|
github.com/gofiber/contrib/websocket
|
|
github.com/gofiber/template/html/v2
|
|
github.com/fasthttp/websocket
|
|
```
|
|
|
|
### JavaScript (static files — download, bukan npm)
|
|
|
|
```
|
|
static/js/htmx.min.js ← https://unpkg.com/htmx.org@2
|
|
static/js/alpine.min.js ← https://cdn.jsdelivr.net/npm/alpinejs@3
|
|
static/xterm/xterm.js ← https://unpkg.com/@xterm/xterm
|
|
static/xterm/xterm.css ← https://unpkg.com/@xterm/xterm/css
|
|
```
|
|
|
|
### CSS Tooling
|
|
|
|
```
|
|
@tailwindcss/cli ← npx, build time only
|
|
```
|
|
|
|
---
|
|
|
|
## 6. Makefile
|
|
|
|
```makefile
|
|
.PHONY: dev build css clean
|
|
|
|
dev:
|
|
@echo "Starting dev server..."
|
|
@go run .
|
|
|
|
css:
|
|
npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css
|
|
|
|
css-watch:
|
|
npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css --watch
|
|
|
|
build:
|
|
CGO_ENABLED=0 go build -ldflags="-s -w" -o dist/hostkeeper .
|
|
|
|
build-all:
|
|
GOOS=darwin GOARCH=arm64 go build -o dist/hostkeeper-darwin-arm64 .
|
|
GOOS=darwin GOARCH=amd64 go build -o dist/hostkeeper-darwin-amd64 .
|
|
GOOS=linux GOARCH=amd64 go build -o dist/hostkeeper-linux-amd64 .
|
|
GOOS=windows GOARCH=amd64 go build -o dist/hostkeeper-windows-amd64.exe .
|
|
|
|
clean:
|
|
rm -rf dist/
|
|
```
|