Help with JupyterLite on Scrimba.com code learning platform?

Hi All, :wave:
First post (only able to post 2 links, sorry)

Trying to figure out IF and HOW it’s possible to get Jupyterlite running on Scrimba .com online code learning platform. In order to create some ’datascience’ based courses leveraging uniqueScrimba UX.

I think the question might be more or less the same as :
How can I run JupyterLite on Trinket .io, repl .it, jsfiddle .net, codepen .io/ or any of the other online IDE’s?

I am not proficient with JS or script tags in html, so there is a very good chance my issues are on that level, and all that is needed is the right import statement(for jupyterlite) in a HTML file?

What am I trying to do?
Create more advanced datascience python courses using Scrimbas unique UX, which allows creation of unique format code-learning courses ( a video you can code in)(this format was first invented by Khan Academy (afaik) in abt 2015, and picked up by Scrimba a few years ago as basis for their whole existence)

Scrimba is a frontend(JS) platform, so in order to create a free basic Pythoncourse Learn Python For Free I used Brython plugin brython.info, which recompiles all python to JS in browser…
The Python course is only one on web I am aware of with this UX. call it a USP if you wish…:wink:

Brython plugin does not support C modules of python, so Progressing to more advanced datascience topics/ tutorials has been blocked.
It may also be possible using Pyodide, but I have not been able to get it to work so far. (same issue as stated above, if someone can get it to run on scrimba, I am probably all set, and can start creating)

My hope is to get help/ assistance to try to get jupyterlite up and running on scrimba, to be able to create some more advanced python courses on Scrimba

How Scrimba works (for python with brython):
The basic set-up is a index.html page where imports are specified and then using a separate index.py where code is actually written (the source of the brython execution)
example can be seen here(fully editable, and you can edit and change script imports and run code)
https://scrimba.com/scrim/cob564d3c9096333ab4197e39

Perhaps all that is needed is to import the right package and use the right javascript commands?

Appreciate any assistance, sorry if unclear and happy to explain more about any aspect that might help

Thank you in advance :pray:
/Olof

The embedding docs would be the first place to look.

If you don’t need all the jupyterlite-specific features (widgets, custom wheel loading, worker isolation, labextensions, rich display, etc), looking upstream at pyodide might give you more flexibility.

2 Likes

Wow! Thank you so much @bollwyvl :pray: .
I have been trying to figure this out for over a year, on and off…and dead-ended first with pyodide, and now…
I included the Iframe…and worked immediately…so awesome! Thank you!

Can I reasonably expect that iframe-page to stick around for a few years(a while)?
Or can I in some way load jupyterlite in another way?

So what is running in Iframe is REPL? Which has some subset functionality of jupyterlite, or is it all of it, except? (I’ll experiment and learn how to use it properly)…didn’t quite understand relationship jupyterlite-REPL…

Unfortunately, the Recording function in Scrimba doesn’t capture my actions in the ’minibrowser’( where the jupyterlite exists), so It can’t be used for recording tutorials/ courses, unless I am missing something.
Looks like Scrimba just records what happens in ’main repl windows’?
This doesn’t fully make sense for me yet, but I am open to some glitch in the matrix at play here…
The recording I made doesn’t show jupyterlite part and what I am typing into it(press play), it just displays a white empty browser…but if you run (ctrl+s) in the recording/ scrim jupyterlite fires up…
here’s the scrimba ’recording ’ I made testing jupyterlite:

Test-Jupyterlite

Pyodide, You are right - I tried that first, but following the instructions on page(see below link + pic for what I experimented with last), and trying the link you included , it doesn’t seem to work in Scrimba…

I managed to get it running in another REPL environ, by just pasting into HTML part…and running, so guessing it is something with Scrimba…(see last picture for error from inspect-console)
Or perhaps I just messed up in my attempt to do it?
Would it be possible to do something similar to what you pointed me to above, with Pyodide, or maybe just tell me what mistake I made, and how haven’t understood how to do it properly?:wink:

https://scrimba.com/scrim/coafe4dd692600598b267757b (ctrl+s to run)

I will explore the Iframe REPL, what limits are, and how I could use.

Again thank you so very much!
I will keep experimenting, and appreciate any input to bring me closer to using jupyterlite/ pyodide or any other tool that will allow me to create more advanced python tutorials on scrimba …

1 Like

And the picture with the console error(couldn’t post more pics in one post, since i am new…)
image

stick around for a few years

if you intend to monetize this in some way: I wouldn’t rely on jupyterlite (which is still very much beta software), as-hosted, or scrimba for that matter, to be around/work the same way in a few years. whatever you do in scrimba, make sure you have the content backed up someplace else as well.

load jupyterlite in another way

scrimba lock-in aside: jupyterlite is designed, to, wherever possible, allow for self-hosted, offline-capable, reproducible builds. to be “sure” about the open source side of the house, you’d want to build and deploy your own site. The optimized repl-only UI assets are pretty small: <10mb, last i checked.

For python, the biggest source of bitrot is going to be pyodide itself and the wheels: downloading the full pyodide installation (~300mb) and all the wheels (???) into a pypi folder is the only way to be sure. This is starting to be some “real” disk space, but static hosting is free/cheap, and it’s really a pittance for a future day where, “oops, all my dependencies disappeared,” or “after a browser update they won’t load them anymore.”

So what is running in Iframe

pretty much “all” of jupyterlite is running there: it’s a full, extensible application, but just has fewer moving parts, and works with fewer extensions. there are other applications, and more are planned.

Recording function in Scrimba doesn’t capture my actions

indeed, sounds like a scrimba problem. if scrimba will host your baseline assets, it would probably work. on the jupyterlite side: we’re probably not going to be pursuing a non-iframe-based embedding system for some time, unless someone comes along and builds it.

2 Likes