Adding web support

[SebieF]

Hello, first of all: Thanks for the amazing project, it allows me to use a lot of scientific python packages, that I would have to re-write in Dart otherwise :)

I hope that I did not overlook something, but it seems like there is no implementation for running the python app on the web platform yet. This PR solves that situation.

About my approach:

• Package the python app to a .zip as previously
• Unzip the package in the asset directory and add all relevant paths to the asset section in pubspec.yaml
• Running SeriousPython.run on the browser does the following:
  • It adds the pyodide.js library from https://cdn.jsdelivr.net/pyodide/v0.27.2/full/pyodide.js to the html file
  • Then, all required packages are read from the requirements.txt file and imported via pyodide
  • All additional modules are loaded (other python files, if provided)
  • I am using the environment variables to declare, which command should be executed (to enable a "server-like" architecture)
  • The result is read in Dart from a pyodide_result variable that needs to be assigned with the command result and returned as a string

I used this synchronous command approach, because for me, it does not seem to be possible to use Flask inside of a browser environment.

I also know that my approach can definitely be improved, but I unfortunately do not have the time currently to do so. I still wanted to create the PR to get feedback on the general approach and to enable community efforts :)

Possible improvements:

• Code cleanup (serious_python_web.dart got a bit messy with using Dart, java script and python all in one file...)
• Possibly: Do use the .zip file instead of the unpacked archive by using unpack_archive from python: https://pyodide.org/en/stable/usage/loading-custom-python-code.html
• Improve documentation and stability
• I am not sure if the existing Pyodide package command is actually required, because when improting the additional packages, packages that cannot be loaded are ignored anyway: https://github.com/biocentral/serious-python/blob/cc6d296dd06ad265e3bf97021368a9952987a89e/src/serious_python_web/lib/serious_python_web.dart#L78 But maybe I also got the idea wrong, how I should use the virtual environment from within pyodide...
• I am not able to test if my changes had any impact on mobile (Android, iOS) platforms at the moment

I am grateful for receiving any feedback!

[CLAassistant]

All committers have signed the CLA.

[FeodorFitsner]

I'm going to take a look when have time! Looks interesting. Right now web support is a part of Flet app template which is not ideal.

[FeodorFitsner]

Just a thought - it would be great to use serious_python_web for both client-side runtime (Pyodide) and server-side (connecting to server Python via websockets), like see this page is adoptable for both scenarios: https://github.com/flet-dev/flet/blob/main/client/web/index.html

I see you are dynamically injecting JS references, which I like, I'm just wondering if we can adopt the approach for server-side run too.

[SebieF]

@FeodorFitsner Hello, I just wanted to make you aware that I pushed some significant code cleanups and rebased my branch on your latest changes.

Extra note:
The way I am currently handling the python package installation does not require bundling the app or downloading the packages. Everything is done using pyodide's loadPackage function, non-working dependencies like Flask are simply ignored. This would reduce the "bundling" to something like:

cp -r python_app/ assets/
rm -rf assets/python_app/{__pypackages__,venv,.venv}  # Delete unnecessary directories to reduce app size

I am happy to submit a pull request for that, once this PR is merged. Thanks for maintaining this project!

[FeodorFitsner]

Thanks for contributing this, and apologies for leaving it open for so long!

The use case is valuable: Flutter apps using serious_python directly should ideally be able to run Python on the web too. However, Flet already has a worker-based Pyodide runtime with application unpacking, dependency installation, and bidirectional messaging. Maintaining a separate implementation would duplicate that work.

Since this PR was opened, serious_python’s packaging and runtime APIs have also changed substantially. Rather than adapting this implementation, I think the better direction is to extract Flet’s existing browser runtime into a reusable serious_python_web package that both Flet and standalone Flutter apps can use.

I’m closing this PR, but the broader idea remains worthwhile. Thank you for exploring it and sharing your implementation!

[SebieF]

Hello @FeodorFitsner and thanks for coming back to this! We will then continue to have the implementation in our fork as we have been using it in production for quite some time now. Maybe you could point me to your flet browser implementation that you have in mind, so we can checkout if it would make sense for us to adapt that as well?