PostgreSQL Running in the Browser via WASM

I’ve previoulsy written about WASM support for in-browser SQLite databases, as well as using the DuckDB query engine to run queries over various data sources from a browser based termianl (for example, SQL Databases in the Browser, via WASM: SQLite and DuckDB and Noting Python Apps, and Datasette, Running Purely in the Browser), but now it seems we can also get access to a fully blown PostgreSQL database in the browser via snaplet/postgres-wasm (announcement; demo; another demo). At the moment, I don’t think there’s an option to save and reload the database as a browser app, so you’ll need to initially load it into a tab from either a local or remote webserver (so it’s not completely serverless yet…).

Key points that jump out at me from the full demo:

  • you get a psql terminal in the bowser that lets you run psql commands as well as SQL queries;
  • you can save and load the database state into browser storage:

You can also save and load the database state to/from a desktop file.

  • a web proxy service is available that lets you query the database from a remote connection; that is, the db running in your browser can be exposed via a web proxy and you can connect to it over the network. For example, I connected to the proxy from a Python Jupyter kernel running in a Docker container on my local machine; the database was running in a browser on the same machine.

From an educational perspective, having access to a fully blown DBMS engine, rather than just a simple SQLite database, for example, is that you get access to both the psql command line line, but also database management tools such as roles and role based permissions. Which means you can teach a lot more purely within the browser.

Note that I think a webserver is still required to load the environment until such a time as a PWA/progressive web app version is available (I don’t think datasette-lite is available as a PWA yet either? [issue]).

In terms of managing a learning environment, one quick and easy way would b to run two open browser windows side by side: one containing the instructional material, the other containing the terminal.

Questions that immediately come to mind:

  • What’s the easiest way is to be able to run the proxy service on localhost?
  • Is it in-principle possible for the database server to run as a browser app and publish its service from there onto the localhost network?
  • Is there in-principle way for the database server to run in one browser tab and expose itself to a client running in another browser tab?
  • Can you have multiple connections onto the same browser storage persisted database from clients open in different/multiple tabs, or would you have to hack the common storgae by repeatedly saving and loading state from each tab?
  • At the moment, we can’t connect to postgres running wheresoever from a in-browser Python/Pyodide environment (issue), which means we can’t connect to it from a JupyterLite Python kernel. Would it be possible to create some sort of JupyterLite shim so that you could load a combined JupyterLite+postgres-wasm environment to give you access to in-browser postgres db storage via JupyterLite notebook scripts?
  • How easy would it be to fork the jupyterlite/xeus-sqlite-kernel to create a xeus-postgres-wasm kernel? How easy would it be to also bundle in pandas and some sql magic for a pandas/postgres hybrid, (even if you have access to no other python commands than pd. methods (and what would that feel like to use?!), along with support for pandas plots/charts?
  • How easy would be to wire in some custom visual chart generating Postgres functions?!
  • With a python-postgres-wasm, could you support the creation of Postgres/Python custom functions?

It could be so much fun to work on a computing course that tried to deliver everything via the browser using a progressive web app, or at most a web-server…

Author: Tony Hirst

I'm a Senior Lecturer at The Open University, with an interest in #opendata policy and practice, as well as general web tinkering...

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: