phorward/pyodide-app-stub

Quickly start creating new webapps with Pyodide

pyodide-app-stub

This is a stub for creating a new Python-based webapp with Pyodide and the viur-html5 library.

Setup

Clone the repository including its submodule (html5) into a directory of your choice.

Usage

To immediatelly test your app, run ./test-server.py and open http://localhost:8080.

When Python modules are added, run ./gen-files-json.py to build the Python files mapping that is used by the app boostrapper.

In case you want to add additional modules, you have to hack the file app.js.

Using stand-alone Pyodide

By default, apps based on this stub use the Pyodide version from the CDN hostet at pyodide-cdn2.iodide.io. Anyway, you can host your own Pyodide. For this, you can either download a Pyodide binary build from here, or you once run the service script ./get-pyodide.py to automatically download and install Pyodide from the official release tarball and setup a minimal version with only setuptools and micropip as packages.

Once this is done, flip the comment lines in app.html to use the locally served version.

Files

The repository contains these files.

• app.html contains the basic HTML structure into which the app is rendered. Switch the Pyodide version you want to use (local or CDN) here.
• app.js contains the app bootstrapper which downloads and installs Python files for the Pyodide environment from Python source files. See comments there for details.
• app.py contains a little demo app code. Here you have to put your Python code!
• files.json is generated by gen-files-json.py.
• gen-files-json.py is a tool that generates files.json and omits tooling scripts. If you add more Python modules and import them in __init__.py or app.py, run this script to update your files.json.
• get-pyodide.py downloads and installs a stand-alone Pyodide package into the ./pyodide folder to be locally served (see above).
• html5 is the viur-html5 library as a submodule. It is also added to files.json and required to implement Python webapps nicely.
• __init__.py is the general app entry point.
• test-server.py is an http.server-based simple web-server for fast localhost serving (see above).

All files can be modified to fit the needs and purposes of your app.

Real world apps

This app stub is only a minimal example. The currently most prominent real world example for an app written using this technique is our viur-vi administration tool. We used it also for several closed-source projects for our customers.

Tips & Tweaks

Google App Engine

To serve your Pyodide-app via Google App Engine, add the following lines to your app.yaml file and modify them when needed.

handlers:
- url: /app/s/pyodide/(.*\.wasm)$
  static_files: app/pyodide/\1
  upload: app/pyodide/.*\.wasm$
  mime_type: application/wasm
- url: /app/s
  static_dir: app

Apache Webserver

For apache web-server, this .htaccess configuration helped to serve the app.

RewriteEngine off
Options -ExecCGI +Indexes 
IndexOrderDefault Descending Date

#Header always set Access-Control-Allow-Origin "*"
#Header always set Access-Control-Allow-Methods GET

<FilesMatch "\.py$">
	Options +Indexes -ExecCGI -Multiviews
	Order allow,deny
	Allow from all
	RemoveHandler .py
	AddType text/plain .py
</FilesMatch>

<FilesMatch "\.data$">
	Options +Indexes -ExecCGI -Multiviews
	Order allow,deny
	Allow from all
	RemoveHandler .data
	AddType application/octet-stream .data
</FilesMatch>

<FilesMatch "\.wasm$">
	Options +Indexes -ExecCGI -Multiviews
	Order allow,deny
	Allow from all
	RemoveHandler .wasm
	AddType application/wasm .wasm
</FilesMatch>