106 lines
2.8 KiB
Markdown
106 lines
2.8 KiB
Markdown
# Datastar Starter Kit
|
|
|
|
This starter kit demonstrates how to build realtime web applications using [Datastar](https://github.com/starfederation/datastar) with PocketPages. It includes a live chat demo and counter example.
|
|
|
|
## Features
|
|
|
|
- Realtime chat with emoji avatars
|
|
- Live counter with instant updates
|
|
- Datastar signal management
|
|
- Server-sent events (SSE) integration
|
|
- Modern UI with Tailwind CSS
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npx tiged benallfree/pocketpages/packages/starters/datastar .
|
|
cd datastar
|
|
npm i
|
|
pocketbase serve --dir=pb_data --dev
|
|
```
|
|
|
|
## Setup
|
|
|
|
The starter kit is pre-configured with the required Datastar setup:
|
|
|
|
1. **Plugin Configuration** (`+config.js`): Includes the datastar plugin
|
|
2. **Script Injection** (`+layout.ejs`): Includes `<%- datastar.scripts() %>` in the `<head>` section
|
|
3. **Realtime Integration**: Configured for realtime updates
|
|
|
|
## Usage
|
|
|
|
1. Start the server and visit `http://127.0.0.1:8090`
|
|
2. Open multiple browser tabs to see realtime updates
|
|
3. Send messages in the chat to see them appear instantly across all tabs
|
|
4. Click the counter button to see live updates
|
|
|
|
## Key Components
|
|
|
|
- **Chat System**: Real-time messaging with random emoji avatars
|
|
- **Counter**: Simple state management with live updates
|
|
- **Datastar Integration**: Server-side signal reading and client-side binding
|
|
- **Realtime Broadcasting**: Updates sent to all connected clients
|
|
|
|
## Datastar Features Demonstrated
|
|
|
|
- `datastar.patchElements()` - DOM updates
|
|
- `datastar.patchSignals()` - Signal management
|
|
- `datastar.readSignals()` - Form data reading
|
|
- `datastar.realtime.*` - Broadcasting to all clients
|
|
- Client-side data binding with `data-bind-*` attributes
|
|
- Event handling with `data-on-click` attributes
|
|
|
|
|
|
|
|
## dev notes
|
|
|
|
### S3 has some jenk
|
|
|
|
cache s3 requests at the proxy level
|
|
https://github.com/pocketbase/pocketbase/issues/28#issuecomment-1492516269
|
|
https://github.com/pocketbase/pocketbase/discussions/4332#discussioncomment-8450890
|
|
|
|
|
|
### search
|
|
|
|
https://www.meilisearch.com/
|
|
|
|
|
|
### horizontal scaling
|
|
|
|
https://github.com/fondoger/pocketbase (pg fork)
|
|
https://github.com/litesql/pocketbase-ha
|
|
|
|
|
|
### Data migrations
|
|
|
|
https://github.com/pocketbase/pocketbase/discussions/2836#discussioncomment-6340103
|
|
|
|
|
|
### FTS
|
|
|
|
https://github.com/pocketbuilds/fts?tab=readme-ov-file#readme
|
|
|
|
|
|
### plugins
|
|
|
|
https://pocketbuilds.com/
|
|
|
|
|
|
## Deployments
|
|
|
|
how the pros do it
|
|
|
|
https://github.com/benallfree/pocketpages/blob/5bc48d4f8df75b2f78ca61fa18c792d814b926e8/packages/starters/deploy-pockethost-manual/deploy-pockethost.ts#L5
|
|
|
|
## Avoid proxying files via pocketbase
|
|
|
|
https://github.com/pocketbase/pocketbase/discussions/5995
|
|
|
|
## realtime updates on db changes
|
|
|
|
https://github.com/pocketbase/pocketbase/discussions/4427#discussioncomment-8585118
|
|
|
|
## get a random item
|
|
|
|
https://github.com/pocketbase/pocketbase/discussions/2725 |