jq kungfu

A jq playground, written in WebAssembly.

How?

jqkungfu was built by compiling jq into WebAssembly, so that it can run in the browser.

The advantages of this approach are:

Speed: After the initial load time, jq queries are very fast because there are no round trips to a server
Security: This approach runs jq within the browser; otherwise, we would need to carefully secure the app so that users can't run arbitrary commands on the server!
Convenience: The app is purely front-end and is hosted as static files on a cloud storage provider

Setup

To compile jq to WebAssembly, run the compile.sh code within an environment that includes Emscripten.

Docker

You can also build the web application into a Docker container! First build the container:

$ docker build -t jqkungfu .

And then run it, exposing port 80 on your host:

$ docker run --name jqkungfu -d --rm -p 80:80 -it jqkungfu

You should then be able to open your browser to 127.0.0.1, and interact with the application. When you are done, stop the container:

$ docker stop jqkungfu

Static

To generate the files in the docs folder here (for example, if you wanted to deploy on GitHub pages) we simply create symbolic links to index.html and the loading.gif:

mkdir -p docs
ln index.html docs/index.html
ln loading.gif docs/loading.gif

And then after we have started the container, copy the final web files to docs from it:

$ docker cp jqkungfu:/var/www/html/jq.wasm docs/jq.wasm
$ docker cp jqkungfu:/var/www/html/jq.js docs/jq.js

And then you can serve the folder with any web server of your choosing:

cd docs
python -m http.server 9999

Learn More

This app is part of an example built for my book Level up with WebAssembly. Check it out if you're interested in more details, or to learn how to create similar applications.

tcql / jqkungfu