# 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 `` 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