React Templates & Themes Logo React Templates & Themes
Bun Htmx screenshot

Bun Htmx

Author Avatar Theme by Danawoodman
Updated: 13 Sep 2023
48 Stars

An example app using Bun's built-in HTTP server + HTMX + TailwindCSS + DaisyUI

Github Live Preview

Categories

Hono Tailwind Daisyui

Overview:

This product is a simple example app that utilizes several technologies including Bun, HTMX, TailwindCSS, and DaisyUI. It is built with TypeScript and serves components as static strings converted to HTML to the browser. The app also includes a static file server for demonstration purposes. The setup process involves cloning the repository, installing Bun, and running the app locally. The app can be deployed using Docker and Fly.io. The product is licensed under MIT.

Features:

  • Bun: an HTML server used to serve components as static HTML strings.
  • HTMX: used for adding interactivity to the app.
  • TailwindCSS: used for styling the app.
  • DaisyUI: an extension for TailwindCSS that adds additional components and utilities.
  • Static file server: included for serving static files in the app.
  • Docker deployment: includes a Dockerfile and docker-compose.yml file for deploying the app using Docker.
  • Fly.io integration: allows for easy deployment of the app using Fly.io.

Installation:

To install the theme, follow these steps:

  1. Clone the repository.
  2. Make sure you have Bun installed.
  3. Run the app locally by opening http://localhost:3000 in your browser.

If you want to customize the port or enable dev mode, create a .env file.

For production deployment, follow these steps:

  1. Build a compiled version of the server using Bun and TalwindCSS classes.
  2. Run the built production bundle.

For deployment using Docker and Fly.io, follow these steps:

  1. Make sure Docker is installed.
  2. Run the provided docker-compose.yml file to deploy the app using Fly.io.
  3. On subsequent changes, re-run the deployment command.

Summary:

The Bun + HTMX + TailwindCSS example app is a simple app that showcases the usage of these technologies. It provides a lightweight HTML server, interactivity with HTMX, and styling with TailwindCSS and DaisyUI. The app includes a static file server for demonstration purposes and can be deployed using Docker and Fly.io. Overall, this example app provides a comprehensive demonstration of how to use these technologies together.