Using SQLite in the Browser

#beginners #javascript #webdev #tutorial

Easy peasy instructions to get sqlite working in the browser and not

First step download the following 3 files, the wasm binary and the wrappers:

wget https://nivethan.dev/js/sqlite/sql-httpvfs.js
wget https://nivethan.dev/js/sqlite/sql-wasm.wasm
wget https://nivethan.dev/js/sqlite/worker.js

If you feel uncomfortable downloading random binaries from random people, then you can use the instructions below to build it yourself. The building is relatively straightforward and doesn’t take long.

https://nivethan.dev/devlog/building-sql.js-httpvfs-for-the-browser.html

Now that we have the library, we can then include the sql-httpvfs.js as a module and use it with our sqlite database.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>title</title>
  </head>
  <body>
    <script type="module">
      import { load } from "/js/sqlite/sql-httpvfs.js";

      const worker = await load("/db/example.sqlite3");

      const result = await worker.db.query(`select * from mytable`);

      console.log(result);
    </script>
  </body>
</html>