powersync-ja · Chriztiaan · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025
diff --git a/README.md b/README.md
@@ -74,6 +74,7 @@ Demo applications are located in the [`demos/`](./demos/) directory. Also see ou
 
 - [demos/example-webpack](./demos/example-webpack/README.md): A minimal example demonstrating bundling with Webpack.
 - [demos/example-vite](./demos/example-vite/README.md): A minimal example demonstrating bundling with Vite.
+- [demos/example-vite-encryption](./demos/example-vite-encryption/README.md): A minimal example demonstrating web encryption.
 - [demos/example-nextjs](./demos/example-nextjs/README.md): An example demonstrating setup with Next.js.
 
 ### Electron

diff --git a/demos/example-vite-encryption/README.md b/demos/example-vite-encryption/README.md
@@ -0,0 +1,11 @@
+# PowerSync Web Encryption example
+
+This is a minimal example demonstrating web encryption. It prompts an encryption key, which is used for the database.
+If the database doesn't exist yet, it will apply the encryption key when creating the database for the specified database name.
+If the database does exist, it will use the encryption key to access the database - should the provided key be different to the one provided upon creation it fail to open the database.
+
+To see it in action:
+
+1. Make sure to run `pnpm install` and `pnpm build:packages` in the root directory of this repo.
+2. `cd` into this directory, and run `pnpm start`.
+3. Open the localhost URL displayed in the terminal output in your browser.
diff --git a/demos/example-vite-encryption/package.json b/demos/example-vite-encryption/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "example-vite-encryption",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "pnpm build && pnpm preview",
+    "test:build": "pnpm build"
+  },
+  "dependencies": {
+    "@powersync/web": "workspace:*"
+  },
+  "devDependencies": {
+    "@swc/core": "~1.6.0",
+    "vite": "^5.0.12",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0"
+  }
+}
diff --git a/demos/example-vite-encryption/src/index.html b/demos/example-vite-encryption/src/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    Vite bundling test: Check the console to see it in action!
+  </body>
+</html>
diff --git a/demos/example-vite-encryption/src/index.js b/demos/example-vite-encryption/src/index.js
@@ -0,0 +1,37 @@
+import { column, Schema, Table, PowerSyncDatabase } from '@powersync/web';
+import Logger from 'js-logger';
+
+Logger.useDefaults();
+
+const customers = new Table({ name: column.text });
+
+export const AppSchema = new Schema({ customers });
+
+let PowerSync;
+
+const openDatabase = async (encryptionKey) => {
+  PowerSync = new PowerSyncDatabase({
+    schema: AppSchema,
+    database: { dbFilename: 'example-encryption.db' },
+    encryptionKey: encryptionKey
+  });
+
+  await PowerSync.init();
+
+  // Run local statements.
+  await PowerSync.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', ['Fred']);
+
+  const result = await PowerSync.getAll('SELECT * FROM customers');
+  console.log('contents of customers: ', result);
+  console.table(result);
+};
+
+document.addEventListener('DOMContentLoaded', async (event) => {
+  let encryptionKey = '';
+
+  while (!encryptionKey) {
+    encryptionKey = prompt('Enter encryption key (non-empty string):');
+  }
+
+  openDatabase(encryptionKey);
+});
diff --git a/demos/example-vite-encryption/vite.config.ts b/demos/example-vite-encryption/vite.config.ts
@@ -0,0 +1,27 @@
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: 'src',
+  build: {
+    outDir: '../dist',
+    rollupOptions: {
+      input: 'src/index.html'
+    },
+    emptyOutDir: true
+  },
+  envDir: '..', // Use this dir for env vars, not 'src'.
+  optimizeDeps: {
+    // Don't optimize these packages as they contain web workers and WASM files.
+    // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
+    exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
+    include: ['@powersync/web > js-logger'] 
+  },
+  plugins: [wasm(), topLevelAwait()],
+  worker: {
+    format: 'es',
+    plugins: () => [wasm(), topLevelAwait()]
+  }
+});