Bun, Hono, TailwindCSS, JSX: Eine tolle Kombination!

96ca5227@cbrueggenolte.de (cbrueggenolte.de) — Thu, 01 May 2025 00:00:00 +0200

Einleitung

Ich hänge immer noch ein wenig im Bootcamp hinterher. Da ich die Aufgaben aber nicht schleifen lassen will, habe ich mir gestern einen kleinen Plan aufgestellt, um mein Projekt zu pushen: Es soll ein einfacher Filament-Manager werden, mit dem ich meine Spulen und deren Eigenschaften verwalten kann.

Da ich das nicht mit Astro, sondern mit Bun, Hono und TailwindCSS umsetzen möchte, stellte sich die Frage:

Wie kann ich TailwindCSS in mein Projekt integrieren? Für viele Frameworks gibt es entsprechende Plugins – aber für Bun und Hono leider nicht. Nach langem Suchen und Ausprobieren habe ich aber endlich eine Lösung gefunden!

Projekt-Setup mit Bun & Hono

Als Erstes legen wir ein hono-Projekt mit bun an:

1bun create hono@latest my-project
2cd my-project

Wir erstellen eine Startseite für die spätere Filamentübersicht. Lege den Ordner src/routes an, falls er noch nicht existiert, und erstelle darin die Datei index.ts. Trage dort den folgenden Code ein:

 1// src/routes/index.ts
 2import { Hono } from 'hono';
 3
 4const route = new Hono();
 5
 6route.get('/', (c) => {
 7  return c.text('🎉 Hello from your Filament Manager!****');
 8});
 9
10export default route;

Anschließend binden wir diese Route in unsere neue Datei src/app.ts ein. Diese Datei wird die zentrale Stelle sein, an der wir unsere Hono-App starten. Lege sie an (falls sie noch nicht existiert), und füge folgenden Code ein:

1// src/app.ts
2import { Hono } from 'hono';
3import indexRoute from './routes/index';
4
5const app = new Hono();
6
7app.route('/', indexRoute);
8
9export default app;

Zum Schluss starten wir den Server. Öffne die Datei src/index.ts und ersetze den bisherigen Inhalt vollständig durch den folgenden Code:

 1// src/index.ts
 2import app from './app';
 3
 4const port = process.env.PORT || 3000;
 5
 6console.log(`Server is running on http://localhost:${port}`);
 7Bun.serve({
 8  port,
 9  fetch: app.fetch,
10});

Starte den Server mit folgendem Befehl in einem Terminal:

1bun run dev

Wenn alles richtig eingerichtet ist, erreichst du die Startseite unter http://localhost:3000 in deinem Browser.

:::tip Da wir das Terminal gleich wieder brauchen, stoppen wir den Server mit Ctrl + C. :::

TailwindCSS integrieren

Jetzt kümmern wir uns um die Integration von TailwindCSS.

Installiere zuerst die nötigen Pakete als Entwicklungsabhängigkeiten:

1bun add -D tailwindcss @tailwindcss/cli

Erstelle nun das Verzeichnis src/styles (falls es noch nicht existiert) und eine Datei namens global.css und füge folgenden Inhalt ein:

1/* src/styles/global.css */
2@import "tailwindcss";

Da es derzeit keine offiziellen Plugins für Bun + Hono gibt, müssen wir die CSS-Datei selbst kompilieren. Führe dazu im Terminal folgenden Befehl aus:

1bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch

:::note Damit wird Tailwind verarbeitet und die fertige CSS-Datei unter ./public/output.css gespeichert. Der --watch-Modus sorgt dafür, dass Änderungen an deiner CSS-Datei oder deinem Projekt automatisch neu kompiliert werden. Du kannst ihn jederzeit mit Ctrl + C beenden. :::

HTML-Template einbinden

Jetzt, da wir unsere output.css im public-Ordner haben, können wir ein HTML-Template erstellen und in unsere Hono-App integrieren.

Lege im Verzeichnis src/templates eine Datei mit dem Namen layout.tsx an. Falls der Ordner templates noch nicht existiert, erstelle ihn zuerst.

Füge dann folgenden Code ein:

 1// src/templates/layout.tsx
 2export const Layout = ({ children }: { children: string }) => {
 3  return `
 4    
 5    
 6      
 7        
 8        
 9        Filament Manager
10        
11      
12      
13        
14          ${children}
15        
16      
17    
18  `;
19};

:::note Das Template ist eine Funktion, die ein vollständiges HTML-Dokument als String zurückgibt. Das Platzhalterfeld ${children} wird später mit dem eigentlichen Seiteninhalt ersetzt. :::

Jetzt passen wir unsere Startseite an, damit sie das HTML-Template verwendet.

Öffne die Datei src/routes/index.ts und ersetze ihren Inhalt durch:

 1// src/routes/index.ts
 2import { Hono } from 'hono';
 3import { Layout } from '../templates/layout';
 4
 5const route = new Hono();
 6
 7route.get('/', (c) => {
 8  const content = `
 9    🎨 Filament Manager
10    Hier verwalten wir bald unsere Filamente.
11  `;
12  return c.html(Layout({ children: content }));
13});
14
15export default route;

:::note Damit wird deine Startseite jetzt mit dem Template layout.tsx gerendert. Der HTML-Inhalt in der Variable content wird automatisch an der Stelle ${children} eingefügt. :::

Statische Dateien bereitstellen

Damit die Datei output.css im Browser geladen werden kann, muss Hono den Ordner /public freigeben. Das erreichen wir mit der Middleware serveStatic:

1app.use('/public/*', serveStatic({ root: './' }));

Füge diese Zeile in src/app.ts ein – zwischen der App-Initialisierung und dem Routing. Oder ersetze den gesamten Inhalt der Datei src/app.ts durch den folgenden Code:

 1// src/app.ts
 2import { Hono } from 'hono';
 3import { serveStatic } from 'hono/bun';
 4import indexRoute from './routes/index';
 5
 6const app = new Hono();
 7
 8// Statische Dateien wie /public/output.css bereitstellen
 9app.use('/public/*', serveStatic({ root: './' }));
10
11app.route('/', indexRoute);
12
13export default app;

Die Middleware sorgt dafür, dass der Browser statische Dateien aus dem public-Verzeichnis laden kann – zum Beispiel die Datei output.css.

Starte nun den Server erneut (ggf. in einem zweiten Terminalfenster) mit:

1bun run dev

:::tip Falls du den TailwindCSS-Compiler vorher gestoppt hast (z. B. mit Ctrl + C), starte ihn jetzt erneut – sonst wird die eingebundene Datei output.css nicht aktualisiert.

Verwende dazu denselben Befehl wie zuvor:

1bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch

Am besten lässt du den Compiler dauerhaft in einem separaten Terminalfenster laufen, während du am Projekt arbeitest. :::

Wenn alles funktioniert, wird die Startseite unter http://localhost:3000 angezeigt – diesmal mit TailwindCSS-Styling.

Deine Version ist bereits sehr gut – klar strukturiert, technisch korrekt und stilistisch passend zum Blog. Ich habe sie jetzt nur leicht sprachlich geglättet und einen durchgehenden, natürlichen Lesefluss hergestellt. Hier die überarbeitete Fassung:

Dev-Workflow verbessern

Damit du nicht ständig zwei Terminals gleichzeitig offen haben musst, eines für Hono und eines für Tailwind, kannst du deinen Workflow etwas bequemer gestalten.

Wir verwenden das Tool concurrently, um beide Prozesse parallel zu starten:

1bun add -D concurrently

Zunächst kannst du den folgenden dev-Befehl in deiner package.json unter "scripts" ergänzen:

1"scripts": {
2  "dev": "concurrently 'bun run --hot src/index.ts' 'bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch'"
3}

Wenn du möchtest, kannst du den Prozessen zusätzlich Namen und Farben zuweisen – das macht die Terminalausgabe übersichtlicher:

1"scripts": {
2  "dev": "concurrently --names 'server,styles' --prefix-colors 'yellow,blue'  'bun run --hot src/index.ts' 'bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch'"
3}

Statt alle Befehle in eine lange und schwer lesbare Zeile zu packen, kannst du das Ganze noch besser strukturieren, indem du zwei separate Scripts anlegst: Eines für den Server, eines für Tailwind. Dann kombinierst du sie im dev-Befehl über concurrently:

1{
2  "scripts": {
3    "start:server": "bun run --hot src/index.ts",
4    "start:styles": "bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch",
5    "dev": "concurrently --names 'server,styles' --prefix-colors 'yellow,blue' 'npm run start:server' 'npm run start:styles'"
6  }
7}

:::note Vorteil: Du kannst bun run start:server und bun run start:styles auch separat ausführen – z. B. wenn du nur einen der beiden Prozesse debuggen möchtest. :::

Wenn du jetzt bun run dev ausführst, starten Hono-Server und Tailwind-Watcher gleichzeitig, farblich getrennt, sauber strukturiert, und mit einem einzigen Befehl.

Fazit

Und das war’s auch schon! Eigentlich gar nicht so schwer – aber für mich war es trotzdem eine kleine Herausforderung, weil ich mit Bun und Hono bisher noch wenig Erfahrung hatte.

Aber genau deshalb hat es sich gelohnt: Ich habe nicht nur die Tools kennengelernt, sondern gleich eine funktionierende Entwicklungsumgebung aufgebaut, mit TailwindCSS, HTML-Template und Live-Reloading.

Hono auf cbrueggenolte.de