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.
- Make a copy of this template into a new directory:
npx tiged tinyplex/vite-tinybase-ts-react-sync-durable-object my-tinybase-app- Go into the client directory:
cd my-tinybase-app/client- Install the dependencies:
npm install- Run the application:
npm run dev- Go the URL shown and enjoy!
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.
There are eleven templates for TinyBase, of which this is one:
| Template | Language | React | Plus | |
|---|---|---|---|---|
| vite-tinybase | JavaScript | No | ||
| vite-tinybase-ts | TypeScript | No | ||
| vite-tinybase-react | JavaScript | Yes | ||
| vite-tinybase-ts-react | TypeScript | Yes | ||
| vite-tinybase-ts-react-sync | TypeScript | Yes | Synchronization | |
| 👉 | vite-tinybase-ts-react-sync-durable-object | TypeScript | Yes | Sync & Durable Objects |
| vite-tinybase-ts-react-pglite | TypeScript | Yes | PGlite | |
| vite-tinybase-ts-react-crsqlite | TypeScript | Yes | CR-SQLite | |
| tinybase-ts-react-partykit | TypeScript | Yes | PartyKit | |
| tinybase-ts-react-electricsql | TypeScript | Yes | ElectricSQL | |
| expo/examples/with-tinybase | JavaScript | Yes | React Native & Expo |
This template has no license, and so you can use it however you want! TinyBase and Vite themselves are both MIT licensed.