Prerequisits

Steps

1. Download our sample app and unzip it

2. Start a Terminal or Git Bash Console and cd to the extracted zip (~/Downloads/dexie-cloud-todo-app) and install dependencies

   npm install
   

3. Create your own database in our cloud:

   npx dexie-cloud create
   

   It will send you a one-time password. Fill it in to proceed with database creation.

4. Now, run our little script that configures your app and database for this sample and then start the application and a browser window will navigate to the application in dev mode:

   chmod +x ./configure-app.sh
   ./configure-app.sh
   npm start
   

See Sync in Action

1. Start two browser windows (with different profiles to showcase two different users) to http://localhost:3000 and have both visible at the same time
2. Log in both using one of the password-free demo users or a real user.
3. See how everything is instantly synced between the two.
4. Turn WiFi off to test offline. Play around. Turn it on again and see it sync. Try different scenarios such as one offline client deletes a list while the other one adds a new item to it - and then let them sync their actions.

Guide to the Source Code

Data Layer

db.ts exports the singleton Dexie instance.

TodoDB.ts declares its tables, primary keys and indexes.

TodoItem - declared as a simple typescript interface

TodoList - declared as a class with methods for sharing, deleting etc - operations that involves transactions and logic, perfectly encapsulated in class! Please look at its methods to learn how realms, members, sharing and deletion should be done in order to preserve consistency across various offline use cases.

Whether to declare simple interfaces or Entity classes is only a question of taste. A service or a function based module could equally well have contained the data logic for TodoList.

Components

• TodoLists - a very simple example useLiveQuery()
• TodoListView - showcases the usePermissions() hook and how limited user access can disable certain actions. Also how to edit the name inline without any complex state management.
• TodoItemView - shows another example of usePermissions() and inline editing
• SyncStatusIcon - showcases useObservable() and how to reflect the current offline state to the user.
• Invites - showcases in-app presentation of invites.

Roles and Access Control

• roles.json - defining a set of permission per role.
• configureApp.sh - Showcases how to use the dexie-cloud CLI to import roles and demoUsers as well as white-listing the application URLs. It also creates an .env.local file with the database URL.