In this article, we analyze Dexie usage in Lobechat.

If you check [database folder in lobechat, it has 2 folders:

1. client

2. server

In this Lobechat’s self-host docs, it is mentioned that LobeChat
defaults to using a client-side database (IndexedDB). That is why you have two folders, one for client and one for server.

![](https://miro.medium.com/v2/resize:fit:875/1*auzPtXHE1jG8EtFtUwBhrw.png align="left")

database/client/core/db.ts imports Dexie.

Dexie is a minimalistic wrapper for indexedDB. Let’s look at a simple dexie example provided in the Getting Started tutorial.

// db.ts
import Dexie, { type EntityTable } from 'dexie';
interface Friend {
 id: number;
 name: string;
 age: number;
}
const db = new Dexie('FriendsDatabase') as Dexie & {
 friends: EntityTable<
 Friend,
 'id' // primary key "id" (for the typings only)
 >;
};
// Schema declaration:
db.version(1).stores({
 friends: '++id, name, age' // primary key "id" (for the runtime!)
});
export type { Friend };
export { db };

Important note:

Applications typically have one single Dexie instance declared as its own module. This is where you declare which tables you need and how each table shall be indexed. A Dexie instance is a singleton throughout the
application — you do not need to create it on demand. Export the resulting db instance from your module so that components or other modules can use it to query or write to the database.

Using this line shown below, Lobechat creates a singleton instance of BrowserDB.

export class BrowserDB extends Dexie {
 public files: BrowserDBTable<'files'>;
 public sessions: BrowserDBTable<'sessions'>;
 public messages: BrowserDBTable<'messages'>;
 public topics: BrowserDBTable<'topics'>;
 public plugins: BrowserDBTable<'plugins'>;
 public sessionGroups: BrowserDBTable<'sessionGroups'>;
 public users: BrowserDBTable<'users'>;
constructor() {
 this.version(1).stores(dbSchemaV1);
 this.version(2).stores(dbSchemaV2);
 this.version(3).stores(dbSchemaV3);
 this.version(4)
 .stores(dbSchemaV4)
 .upgrade((trans) => this.upgradeToV4(trans));
 // … more code
export const browserDB = new BrowserDB();

versions written in constructor show how the client side database schema evolved over the time, Read more about Dexie.version() to understand the versions.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/lobehub/lobe-chat/blob/main/src/database/client/core/db.ts

2. https://dexie.org/

3. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

4. https://web.dev/articles/indexeddb

5. https://lobehub.com/docs/self-hosting/server-database

6. https://dexie.org/docs/Tutorial/React