Electron app bundler

[whitphx]

Rel #69

1. Publish @stlite/desktop with its ./build directory in which the built JS app code is included. Publish @stlite/desktop NPM package #314
2. Publish @stlite/stlite-kernel with the wheels that is needed in the following bundling steps. feature/bundle kernel package #302

Then, the Streamlit app creator who wants to bundle the app with Electron will do the following steps.

1. Create an electron app project that only contains package.json looking like below. It is extracted from the packge.json in @stlite/desktop only with the electron-builder configs and @stlite/stlite-kernel dependency, from which the wheels are loaded at the bundle time.

{
  "name": "xxx",
  "version": "xxx",
  "main": "./build/electron/main.js",
  "dependencies": {},
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "appId": "your.id",
    "mac": {
      "category": "your.app.category.type"
    },
    "productName": "xxx",
    "extends": null,
    "files": [
      "build/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "devDependencies": {
    "electron": "20.2.0",
    "electron-builder": "^23.3.3"
  }
}

2. Copy the ./build directory from @stlite/desktop.
3. Run ./bin/dump_snapshot.ts from @stlite/desktop (this scripts needs the wheel files from @stlite/stlite-kernel).
4. Run yarn dist.

In the future, creating the project with package.json above can be automated like yarn create.

[whitphx]

At this point, use #322 (comment)

[whitphx]

Current version of the stlite desktop app development

[Updated: use @stlite/desktop-cli instead of @stlite/desktop]

Repo: https://github.com/whitphx/stlite-desktop-example
Sample apps: https://github.com/whitphx/stlite-desktop-example/releases/tag/v0.2.0

1. Create a new NPM project with the following package.json. Edit the name field.

{
  "name": "xxx",
  "version": "0.1.0",
  "main": "./build/electron/main.js",
  "scripts": {
    "dump": "dump-stlite-desktop-artifacts",
    "serve": "NODE_ENV=\"production\" electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "files": [
      "build/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "devDependencies": {
    "@stlite/desktop-cli": "^0.12.0",
    "electron": "20.2.0",
    "electron-builder": "^23.3.3"
  }
}

2. Run npm install or yarn install.
3. Create streamlit_app directory.
   • Any directory name can be used here.
4. Create streamlit_app/streamlit_app.py.
   • Change the directory name if you used a different name in the previous step.
5. Write your Streamlit app code in streamlit_app/streamlit_app.py.
6. Optionally, you can add more contents in the directory, including pages/*.py for MPA, any data files, and so on.
7. Run yarn dump streamlit_app. If some packages are needed, use -r option like yarn dump streamlit_app -r <PackageName1> ... <PackageNameN>.
   • This command creates ./build directory. It includes
     • The stlite bare app files.
     • streamlit_app directory copied from the one you created in the previous steps.
     • site-packages-snapshot.tar.gz that includes the installed package files.
8. Run yarn serve for preview. Run yarn dist for packaging.
   • electron-builder is used (see the "scripts" field in the package.json) and it simply bundles the ./build directory created in the step above. If you want to customize the built app, e.g., setting the icon, follow its instruction.

[whitphx]

TODO:

• Automate scaffolding Scaffolding command for creating a new desktop app project #333.
• Create @stlite/desktop-cli package to provide the dump-stlite-desktop-artifacts command specifying the dependencies. node-fetch and pyodide should be omitted from the user-level package.json Done Create @stlite/desktop-cli #330 .

[blackary]

FYI, I get this when trying to open the sample app dmg on my M1 mac

[blackary]

When I built my own locally, it worked on the first run, but when I closed it (with the x) and opened it again, I got this error

[whitphx]

@blackary I don't know why it did not work (it was built on my local machine and uploaded manually to the GitHub release page).
However I set up a different build and release flow on the CI/CD and created new files: https://github.com/whitphx/stlite-desktop-example/releases/tag/v0.2.0

[blackary]

@whitphx Thanks! I installed the new dmg, and it installed fine, but when it opens on my machine, it shows the loading bar briefly, then goes to a blank page

[mkisono]

@whitphx

Current version of the stlite desktop app development

I followed the steps and it's working fine on my mac.

When I run the following code as strreamlit_app.py, the progress bar didn't actually "progress". It just showed the end result. Is this by design or limitation?

import time
import streamlit as st

my_bar = st.progress(0)

for percent_complete in range(100):
    time.sleep(0.1)
    my_bar.progress(percent_complete + 1)

[whitphx]

@blackary Thanks,
Can you please tell if there are any errors on the console by opening the dev console from the menu as below?

[whitphx]

@mkisono Thank you for trying it out, and

it's working fine on my mac.

it was a great report :)

---

It just showed the end result. Is this by design or limitation?

it looks like the known issue as #34 (comment) ; time.sleep() does no-op on Pyodide runtime (pyodide/pyodide#2354). It is a limitation of the Wasm-ported Python runtime which may be resolved in the future.
#64 may also be the related topic.

[blackary]

@blackary Thanks,
Can you please tell if there are any errors on the console by opening the dev console from the menu as below?

@whitphx I gave that a try, and now am unable to reproduce the blank page I was getting 🤷 . So, the dmg you made is working for me now.

(Though, I still get that same error if I close and reopen the app)

[whitphx]

I will close this issue.
The next TODOs have been created as separate issues.

[weissenbacherpwc]

is this still working or is there an update on how to convert a streamlit app to .exe?