[Feature] Demos

CHANGELOG.md

@@ -1,5 +1,9 @@
 # PowerSync Self Hosted Example
 
+## v0.3.0
+
+- Added a Django demo. Split code to make demos more modular
+
 ## v0.2.0
 
 - Updated to MongoDB v7

README.md

@@ -8,21 +8,21 @@ Learn more about self-hosting PowerSync [here](https://docs.powersync.com/self-h
 
 # Run
 
-This repository contains a basic local configuration for Postgres. The entire stack can be started with a single command.
+This repository contains basic demonstrations in the `demos` folder.
 
-```bash
-docker compose up
-```
+- [NodeJS](./demos/nodejs/README.md)
 
-## Demo app
+  - This can be stared from the repo root with `docker compose -f demos/nodejs/docker-compose.yaml up`
 
-This compose file serves an example app at `localhost:3030`. This app syncs changes made from the Postgres server database.
+- [Django](./demos/django/README.md)
+
+  - This can be stared from the repo root with `docker compose -f demos/django/docker-compose.yaml up`
 
 # Config
 
 The configuration can be modified to match other project topologies.
 
-Edit the `.env` file and config files in the `./config` directory with your specific settings.
+Edit the demo `.env` files and config files in the `./config` directory with your specific settings.
 
 ### Connections
 
@@ -46,8 +46,6 @@ The `key-generator` project demonstrates generating RSA key pairs for token sign
 
 # Cleanup
 
-The `setup.sql` script only runs on the first initialization of the container.
-
 If you want to start from a fresh start:
 
 - Delete the Docker volumes `mongo_storage` and `db_data`

config/powersync.yaml

@@ -65,7 +65,7 @@ replication:
 storage:
   type: mongodb
   uri: !env PS_MONGO_URI
-  # Use these if authentication is required. The user should have `readWrite` and `dbAdmin` roles 
+  # Use these if authentication is required. The user should have `readWrite` and `dbAdmin` roles
   # username: my-mongo-user
   # password: my-password
 

demos/django/.env

@@ -0,0 +1,20 @@
+# ==================== Postgres credentials ================================
+PG_DATABASE_NAME=django_demo
+PG_DATABASE_PORT=5432
+PG_DATABASE_USER=postgres
+PG_DATABASE_PASSWORD=mypassword
+
+# ==================== Demo config =========================================
+DEMO_BACKEND_PORT=6061
+# The front-end demo application is accessible at this port on the host machine
+DEMO_CLIENT_PORT=3030
+PS_JWKS_URL=http://demo-backend:${DEMO_BACKEND_PORT}/api/get_keys/
+
+# These can be generated by following the instructions in the `key-generator` folder
+# A temporary key will be used if these are not specified
+DEMO_JWKS_PUBLIC_KEY=
+DEMO_JWKS_PRIVATE_KEY=
+
+# ==================== PowerSync variables ====================
+# The PowerSync API is accessible via this port
+PS_PORT=8080

demos/django/README.md

@@ -0,0 +1,26 @@
+# Django Self Hosted Demo
+
+This demo contains a Django backend with no frontend client. This can be used in conjunction with our Django demos:
+
+- [React Native](https://github.com/powersync-ja/powersync-js/tree/main/demos/django-react-native-todolist)
+- [Dart](https://github.com/powersync-ja/powersync.dart/tree/master/demos/django-todolist)
+
+Backend code can be found [here](https://github.com/powersync-ja/powersync-django-backend-todolist-demo)
+
+## Running
+
+This demo can be started by running the following in this demo directory
+
+```bash
+docker compose up
+```
+
+or in the root directory run
+
+```bash
+docker compose -f demos/django/docker-compose.yaml up
+```
+
+The backend will by default be available at `http://localhost:6061`.
+
+See the client demos above for starting a client.

demos/django/docker-compose.yaml

@@ -0,0 +1,23 @@
+# Include syntax requires Docker compose > 2.20.3
+# https://docs.docker.com/compose/release-notes/#2203
+include:
+  # Creates a standard Postgress instance
+  - path: ../../services/postgres.yaml
+
+  # Creates the internal MongoDB replica set
+  - path: ../../services/mongo.yaml
+
+  # Demo Django backend server and front-end web client
+  - path: ./ps-django-backend.yaml
+
+services:
+  # Extend PowerSync with Mongo and Postgres healthchecks
+  powersync:
+    extends:
+      file: ../../services/powersync.yaml
+      service: powersync
+    depends_on:
+      mongo-rs-init:
+        condition: service_completed_successfully
+      pg-db:
+        condition: service_healthy

demos/django/ps-django-backend.yaml

@@ -0,0 +1,28 @@
+services:
+  # A backend which provides basic authentication and CRUD access to the Postgres DB from the client
+  demo-backend:
+    depends_on:
+      pg-db:
+        condition: service_healthy
+    build:
+      context: https://github.com/powersync-ja/powersync-django-backend-todolist-demo.git
+    environment:
+      # From the Postgres service name in linked Docker Compose file
+      DATABASE_HOST: pg-db
+      # Shared environment variables for Postgres connection
+      DATABASE_PORT: ${PG_DATABASE_PORT}
+      DATABASE_NAME: ${PG_DATABASE_NAME}
+      DATABASE_USER: ${PG_DATABASE_USER}
+      DATABASE_PASSWORD: ${PG_DATABASE_PASSWORD}
+
+      # From the PowerSync service name
+      # This is just used to populate the JWT audience
+      POWERSYNC_URL: powersync-dev
+
+      # Keys here for demonstration
+      POWERSYNC_PUBLIC_KEY: ${DEMO_JWKS_PUBLIC_KEY}
+      POWERSYNC_PRIVATE_KEY: ${DEMO_JWKS_PRIVATE_KEY}
+
+      DJANGO_PORT: ${DEMO_BACKEND_PORT}
+    ports:
+      - ${DEMO_BACKEND_PORT}:${DEMO_BACKEND_PORT}

.env → demos/nodejs/.env

@@ -1,13 +1,14 @@
 # ==================== Postgres credentials ================================
-PG_DATABASE_PORT=5432
 PG_DATABASE_NAME=postgres
+PG_DATABASE_PORT=5432
 PG_DATABASE_USER=postgres
 PG_DATABASE_PASSWORD=mypassword
 
 # ==================== Demo config =========================================
 DEMO_BACKEND_PORT=6060
 # The front-end demo application is accessible at this port on the host machine
 DEMO_CLIENT_PORT=3030
+PS_JWKS_URL=http://demo-backend:${DEMO_BACKEND_PORT}/api/auth/keys
 
 # These can be generated by following the instructions in the `key-generator` folder
 # A temporary key will be used if these are not specified

demos/nodejs/README.md

@@ -0,0 +1,25 @@
+# JavaScript Self Hosted Demo
+
+This demo contains a NodeJS backend and React frontend which are linked to a self hosted PowerSync instance.
+
+Backend code can be found [here](https://github.com/powersync-ja/powersync-nodejs-backend-todolist-demo)
+
+## Running
+
+This demo can be started by running the following in this demo directory
+
+```bash
+docker compose up
+```
+
+or in the root directory run
+
+```bash
+docker compose -f demos/nodejs/docker-compose.yaml up
+```
+
+The frontend can be accessed at `http://localhost:3030` in a browser.
+
+## Cleanup
+
+The `setup.sql` script only runs on the first initialization of the container. Delete the container and volumes if making changes.

demos/nodejs/docker-compose.yaml

@@ -0,0 +1,33 @@
+# Include syntax requires Docker compose > 2.20.3
+# https://docs.docker.com/compose/release-notes/#2203
+include:
+  # Creates the internal MongoDB replica set
+  - path: ../../services/mongo.yaml
+
+  # Demo NodeJS backend server and front-end web client
+  - path: ./ps-nodejs-demo.yaml
+
+services:
+  # Extend PowerSync with Mongo and Postgres healthchecks
+  powersync:
+    extends:
+      file: ../../services/powersync.yaml
+      service: powersync
+    depends_on:
+      mongo-rs-init:
+        condition: service_completed_successfully
+      pg-db:
+        condition: service_healthy
+
+  # Extend pg-db to include init scripts
+  # The NodeJS demo creates tables and publications in `setup.sql`
+  pg-db:
+    extends:
+      file: ../../services/postgres.yaml
+      service: pg-db
+    volumes:
+      - ./init-scripts:/docker-entrypoint-initdb.d
+
+volumes:
+  # Postgres data
+  pg_data:

ps-mongo.yaml → services/mongo.yaml

@@ -14,11 +14,11 @@ services:
     image: mongo:7.0
     depends_on:
       - mongo
-    restart: "no"
+    restart: on-failure
     entrypoint:
       - bash
       - -c
-      - 'sleep 10 && mongosh --host mongo:27017 --eval ''try{rs.status().ok && quit(0)} catch {} rs.initiate({_id: "rs0", version: 1, members: [{ _id: 0, host : "mongo:27017" }]})'''
+      - 'mongosh --host mongo:27017 --eval ''try{rs.status().ok && quit(0)} catch {} rs.initiate({_id: "rs0", version: 1, members: [{ _id: 0, host : "mongo:27017" }]})'''
 
 volumes:
   mongo_storage:

services/postgres.yaml

@@ -0,0 +1,23 @@
+services:
+  pg-db:
+    image: postgres:latest
+    restart: always
+    environment:
+      - POSTGRES_USER=${PG_DATABASE_USER}
+      - POSTGRES_DB=${PG_DATABASE_NAME}
+      - POSTGRES_PASSWORD=${PG_DATABASE_PASSWORD}
+      - PGPORT=${PG_DATABASE_PORT}
+    volumes:
+      - pg_data:/var/lib/postgresql/data
+    ports:
+      - "${PG_DATABASE_PORT}:${PG_DATABASE_PORT}"
+    command: ["postgres", "-c", "wal_level=logical"]
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${PG_DATABASE_USER} -d ${PG_DATABASE_NAME}"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  # Postgres data
+  pg_data:

docker-compose.yaml → services/powersync.yaml

@@ -1,21 +1,6 @@
-# Include syntax requires Docker compose > 2.20.3
-# https://docs.docker.com/compose/release-notes/#2203
-include:
-  # Creates a standard Postgress instance
-  - path: ps-postgres.yaml
-
-  # Creates the internal MongoDB replica set
-  - path: ps-mongo.yaml
-
-  # Demo backend server and front-end web client
-  - path: ps-demo.yaml
-
 services:
-  # Main PowerSync service
   powersync:
-    depends_on:
-      - mongo
-      - pg-db
+    restart: unless-stopped
     image: journeyapps/powersync-service:latest
     # The unified service runs an API server and replication worker in the same container.
     # These services can be executed in different containers by using individual entry commands e.g.
@@ -36,7 +21,7 @@ services:
     volumes:
       # Mounts the specified config folder to the container
       # This folder should contain `powersync.yaml and sync_rules.yaml
-      - ./config:/config
+      - ../config:/config
     environment:
       # This is the path (inside the container) to the YAML config file
       # Alternatively the config path can be specified in the command
@@ -62,7 +47,7 @@ services:
       PS_MONGO_URI: mongodb://mongo:27017/powersync_demo
 
       # Note that powersync.yaml->client_auth->allow_local_jwks must be true for local URLs to work
-      PS_JWKS_URL: http://demo-backend:${DEMO_BACKEND_PORT}/api/auth/keys
+      PS_JWKS_URL: ${PS_JWKS_URL}
 
       # The port which the PowerSync API server should run on
       PS_PORT: ${PS_PORT}