Datastar Starter Kit
This starter kit demonstrates how to build realtime web applications using 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
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:
- Plugin Configuration (
+config.js): Includes the datastar plugin - Script Injection (
+layout.ejs): Includes<%- datastar.scripts() %>in the<head>section - Realtime Integration: Configured for realtime updates
Usage
- Start the server and visit
http://127.0.0.1:8090 - Open multiple browser tabs to see realtime updates
- Send messages in the chat to see them appear instantly across all tabs
- 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 updatesdatastar.patchSignals()- Signal managementdatastar.readSignals()- Form data readingdatastar.realtime.*- Broadcasting to all clients- Client-side data binding with
data-bind-*attributes - Event handling with
data-on-clickattributes
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
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
Deployments
how the pros do it
5bc48d4f8d/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