Full basic example on Github Pages? #375
-
|
I've written a fair bit of JS, but all within a corporate environment, so I am not very familiar at all with bundling and hosting. Do you think that you could provide a basic example of getting DuckDB up and running in the most basic way possible (One HTML file and 1 JS file?)? I'm struggling to correctly import the DuckDB files when trying to host them on Github Pages. I installed the npm package and committed it to my repo, but I am getting a 404 when I try to import the libraries. Maybe Github Pages would be a good spot to host a simple example? Thank you so much! I am really excited about WASM DuckDB! I plan to see if I can build a pivot widget with it. Here is my failed attempt: My github repo for my github pages site <html>
<head>
<script type="module" src="..\..\..\..\post_creation_tools\testing_wasm_duckdb.js"></script>
</head>
<body><h1>All the fun is in the console!</h1></body>
</html>testing_wasm_duckdb.js console.log('Got to the start');
// Import the ESM bundle (supports tree-shaking)
import * as duckdb from 'https://alex-monahan.github.io/node_modules/@duckdb/duckdb-wasm/dist/duckdb-esm.js';
// Either bundle them manually, for example as Webpack assets
import duckdb_wasm from 'https://alex-monahan.github.io/node_modules/@duckdb/duckdb-wasm/dist/duckdb.wasm';
import duckdb_wasm_next from 'https://alex-monahan.github.io/node_modules/@duckdb/duckdb-wasm/dist/duckdb-next.wasm';
import duckdb_wasm_next_coi from 'https://alex-monahan.github.io/node_modules/@duckdb/duckdb-wasm/dist/duckdb-next-coi.wasm';
// ..., or load the bundles from jsdelivr
const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
// Select a bundle based on browser checks
const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
// Instantiate the asynchronus version of DuckDB-Wasm
const worker = new Worker(bundle.mainWorker);
const logger = new duckdb.ConsoleLogger();
const db = new duckdb.AsyncDuckDB(logger, worker);
await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
console.log('Got to the end');My error messages: |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 3 replies
-
|
Yes that's a very good idea. |
Beta Was this translation helpful? Give feedback.
-
|
@Alex-Monahan Please read the recent posts in #345. |
Beta Was this translation helpful? Give feedback.
-
|
Here are first very basic examples for: |
Beta Was this translation helpful? Give feedback.
-
|
Fantastic! Thank you! I'll try this out today. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! This was a huge help. Now I can better understand what's happening upon import! I got this working when running on localhost, and tomorrow I'll shoot for Github pages! |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! Can't wait to see it! |
Beta Was this translation helpful? Give feedback.
-
|
If you are trying to run this on Windows and you get Substitute the worker call on |
Beta Was this translation helpful? Give feedback.
Yes that's a very good idea.
We should just add minimal forkable example repositories with configured github actions to get people on speed.
But this is also blocked by #345.