Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danawoodman/bun-htmx
An example app using Bun's built-in HTTP server + HTMX + TailwindCSS + DaisyUI
https://github.com/danawoodman/bun-htmx
bun daisyui demo example htmx javascript node tailwind tailwindcss typescript
Last synced: 14 days ago
JSON representation
An example app using Bun's built-in HTTP server + HTMX + TailwindCSS + DaisyUI
- Host: GitHub
- URL: https://github.com/danawoodman/bun-htmx
- Owner: danawoodman
- Created: 2023-09-13T01:02:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-01T20:28:20.000Z (11 months ago)
- Last Synced: 2024-10-04T11:28:10.281Z (about 1 month ago)
- Topics: bun, daisyui, demo, example, htmx, javascript, node, tailwind, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://bun-htmx.fly.dev/
- Size: 52.7 KB
- Stars: 41
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bun + HTMX + TailwindCSS example app
A simple example app using Bun and it's HTML server along with HTMX for interactivity and Tailwind + DaisyUI for styling.
- [TypeScript](https://www.typescriptlang.org)
- [Bun](https://bun.sh)
- [HTMX](https://htmx.org)
- [Tailwind](https://tailwindcss.com)
- [DaisyUI](https://daisyui.com)
- [Docker](https://docker.com)
- [Fly.io](https://fly.io)
Source code can be found in `./src`. JSX components live in `./src/components`.
Components are converted to static strings and served as HTML to the browser. HTMX is used to add interactivity to the page as needed.
TailwindCSS classes can be given to any component and the `bun dev:tailwind` command will regenerate the CSS file when needed.
There is a very dumb/simple static file server in `./src/response.tsx` which takes any file in `./public` and serves it using the `Bun.file` helper. This probably shouldn't be used in any production capacity and instead you should use a static file server for these files, but it's here for demonstration purposes.
## Setup
Clone the repo and make sure you have Bun installed, then:
```sh
bun i
```
## Development
```sh
# Run dev server with hot reload (in one tab)
bun dev:server
# Run production server (in another tab)
bun dev:tailwind
```
Now open up to see the app running.
If you want a custom port or to enable dev mode, create a `.env` file:
```sh
PORT=3000
NODE_ENV="development"
```
## Production
Build a compiled version of the server for running in Bun and TalwindCSS classes:
```sh
bun build:tailwind
bun build:server
```
Now run the built production bundle:
```sh
bun start
```
## Deployment
This projet includes a Dockerfile and docker-compose.yml file so you can run anywhere Docker is supported.
Using Fly.io, you can deploy this by running:
```sh
flyctl launch
```
On subsequent changes, run:
```sh
flyctl deploy
```
## Credits
Put together by me, [Dana Woodman](https://danawoodman.com).
## License
MIT
Use it however you please. [Tweet me](https://twitter.com/danawoodman) if you do something cool with it 🤓