Skip to content

Commit 098934a

Browse files
ChriztiaanstevensJourney
Chriztiaan
and
stevensJourney
authored
demo: Vite Web Encryption Example (#538)
Co-authored-by: stevensJourney <[email protected]>
1 parent f0c49f9 commit 098934a

File tree

7 files changed

+596
-435
lines changed

7 files changed

+596
-435
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ Demo applications are located in the [`demos/`](./demos/) directory. Also see ou
7474

7575
- [demos/example-webpack](./demos/example-webpack/README.md): A minimal example demonstrating bundling with Webpack.
7676
- [demos/example-vite](./demos/example-vite/README.md): A minimal example demonstrating bundling with Vite.
77+
- [demos/example-vite-encryption](./demos/example-vite-encryption/README.md): A minimal example demonstrating web encryption.
7778
- [demos/example-nextjs](./demos/example-nextjs/README.md): An example demonstrating setup with Next.js.
7879

7980
### Electron

‎demos/example-vite-encryption/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# PowerSync Web Encryption example
2+
3+
This is a minimal example demonstrating web encryption. It prompts an encryption key, which is used for the database.
4+
If the database doesn't exist yet, it will apply the encryption key when creating the database for the specified database name.
5+
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.
6+
7+
To see it in action:
8+
9+
1. Make sure to run `pnpm install` and `pnpm build:packages` in the root directory of this repo.
10+
2. `cd` into this directory, and run `pnpm start`.
11+
3. Open the localhost URL displayed in the terminal output in your browser.

‎demos/example-vite-encryption/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "example-vite-encryption",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"start": "pnpm build && pnpm preview",
11+
"test:build": "pnpm build"
12+
},
13+
"dependencies": {
14+
"@powersync/web": "workspace:*"
15+
},
16+
"devDependencies": {
17+
"@swc/core": "~1.6.0",
18+
"vite": "^5.0.12",
19+
"vite-plugin-top-level-await": "^1.4.1",
20+
"vite-plugin-wasm": "^3.3.0"
21+
}
22+
}

‎demos/example-vite-encryption/src/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script type="module" src="./index.js"></script>
5+
</head>
6+
<body>
7+
Vite bundling test: Check the console to see it in action!
8+
</body>
9+
</html>

‎demos/example-vite-encryption/src/index.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { column, Schema, Table, PowerSyncDatabase } from '@powersync/web';
2+
import Logger from 'js-logger';
3+
4+
Logger.useDefaults();
5+
6+
const customers = new Table({ name: column.text });
7+
8+
export const AppSchema = new Schema({ customers });
9+
10+
let PowerSync;
11+
12+
const openDatabase = async (encryptionKey) => {
13+
PowerSync = new PowerSyncDatabase({
14+
schema: AppSchema,
15+
database: { dbFilename: 'example-encryption.db' },
16+
encryptionKey: encryptionKey
17+
});
18+
19+
await PowerSync.init();
20+
21+
// Run local statements.
22+
await PowerSync.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', ['Fred']);
23+
24+
const result = await PowerSync.getAll('SELECT * FROM customers');
25+
console.log('contents of customers: ', result);
26+
console.table(result);
27+
};
28+
29+
document.addEventListener('DOMContentLoaded', async (event) => {
30+
let encryptionKey = '';
31+
32+
while (!encryptionKey) {
33+
encryptionKey = prompt('Enter encryption key (non-empty string):');
34+
}
35+
36+
openDatabase(encryptionKey);
37+
});

‎demos/example-vite-encryption/vite.config.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import wasm from 'vite-plugin-wasm';
2+
import topLevelAwait from 'vite-plugin-top-level-await';
3+
import { defineConfig } from 'vite';
4+
5+
// https://vitejs.dev/config/
6+
export default defineConfig({
7+
root: 'src',
8+
build: {
9+
outDir: '../dist',
10+
rollupOptions: {
11+
input: 'src/index.html'
12+
},
13+
emptyOutDir: true
14+
},
15+
envDir: '..', // Use this dir for env vars, not 'src'.
16+
optimizeDeps: {
17+
// Don't optimize these packages as they contain web workers and WASM files.
18+
// https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
19+
exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
20+
include: ['@powersync/web > js-logger']
21+
},
22+
plugins: [wasm(), topLevelAwait()],
23+
worker: {
24+
format: 'es',
25+
plugins: () => [wasm(), topLevelAwait()]
26+
}
27+
});

0 commit comments

Comments
 (0)