Create Basic Webpage with Pyscript

In this article, we will cover how we can create a basic webpage with Pyscript

The Pyscript is a python framework/library that allows us to write python code inside HTML directly with the help[ of pyscript tag. Pyscript is a new project and is currently under development, but it has gained a lot of attention recently. It can make a page generate dynamically with the help of python. We will see the basic web page created with the pyscript library in this article.

Creating a Template

We’ll create a basic template in HTML in which we will further add the pyscript framework as a link and a script to the pyscript CDN.  You can create an index.html in a folder in your desired location. 

A simple HTML template can be created as per your preferences, we’ll leave it empty body right now to start afresh instance of the pyscript code.

Embedding Python inside HTML

We first need the script files that help us in allowing the runtime of python from the pyscript CDN.  So, we will have to add a few link tags and the script tag that will bring in the Python Pyodide runtime.

<link rel=”stylesheet” href=”https://pyscript.net/alpha/pyscript.css” />

<script defer src=”https://pyscript.net/alpha/pyscript.js”></script>

The first link for the stylesheet will allow us to format the output generated from the python code. The next link which is a script tag will bring in the javascript source file that will work with the browser for interacting with the python runtime. Finally, we can use the pyscript tags for embedding the python code.

The python code can be embedded by adding inside the  <py-script> tags.  We can use the  <py-script> tags to write python code. Normal python code can be embedded inside the <py-script> tags. The tags are not self-closing and hence like other HTML tags it needs a closing tag as </py-script>

<py-script>
    #python code
</py-script>

The python code inside the py-script tags should be indented, as you write the python code. The formatting of the indentation is not strictly from the start of the line, though it needs to be consistent throughout while being inside the tags.

Example 1:

Here, we have used a simple python code for printing a variable name. The print function is parsed inside the pyscript that will in turn process the python and display the result as a native HTML tag. Though output from pyscript tags is native HTML, the generation is done with the help of Pyodide and WASM which generates the native HTML from the pyscript tags.

The webpage takes a few seconds to load in its entirety of the webpage. That’s because the python code has to be rendered and converted to a native HTML.

Output:

 

Creating and Displaying List in Pyscript using loop

We can generate a list of elements in the HTML using a pure python list. We can simply use python syntax to print the elements of a list. The output will be generated as a distinct line which is the default behavior of the print statement in pyscript.

Example 2:

We can see the elements of the list are printed on the webpage using simple python code in the embedded pyscript tag. 

Output:

 

Creating and Displaying a dictionary using a conditional statement

To create a dictionary in python, we will be creating a simple dictionary and will display the key-value pairs one by one using a simple for loop. 

Example 3:

Here, we have created a string and will further create a frequency map of each letter in the string. To create a frequency map of letters in the string, we will initialize an empty dictionary,  we will iterate over the string, and check if the character in the string is present as a key in a dictionary or not, if it is present we will increment the value of the key as the character in the string, else the key is initialized to one.

Output:

 

So, we can see the dictionary has the key values as the character of the strings and the frequency of that character in the string.

Use the HTTP server to render the pyscript page

We can even use the HTTP server to render the pyscript page. We can do that using the http.server module to render the HTML page.

python -m http.server

Note – You need to be in the same directory as your index.html file else you need to specify the directory for rendering the HTML file.

 

 

 

python -m http.server -d 'path-to-directory'

The d flag is provided to locate the file in the directory without actually changing the directory in the terminal to run the HTTP server. After running the server, you need to locate the 127.0.0.1:8000 or localhost:8000 for viewing your HTML file.