Introducing, PyScript! ⟨py⟩

Technical Topics PyScript
,
1

Imagine a tool that makes front-end development more accessible to Python practitioners, and puts the power of Python into the hands of people that have historically focused on front-end development…

Introducing, PyScript!

Simply put, PyScript is a tool that brings Python to the browser. PyScript is programming for the 99%. :fist:

Here are some helpful resources to get you started on your PyScript adventures:

PyScript site

PyScript on Github

PyScript official announcement on Anaconda.com

PyScript post on the Anaconda Engineering blog

PyScript post on Anaconda Nucleus

PyScript Nucleus Project

Happy PyScripting! Let’s create something great, together. :raised_hands:

22 Likes
2

Where is the “pyscript.js” exactly?

Do I have to build that file from source? or?

rlo@rlo-mac03 pyscript-main % grep -ir “pyscript.js” *
GETTING-STARTED.md:│ ├── pyscript.js
GETTING-STARTED.md:│ └── pyscript.js.map
GETTING-STARTED.md:
GETTING-STARTED.md:
GETTING-STARTED.md:
GETTING-STARTED.md:
README.md:
hello_world:
hello_world.html:
pyscriptjs/rollup.config.js: file: “examples/build/pyscript.js”,
pyscriptjs/examples/bokeh.html:
pyscriptjs/examples/simple_clock.html:
pyscriptjs/examples/todo-pylist.html:
pyscriptjs/examples/matplotlib.html:
pyscriptjs/examples/handtrack/say_hello.html:
pyscriptjs/examples/repl.html:
pyscriptjs/examples/panel_stream.html:
pyscriptjs/examples/webgl/raycaster/index.html:
pyscriptjs/examples/bokeh_interactive.html:
pyscriptjs/examples/d3.html:
pyscriptjs/examples/toga/freedom.html:
pyscriptjs/examples/toga/README.md:exists, and the build/pyscript.js file has been compiled.
pyscriptjs/examples/folium.html:
pyscriptjs/examples/panel.html:
pyscriptjs/examples/antigravity.html:
pyscriptjs/examples/repl2.html:
pyscriptjs/examples/numpy_canvas_fractals.html:
pyscriptjs/examples/panel_deckgl.html:
pyscriptjs/examples/panel_kmeans.html:
pyscriptjs/examples/hello_world.html:
pyscriptjs/examples/mario/play_mario.html:
pyscriptjs/examples/todo.html:
pyscriptjs/examples/altair.html:
rlo@rlo-mac03 pyscript-main % find . -name pyscript.js
rlo@rlo-mac03 pyscript-main % find . -name todo.html
./pyscriptjs/examples/todo.html
rlo@rlo-mac03 pyscript-main % find . -name pyscript.js
rlo@rlo-mac03 pyscript-main %

2 Likes
3

Hi @raymond.lo ,

Thanks for replying about this!

For now, you can reference (or download) the pyscript.js file hosted at: https://pyscript.net/alpha/pyscript.js

We will update the process shortly.

Thanks, again. Please come back and show us what you create with PyScript!

2 Likes
4

Got it working :slight_smile: Nice.

2 Likes
5

Hi @calvarado

Is there another another link to pyscript.js? I cannot access a “newly created domain” for security reasons.

2 Likes
6

I downloaded and ran one of the todo.html example from my windows 10 laptop.
Am I missing dependencies?

image
image1040×278 12.1 KB

1 Like
8

hi,

i think you might have downloaded the zip. next, you have to build from source with nodejs.

use nvm to install nodejs, then run “nvm install 16; nvm use 16”

cd into the dir with the “package.json” file and run “npm install”

then run “npm run dev”

1 Like
9

Got it working, thanks :slight_smile:

are these warnings normal?

image

i didnt get below message but got the server running fine

 Your application is ready~! 🚀

  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose

also does it really run fully in the browser through webassembly? or is there any backend processing in the nodejs server?

1 Like
12

hi

pyscript does not use backend processing in nodejs or any other backend tech. once you build from source you can host in aws s3 or netlify or any other static content hosting system

3 Likes
13

The latest LTS version didn’t work. google suggested using 16.13.2 as it used older version of npm. That managed to get past ‘npm install’, however the next command ‘npm run dev’ introduced a new error:

image
image1755×932 45.2 KB

(thank you for earlier reply)

1 Like
14

let me look into this.

can you make an issue over at Issues · pyscript/pyscript · GitHub ?

1 Like
15
1 Like
16

Hi, I love this project but I’m having an hard time trying to share data between Python and JavaScript.
I wrote a simple example but I’m not able to make it work.

I’d really appreciate some help, thank you!

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>

    <py-script>
py_string = "This is a Python string!"
    </py-script>

    <script>
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      var js_string = "This is a JavaScript string!";
      div1.innerHTML = js_string
      div2.innerHTML = py_string
    </script>  

    <py-script>
from js import console
console.log(js_string)
    </py-script>

  </body>
</html>
1 Like
17

Hi,
To get JS variables into Python
We have to import the variable it self
As below:

   <py-script>
from js import js_string <!-- Should import the variable -->
console.log(js_string)
    </py-script>
1 Like
18

Thank you that worked, how can I get Python variables into JS?

1 Like
19

Pretty much here is explained:
Until pyscript documentation is published read this for now:

https://pyodide.org/en/stable/usage/type-conversions.html

20

Reading through this forum a lot of people seem to be misunderstanding the limitations of PyScript. Trying to use libraries that require access to system sockets, calls, or start processes.

While education is going to always be challenging with a library like this I wonder if it would make sense to highlight some common limitations on the front of the site itself? Like instead of using requests use pyfetch (or whatever library ends up being standardized, and a link to some documentation), and examples of things which can’t be done such as scanning user processes, or launching a new process, or connecting directly to sockets, etc…

1 Like