Add local development for YJS demo

Author: stevensJourney

demos/yjs-react-supabase-text-collab/.env.local.template

@@ -1,3 +1,5 @@
-VITE_SUPABASE_URL=
+VITE_SUPABASE_URL=http://localhost:54321
 VITE_SUPABASE_ANON_KEY=
-VITE_POWERSYNC_URL=
+VITE_POWERSYNC_URL=http://localhost:8080
+# Only required for development with a local Supabase instance
+PS_SUPABASE_JWT_SECRET=

demos/yjs-react-supabase-text-collab/README.md

@@ -17,12 +17,44 @@ pnpm install
 pnpm build:packages
 ```
 
+### Quick Start: Local Development
+
+This demo can be started with local PowerSync and Supabase services.
+
+Follow the [instructions](https://supabase.com/docs/guides/cli/getting-started) for configuring Supabase locally.
+
+Copy the environment variables template file
+
+```bash
+cp .env.template .env.local
+```
+
+Start the Supabase project
+
+```bash
+supabase start
+```
+
+Copy the `anon key` and `JWT secret` into the `.env` file.
+
+Run the PowerSync service with
+
+```bash
+docker run \
+-p 8080:8080 \
+-e POWERSYNC_CONFIG_B64=$(base64 -i ./powersync.yaml) \
+-e POWERSYNC_SYNC_RULES_B64=$(base64 -i ./sync-rules.yaml) \
+--env-file ./.env \
+--network supabase_network_yjs-react-supabase-text-collab \
+--name my-powersync journeyapps/powersync-service:latest
+```
+
 ### 2. Create project on Supabase and set up Postgres
 
 This demo app uses Supabase as its Postgres database and backend:
 
 1. [Create a new project on the Supabase dashboard](https://supabase.com/dashboard/projects).
-2. Go to the Supabase SQL Editor for your new project and execute the SQL statements in [`database.sql`](database.sql) to create the database schema, database functions, and publication needed for PowerSync.
+2. Go to the Supabase SQL Editor for your new project and execute the SQL statements in [`database.sql`](./supabase/migrations/20250618064101_configure_powersync.sql) to create the database schema, database functions, and publication needed for PowerSync.
 3. Enable "anonymous sign-ins" for the project [here](https://supabase.com/dashboard/project/_/auth/providers).
 
 ### 3. Create new project on PowerSync and connect to Supabase/Postgres

demos/yjs-react-supabase-text-collab/powersync.yaml

@@ -0,0 +1,52 @@
+# yaml-language-server: $schema=https://unpkg.com/@powersync/service-schema@latest/json-schema/powersync-config.json
+
+# This is a local development configuration file for PowerSync.
+
+# Note that this example uses YAML custom tags for environment variable substitution.
+# Using `!env [variable name]` will substitute the value of the environment variable named
+# [variable name].
+#
+# Only environment variables with names starting with `PS_` can be substituted.
+#
+# If using VS Code see the `.vscode/settings.json` definitions which define custom tags.
+
+# Settings for telemetry reporting
+# See https://docs.powersync.com/self-hosting/telemetry
+telemetry:
+  # Opt out of reporting anonymized usage metrics to PowerSync telemetry service
+  disable_telemetry_sharing: false
+
+# Settings for source database replication
+replication:
+  # Specify database connection details
+  # Note only 1 connection is currently supported
+  # Multiple connection support is on the roadmap
+  connections:
+    - type: postgresql
+      # The PowerSync server container can access the Postgres DB via the DB's service name.
+      # In this case the hostname is pg-db
+
+      # The connection URI or individual parameters can be specified.
+      # Individual params take precedence over URI params
+      uri: postgresql://postgres:postgres@supabase_db_yjs-react-supabase-text-collab:5432/postgres
+
+      # SSL settings
+      sslmode: disable # 'verify-full' (default) or 'verify-ca' or 'disable'
+
+# This is valid if using the `mongo` service defined in `ps-mongo.yaml`
+
+# Connection settings for sync bucket storage
+storage:
+  # This uses Postgres bucket storage for simplicity
+  type: postgresql
+  uri: postgresql://postgres:postgres@supabase_db_yjs-react-supabase-text-collab:5432/postgres
+  # SSL settings
+  sslmode: disable # 'verify-full' (default) or 'verify-ca' or 'disable'
+
+# The port which the PowerSync API server will listen on
+port: 8080
+
+# Client (application end user) authentication settings
+client_auth:
+  supabase: true
+  supabase_jwt_secret: !env PS_SUPABASE_JWT_SECRET

demos/yjs-react-supabase-text-collab/supabase/config.toml

@@ -79,6 +79,8 @@ enable_refresh_token_rotation = true
 refresh_token_reuse_interval = 10
 # Allow/disallow new user signups to your project.
 enable_signup = true
+enable_anonymous_sign_ins = true
+
 
 [auth.email]
 # Allow/disallow new user signups via email to your project.

demos/yjs-react-supabase-text-collab/database.sql renamed to demos/yjs-react-supabase-text-collab/supabase/migrations/20250618064101_configure_powersync.sql

@@ -1,3 +1,5 @@
+# yaml-language-server: $schema=https://unpkg.com/@powersync/service-sync-rules@latest/schema/sync_rules.json
+
 # Sync-rule docs: https://docs.powersync.com/usage/sync-rules
 bucket_definitions:
   documents: