Replies: 2 comments 3 replies
-
|
Modified the example from https://observablehq.com/@kimmolinna/duckdb-wasm-shell-on-observablehq: import * as wasm from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm';
var container = document.getElementById("container");
var shell = await wasm.embed({
shellModule: 'duckdb/shell_bg.wasm', //bg.arrayBuffer(),
container: container,
resolveDatabase: async () => {return db;}
})
console.log("shell", shell);
|
Beta Was this translation helpful? Give feedback.
-
|
could you explain more how to do this? I'm currently attempting to do the same thing. I see that there are 'shell_bg.wasm' file mentioned here. is it available in the repo or do I have to somehow compile it myself? I'm currently trying to make a PoC in a single html file. Is the above snippet not meant to be used in this manner? : <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
</head>
<body>
<main>
<section id="section-1">
<aside>
<h3>DuckDB-wasm Shell</h3>
<div id="container"></div>
</aside>
</section>
</main>
<script type="module">
import * as wasm from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm';
var container = document.getElementById("container");
var shell = await wasm.embed({
shellModule: 'duckdb/shell_bg.wasm', //bg.arrayBuffer(),
container: container,
resolveDatabase: async () => {return db;}
})
console.log("shell", shell);
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
you can find the shell_bg.wasm in the duckdb-wasm-shell cdn. also, you need to create a database first befory ou can use the script. my PoC that has some visuals messed up but otherwise works fine looks like this: <!DOCTYPE html>
<html lang="en">
<style>
canvas {
position: absolute
}
</style>
<body>
<div id="container"></div>
<script>
const getDb = async () => {
const duckdb = window.duckdbduckdbWasm;
// @ts-ignore
if (window._db) return window._db;
const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
// Select a bundle based on browser checks
const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
const worker_url = URL.createObjectURL(
new Blob([`importScripts("${bundle.mainWorker}");`], {
type: "text/javascript",
})
);
// Instantiate the asynchronus version of DuckDB-wasm
const worker = new Worker(worker_url);
// const logger = null //new duckdb.ConsoleLogger();
const logger = new duckdb.ConsoleLogger();
const db = new duckdb.AsyncDuckDB(logger, worker);
await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
URL.revokeObjectURL(worker_url);
window._db = db;
return db;
};
</script>
<script type="module">
import * as wasm from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm';
const bg = await fetch(`https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/shell_bg.wasm`);
import * as duckdbduckdbWasm from "https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm";
window.duckdbduckdbWasm = duckdbduckdbWasm;
getDb().then(async (db) => {
var container = document.getElementById("container");
var shell = await wasm.embed({
shellModule: bg.arrayBuffer(),
container: container,
resolveDatabase: async () => { return db; }
})
console.log("shell", shell);
});
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Working example for static html (using 1.28.1-dev258.0): <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WASM Local Test</title>
<style>
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@latest/css/xterm.min.css">
</head>
<body>
<div id="container"></div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
var conn;
var container;
var db;
</script>
<script type="module">
import * as duckdb from './js/duckdb-wasm.js';
//import * as duckdb from './js/[email protected]';
//import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm';
//import * as duckdb from '@duckdb/duckdb-wasm';
console.log("imported?", duckdb);
//https://stackoverflow.com/questions/21408510/chrome-cant-load-web-worker
//const MANUAL_BUNDLES: duckdb.DuckDBBundles = {
//var JSDELIVR_BUNDLES = duckdb.DuckDBBundles = {
var MANUAL_BUNDLES = {
mvp: {
mainModule: './duckdb-mvp.wasm',
mainWorker: './duckdb/duckdb-browser-mvp.worker.js',
},
eh: {
mainModule: './duckdb-eh.wasm',
mainWorker: './duckdb/duckdb-browser-eh.worker.js',
},
};
//const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
//var BUNDLES = JSDELIVR_BUNDLES;
var BUNDLES = MANUAL_BUNDLES;
console.log("bundles:", BUNDLES);
// Select a bundle based on browser checks
const bundle = await duckdb.selectBundle(BUNDLES);
console.log("mainWorker?", bundle.mainWorker);
// Instantiate the asynchronous version of DuckDB-Wasm
const worker = new Worker(bundle.mainWorker);
const logger = new duckdb.ConsoleLogger(); // todo: change the log level
db = new duckdb.AsyncDuckDB(logger, worker);
await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
//URL.revokeObjectURL(worker_url); // for http version
//https://observablehq.com/@kimmolinna/duckdb-wasm-shell-on-observablehq
container = document.getElementById("container");
//import * as wasm from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm';
//import * as wasm from './js/[email protected]';
import * as wasm from './js/duckdb-wasm-shell.js';
console.log("wasm", wasm);
//await db.registerFileHandle('local.parquet', pickedFile, DuckDBDataProtocol.BROWSER_FILEREADER, true);
//await db.registerFileURL('remote.parquet', dataUrl, duckdb.DuckDBDataProtocol.HTTP, false);
//const res = await fetch(testUrl); // could be very big file
//await db.registerFileBuffer('buffer.parquet', new Uint8Array(await res.arrayBuffer()));
conn = await db.connect();
var shell = await wasm.embed({
shellModule: 'duckdb/shell_bg.wasm',
container: container,
resolveDatabase: async () => {return db;}
})
console.log("shell", shell);
//https://github.com/duckdb/duckdb-wasm/discussions/1621 - load spatial extension
//SET custom_extension_repository = '.';
//for file:///
var loadResult = await conn.query(`
SET custom_extension_repository = './duckdb';
LOAD 'parquet.duckdb_extension.wasm';
LOAD 'spatial.duckdb_extension.wasm';
`);
console.log(loadResult.toArray().map((row) => row.toJSON()));
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
I have tried this static example, but it fails. I have tried a few different ( static, simple) approaches, and all fails at the resolution of the cdn server wasm libraries. I am seeking an appproach where I do not have to run npm or similar. None of the approaches: Worked. What is the recommended way of getting the libraries ( or even serving them locally?). Apologies for naive questions ,I am a js noob, but keen to get duckdb running in the browser. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I would like to have something like the example here: https://github.com/duckdb/duckdb-wasm/blob/main/examples/bare-browser/index.html but adapted for duckdb-wasm-shell
Or if that is not feasible, a way to use the shell with a local file server/host without the need to mess with build tools
Beta Was this translation helpful? Give feedback.
All reactions