vite-tinybase-ts-react-sync

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.

Instructions

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

npx tiged tinyplex/vite-tinybase-ts-react-sync 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.org 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.org server is hosted on fly.io and so if you choose to use that, you can reuse the docker and fly configurations in the server directory. Just remember to update them to match your machines and required configuration.

You will also have to have your client communicate with the 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:

	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

License

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