Awesome

vite-tinybase-ts-react-sync-durable-object

This is a Vite template for a simple TinyBase app, using TypeScript and React, demonstrating the TinyBase ui-react-dom module UI components, and also synchronizing between disparate browser windows using Cloudflare Durable Objects.

The server can be configured to store TinyBase state, so even if all clients have been disconnected (and their browser storage cleared) synced data will still be available on the server for future connecting clients.

Instructions

1. Make a copy of this template into a new directory:

npx tiged tinyplex/vite-tinybase-ts-react-sync-durable-object my-tinybase-app

2. Go into the client directory:

cd my-tinybase-app/client

3. Install the dependencies:

npm install

4. Run the application:

npm run dev

5. Go the URL shown and enjoy!

Run your own server

This template uses a lightweight socket server on vite.tinybase.cloud to synchronize data between clients. This is fine for a demo but not intended as a production server for your apps!

If you wish to run your own instance, see the server directory and start from there.

The vite.tinybase.cloud server is hosted on Cloudflare (of course), so you should adapt the wrangler.toml configuration in the server directory. Update it to match your account, domains, and required configuration. In the index.ts file, you can configure whether data will be stored in the Durable Object or just synchronized between clients.

You will also have to have your client communicate with your new server by configuring the SERVER constant at the top of the client's App.tsx file.

Other templates

There are eleven templates for TinyBase, of which this is one:

License

This template has no license, and so you can use it however you want! TinyBase and Vite themselves are both MIT licensed.