# cra-template-pyodide-test

> Template to use Create React App with Pyodide

Latest version **0.3.0** (published 2020-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install cra-template-pyodide-test
pnpm add cra-template-pyodide-test
yarn add cra-template-pyodide-test
bun add cra-template-pyodide-test
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2020-11-03 |
| First published | 2020-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Viktorija Z |
| Maintainers | vikiintertect |
| Keywords | react, create-react-app, template, pyodide |

## Links

- npm: https://www.npmjs.com/package/cra-template-pyodide-test
- npm.io page: https://npm.io/package/cra-template-pyodide-test

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2020-11-03
- 0.2.0 — 2020-11-03
- 0.1.0 — 2020-11-03

## README

# {{cookiecutter.project_name}} Frontend

The content of this directory was created in collaboration with [intertec](https://www.intertec.io). 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](../.gitlab-ci.yml)

## Local Build

A dockerfile for building and serving the application locally is provided [here](Dockerfile-local). 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](https://gitlab.aai.lab/{{cookiecutter.gitlab_project_path}}/-/pipelines). Then you can build the image by running 
(from the frontend directory)

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


# Available Scripts

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
To run the app in the development mode (The page will reload if you make edits.):

```shell
yarn start
```

To launch the test runner in the interactive watch mode:

```shell
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.

```shell
yarn build
```

To create documentation out of code annotations:

```shell
yarn docs
```

#### Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).

# 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`

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

`runPythonWithGlobals`

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

`getObject`

```javascript
getObject(`round_json`);
```

`loadPyodide` which returns Promise:

```javascript
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

---
_Source: https://npm.io/package/cra-template-pyodide-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._