2,774 reads

Bringing Python to the Web: A Guide to Running Python in Your HTML

by Engineered SoulAugust 29th, 2023

Too Long; Didn't Read

A comprehensive introduction to seamlessly integrating Python code within HTML for dynamic and interactive web development.

featured image - Bringing Python to the Web: A Guide to Running Python in Your HTML

In the ever-evolving landscape of web development, the integration of diverse programming languages has become a hallmark of innovation. Python, renowned for its versatility and ease of use, has expanded beyond its traditional domain and ventured into the realm of web development. Imagine a scenario where the power of Python seamlessly converges with the dynamic nature of HTML, enriching your web projects with interactive functionalities and dynamic content.

This article dives into the fascinating concept of running Python code within HTML, unraveling the potential it holds, and guiding you through the steps to achieve this synergy. Whether you're a seasoned developer looking to enhance your skill set or a newcomer intrigued by the possibilities, join us on a journey to explore the integration of Python in HTML and discover how this fusion could revolutionize the way we create web applications.

PyScript is a framework that allows users to create rich Python applications in the browser using HTML's interface and the power of Pyodide, WASM, and modern web technologies. It was announced at PyCon US 2022 by Anaconda, makers of the Python distribution for scientific computing.

PyScript works by compiling Python code to WebAssembly, which is a low-level language that can be run in the browser. This means that PyScript code can be executed directly in the browser, without the need for a server or a JavaScript interpreter. The image is a basic skeleton visualization of how PyScript works.

PyScript provides a number of features that make it a powerful tool for creating web applications. These features include:

Full access to the Python standard library: PyScript gives you access to the full power of the Python standard library, including modules like NumPy, Pandas, and SciPy. This makes it possible to create complex and data-intensive web applications in Python.
Easy to learn and use: PyScript is designed to be easy to learn and use, even for beginners. The syntax is very similar to regular Python, and there are no complex build or deployment steps required.
Compatible with existing web technologies: PyScript is compatible with existing web technologies, such as HTML, CSS, and JavaScript. This means that you can use PyScript to create web applications that look and feel like any other web application.

Alright, let's kick things off just like we do in any programming adventure - by saying 'Hello, World!' But hold onto your hats, because this time, we're going to do it with a twist of PyScript magic!

Basic HTML Structure

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>PyScript | Hello, World!</title>
  </head>
  
  <body>
  </body>

</html>

Linking the PyScript files

Just add the below two lines and that’s it, we are ready to go with PyScript.

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

Let’s print Hello, World! and display the IP address

  Hello, world! <br>
  Hostname and IP Address: 
  <py-script>
    import socket
    hostname = socket.gethostname()
    display(hostname)
    ip_address = socket.gethostbyname(hostname)
    display(ip_address)
  </py-script>

Inside the body, type in the above code. Here’s the explanation:

Hello, world! <br>: This line of HTML code displays the text "Hello, world!" and then includes a <br> tag. The <br> tag is an HTML line break element, which creates a new line after the text "Hello, world!".
Hostname and IP Address:: This is plain text that follows the line break created by the <br> tag. It's simply a label indicating that the following content will display the hostname and IP address.
Inside the <py-script> tag:
- import socket: This Python code imports the socket module, which provides access to various networking functionalities, including hostnames and IP addresses.
- hostname = socket.gethostname(): This line retrieves the current host's standard hostname using the socket.gethostname() function and assigns it to the variable hostname.
- display(hostname): This displays the hostname to the user.
- ip_address = socket.gethostbyname(hostname): This line uses the socket.gethostbyname() function to resolve the IP address associated with the hostname obtained earlier. The IP address is then assigned to the variable ip_address.
- display(ip_address): It shows the IP address in the browser.

And that’s it once you run the HTML file, you will be able to see similar results as shown below.

PyScript is still under development, but it has the potential to revolutionize the way we create web applications. It makes it possible to use Python, the world's most popular programming language, to create rich and interactive web applications that can be run in any browser.

Here are some examples of what you can do with PyScript:

Create data visualization applications using NumPy and Pandas.
Build machine learning models using scikit-learn.
Develop interactive web games.
Create custom web widgets and components.
Write educational content that is interactive and engaging.

The possibilities are endless!

If you're interested in learning more about PyScript, several resources are available online. The official PyScript website has a getting-started guide, a tutorial, and a community forum. There are also a number of blog posts and articles about PyScript that you can find by searching online. Do check out my Everything’s PyScript Repo which contains all the resources related to PyScript. Open for contribution.

I hope this article has given you a brief overview of PyScript. It's an exciting new technology that has the potential to change the way we create web applications. Thanks for the read.