---
# System prepended metadata

title: Write python in HTML
tags: [python]

---

# 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