# Write python in HTML ###### tags: `python` Anaconda annonced a new project called "pyscript" to allow python script in HTML. It looks like write PHP with HTML but here use python. Here I take basic research and see how it is. Test environment: ubuntu 20.04 #### Build pyscript examples demonstrator install nodejs ``` root@ubuntu:~# curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh root@ubuntu:~# bash ./nodesource_setup.sh root@ubuntu:~# apt install -y nodejs ``` install rollup ``` root@ubuntu:~# npm install --global rollup added 1 package, and audited 2 packages in 662ms found 0 vulnerabilities ``` download pyscripts code ``` $ wget -q https://github.com/pyscript/pyscript/archive/refs/heads/main.zip $ unzip ./main.zip root@ubuntu:~# ls -l total 4460 -rw-r--r-- 1 root root 4558548 May 14 01:03 main.zip drwxr-xr-x 4 root root 4096 May 13 07:43 pyscript-main drwxr-xr-x 3 root root 4096 Sep 12 2021 snap root@ubuntu:~# cd pyscript-main/ root@ubuntu:~/pyscript-main# ls -l total 52 -rw-r--r-- 1 root root 157 May 13 07:43 CODE_OF_CONDUCT.md -rw-r--r-- 1 root root 5050 May 13 07:43 CONTRIBUTING.md -rw-r--r-- 1 root root 6082 May 13 07:43 GETTING-STARTED.md -rw-r--r-- 1 root root 3659 May 13 07:43 GOVERNANCE.md -rw-r--r-- 1 root root 11357 May 13 07:43 LICENSE -rw-r--r-- 1 root root 1209 May 13 07:43 MAINTAINERS.md drwxr-xr-x 5 root root 4096 May 13 07:43 pyscriptjs -rw-r--r-- 1 root root 2114 May 13 07:43 README.md -rw-r--r-- 1 root root 202 May 13 07:43 setup.cfg ``` install demo apps requirements ``` root@ubuntu:~/pyscript-main# cd pyscriptjs/ root@ubuntu:~/pyscript-main/pyscriptjs# npm install added 342 packages, and audited 343 packages in 28s 43 packages are looking for funding run `npm fund` for details found 0 vulnerabilities ``` start server ``` $ npm run dev --host .... copy files: ./src/ → ./examples/build Destination folder ./examples/build doesn't exist. Creating... ----> ./src//pyscript.py → ./examples/build/pyscript.py http://localhost:10001 -> /root/pyscript-main/pyscriptjs LiveReload enabled http://localhost:8080 -> /root/pyscript-main/pyscriptjs/examples .... ``` open browser ![](https://i.imgur.com/3AanRuO.png) ![](https://i.imgur.com/82XbJCv.png) #### Test pyscript create my pyscript html ``` root@ubuntu:~/pyscript-main/pyscriptjs# cd ./examples/ root@ubuntu:~/pyscript-main/pyscriptjs/examples# touch my_test.html ``` my_test.html ``` <html> <head> <title>PyScript Hello World</title> <link rel="stylesheet" href="../build/pyscript.css" /> <script defer src="../build/pyscript.js"></script> </head> <body> <py-script> import time from datetime import datetime now = datetime.now() now_str = now.strftime("%d/%m/%Y %H:%M:%S") print(f'{now_str} : hello!!!') time.sleep(10) now = datetime.now() now_str = now.strftime("%d/%m/%Y %H:%M:%S") print(f'{now_str} : hello again!!!') </py-script> </body> </html> ``` ![](https://i.imgur.com/E2X7C06.png) The output is not what I expected. According to https://github.com/pyscript/pyscript/issues/324, change to use "await asyncio.sleep" ``` #time.sleep(10) await asyncio.sleep(10) ``` ![](https://i.imgur.com/JqkoRcT.png) #### Run on Nginx server run nginx docker container ``` $ docker run -it --rm -d -p 8080:80 --name pyscript-web -v ~/Data/learn/python/pyscript:/usr/share/nginx/html nginx ``` copy the build folder to nginx html mounting folder ``` root@ubuntu:~/pyscript-main/pyscriptjs/examples# ls -l ./build/ total 8988 -rw-r--r-- 1 root root 3294902 May 14 01:11 pyscript.css -rw-r--r-- 1 root root 1192642 May 14 01:11 pyscript.js -rw-r--r-- 1 root root 2360427 May 14 01:11 pyscript.js.map -rw-r--r-- 1 root root 443297 May 14 01:11 pyscript.min.js -rw-r--r-- 1 root root 1887419 May 14 01:11 pyscript.min.js.map -rw-r--r-- 1 root root 12114 May 14 01:11 pyscript.py ``` ``` ycheng@NUC10:~/Data/learn/python/pyscript$ ls -l ./build/ total 8988 -rw-r--r-- 1 root root 3294902 May 14 01:11 pyscript.css -rw-r--r-- 1 root root 1192642 May 14 01:11 pyscript.js -rw-r--r-- 1 root root 2360427 May 14 01:11 pyscript.js.map -rw-r--r-- 1 root root 443297 May 14 01:11 pyscript.min.js -rw-r--r-- 1 root root 1887419 May 14 01:11 pyscript.min.js.map -rw-r--r-- 1 root root 12114 May 14 01:11 pyscript.py ``` create index.html ``` ycheng@NUC10:~/Data/learn/python/pyscript$ cat ./index.html <html> <head> <title>Pyscript Test</title> <link rel="stylesheet" href="../build/pyscript.css" /> <script defer src="../build/pyscript.js"></script> </head> <body> <py-script> import os from datetime import date def printLine(message): today = date.today() print(f'{today} : {message}.') hostname = os.uname() printLine(hostname) </py-script> </body> </html> ``` ![](https://i.imgur.com/Qo5srW4.png) #### Note - The pyscript is still beta version and some 3rd party modules are not supported such as requests, psutils. It relies on the pyodide support. - The python code is visible from browser. - It takes a bit time to process. #### Reference https://pyscript.net/ https://pyodide.org/en/stable/ https://github.com/pyscript/pyscript https://www.makeuseof.com/pyscript-beta-run-python-browser/ https://www.anaconda.com/blog/pyscript-python-in-the-browser https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04