jmcmahon443 / sqlsync-react-example

Example of React client with SQLSync

SQLSync React example

These are instructions for implementing the example React client with SQLSync by orbitinghail.

YouTube tutorial video

Build SQLSync

• Clone SQLSync: git clone https://github.com/orbitinghail/sqlsync
• Run the commands below one at a time:

cd sqlsync
just build
just run-with-prefix 'wasm-'

cd sqlsync/lib/sqlsync-worker
pnpm install @rollup/plugin-node-resolve

cd sqlsync
just package-sqlsync-worker dev

cd sqlsync/demo/cloudflare-backend
pnpm i

Build SQLSync React example

• Clone this repo alongside SQLSync: git clone https://github.com/jmcmahon443/sqlsync-react-example

├── sqlsync/
└── sqlsync-react-example/

Local

• Deploy backend using pnpm dev from sqlsync/demo/cloudflare-backend/
• Build and upload reducer to local backend using just upload-reducer from sqlsync-react-example/
• Build and deploy frontend using pnpm i; pnpm dev from sqlsync-react-example/frontend/

Remote

These are instructions for deploying to Cloudflare.

Backend

• Manually update name and bucket_name in wrangler.toml in sqlsync/demo/cloudflare-backend/ to match the intended Cloudflare Worker name and R2 Bucket name.
• Manually update SQLSYNC_PROD_URL in justfile in sqlsync-react-example/ to intended Cloudflare Worker URL
• Deploy backend using npx wrangler deploy from sqlsync/demo/cloudflare-backend/
• Upload reducer to remote backend using just upload-reducer remote from sqlsync-react-example/

Frontend

• Manually update COORDINATOR_URL in main.tsx in sqlsync-react-example/demo/frontend/ to intended Cloudflare Worker URL
• Build the frontend distribution using npx vite build from sqlsync-react-example/frontend/
• Double check .wasm files are under 25MB (for example, should be 2MB compared to 60MB)
• Manually upload sqlsync-react-example/frontend/dist/ to Cloudflare Pages