Usage

This describes the overall workflow to setup an emscripten-32 environment with micromamba, packing this environment with empack and use this environment with pyjs.

Install micromamba

We strongly recommend to use micromamba when using pyjs. Please refer to the mamba and micromamba installation guide in the documentation.

Create the working environment

First we create an environment containing all the dev-dependencies.

name: pyjs-dev-env
channels:
  - conda-forge
dependencies:
  - python
  - curl
  - empack >= 1.2.0
  - emsdk >=3.1.11

Assuming the yaml file above is named pyjs-dev-env.yaml, we can create the dev-environment with:

micromamba create \
    --yes --file  pyjs-dev-env.yaml  \
    -c https://repo.mamba.pm/emscripten-forge \
    -c https://repo.mamba.pm/conda-forge

Create the web environment

This is the environment which will be available from the browser / nodejs.

name: pyjs-wasm-env
channels:
  - https://repo.mamba.pm/emscripten-forge
  - conda-forge
dependencies:
  - pyjs == 0.11.1
  - numpy
  - pyb2d

Assuming the yaml file above is named pyjs-wasm-env.yaml, we can create the web-environment with:

micromamba create \
    --platform=emscripten-32 \
    --yes --file  pyjs-wasm-env.yaml  \
    -c https://repo.mamba.pm/emscripten-forge \
    -c https://repo.mamba.pm/conda-forge

Pack the environment

First we download the empack default configuration github

curl https://raw.githubusercontent.com/emscripten-forge/recipes/main/empack_config.yaml --output empack_config.yaml

Next we invoke empack to pack the conda-environment pyjs-wasm-env into *.data/*.js files which can be fetched and imported from JavaScript.

empack pack env \
    --env-prefix $MAMBA_ROOT_PREFIX/envs/pyjs-wasm-env \
    --outname my_sample_application \
    --config empack_config.yaml \
    --config extra_config.yaml  \
    --outdir output \
    --export-name globalThis.pyjs \
    --split

Use It

Now that we packed our environment in (multiple) JavaScript files, we can start using pyjs:

Initialize pyjs

The initialization of pyjs in JavaScript unfortunately still a bit complicated:

// pyjs itself
import {createModule} from '../pyjs_runtime_browser.js';
let pyjs = await createModule()
globalThis.pyjs = pyjs

// content of the packaged wasm environment
const { default: load_all }  = await import('../my_sample_application.js')
await load_all()
await pyjs.init()

Use Pyjs

The initialization of pyjs in JavaScript unfortunately still a bit complicated:

// pyjs itself
pysjs.exec(`
import numpy
print(numpy.zeros([10,20]))
`)

Within the python code called from JavaScript, one has access to the pyjs python module. This allows access to the JavaScript side from Python:

from pyjs.js import console

console.log("print to browser console")