Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dctanner/htmljs-todo-example
https://github.com/dctanner/htmljs-todo-example
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dctanner/htmljs-todo-example
- Owner: dctanner
- Created: 2023-07-17T12:55:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-20T01:45:53.000Z (9 months ago)
- Last Synced: 2024-05-30T12:46:17.712Z (4 months ago)
- Language: CSS
- Size: 276 KB
- Stars: 116
- Watchers: 2
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-htmx - Example todo app with the html.js framework - html.js is an elegent framework for hyper speed web apps. (Examples by Back-end / JavaScript)
README
# Example todo app with the html.js framework
## What is html.js
html.js is an elegent framework for hyper speed web apps.
A html.js app is server side js that returns html
to the browser.
Every function you write in html.js is actually a jsx component (but no React), which makes html layouts and views easy to write.
When the user clicks a link or submits a form, htmx is used to turn these into ajax requests. When your app receives an ajax request it only returns the snippet of html on the page that needs updating.
If js is disabled or you're a search engine, the full html page is returned.
html.js apps deploy almost anywhere, but are optimized for Cloudflare and Vercel.
The foundations of html.js are built using the following excellent libraries:
- [hono.dev](https://hono.dev) provides a familiar express style router and jsx
- [htmx.org](https://htmx.org) powers ajax partial html fetching
## Todo example app
This demo is built to deploy to Cloudflare Workers and uses the Cloudflare D1 SQLite db.
## Setup
Install wrangler:
```
npm install -g wrangler
```
Setup `wrangler.toml` file:
```
cp wrangler.toml.example wrangler.toml
```
Setup a Cloudflare D1 sqlite database:
```
wrangler d1 create htmljs-todo-example --experimental-backend
```
Copy the ouput starting `[[d1_databases]]` to the end of your `wrangler.toml` file.
Load db with schema an example data:
```
wrangler d1 execute htmljs-todo-example --local --file=./db/schema.sql
```
Install dependencies and run dev server:
```
pnpm install
pnpm run dev
# In sepate terminal run tailwindcss build watcher
pnpm run dev:css
```
```
pnpm run deploy
```