cra-template-pyodide-test

{{cookiecutter.project_name}} Frontend

The content of this directory was created in collaboration with intertec. It contains the frontend code, the design elements as well as parts necessary for the build pipeline for the {{cookiecutter.project_name}} application.

Pyodide based 'Backend'

{{cookiecutter.project_name}} is a pure frontend application, no separate backend needs to be deployed. The python code is converted to web-assembly in each CI build and is included into the application there. See the pyodide and build_app jobs in the ci pipeline

Local Build

A dockerfile for building and serving the application locally is provided here. The pyodide files have to be put into public/pyodide for a successful build, you can get them e.g. from the latest successful pipeline. Then you can build the image by running (from the frontend directory)

docker build -t {{cookiecutter.project_name}}:latest Dockerfile-local

Available Scripts

This project was bootstrapped with Create React App. To run the app in the development mode (The page will reload if you make edits.):

yarn start

To launch the test runner in the interactive watch mode:

yarn ci

It also starts a local server and serves the public folder with pyodide files, so that we can test the pyodide files are there.

To build the app for production to the build folder.

yarn build

To create documentation out of code annotations:

yarn docs

Learn More

You can learn more in the Create React App documentation. To learn React, check out the React documentation.

Web Worker

Pyodide worker file for separate thread

Python packages loading and Python code execution takes places in a separate thread, with the help of a Web Worker file pyodide.worker.js placed directly in public folder. The worker file could not be included in the src folder properly, it uses the command importScripts that caused the build process the fail. Execution in a separate thread ensures the loading of huge pyodide packages does not block the UI.

Communication from the main thread

To send messages to and from the main JS thread, we are using an instance of an utils\PyodideWorkerWrapper class that forward the messages via streams/ observable so that we can easily subsribe thoughout our whole app to these messages. But it main purpose is to expose 4 methods, which take care of communiction with the Web Worker:

runPythonCode

runPythonCode(`
      from game.game import Game, FakeClassifierPatientProvider
      from game.constants import Disease, TreatmentCost    
      from kale.sampling.fake_clf importSufficientlyConfidentFC
  `);

runPythonWithGlobals

runPythonWithGlobals(
  { patientsNumber: patientsNumber },
  `
        from js import patientsNumber;
        game.start_new_round(patientsNumber)
        print("Round started!")
      `
);

getObject

getObject(`round_json`);

loadPyodide which returns Promise:

return loadPyodide(['kale', 'numpy', 'pydantic', 'names']).then(() => {
  runPythonCode(`
         from game.game import Game, FakeClassifierPatientProvider
         from game.constants import Disease, TreatmentCost
         from kale.sampling.fake_clf import SufficientlyConfidentFC
     `);
});

Caching

The we are using default cache-first mechanisam that comes with create-react-app. That means that all static files, including Pyodide files, after the first visit, are served from the cache. When these files are changed on the next build, the new cache is created but it is activated on the next time a fresh window is opened. You can disable this by replacing register() to unregister() in index.js file: serviceWorker.register();

Config

The original webpack config that comes with create-react-app is overriden with react-app-rewired and customize-cra. The added config is located in config-overrides.js file