United Top Tech Watch on YouTube

How to import external python file in HTML using pyscript tutorial

3 min read 1 month ago

Published on Aug 02, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through the process of importing an external Python file into an HTML document using PyScript. This technique allows you to run Python code directly in the browser, making it a powerful tool for web development and interactive applications.

Step 1: Create Your Python File

Open your code editor.
Create a new file and name it python_file.py.
Add the following code to the file:
```
print("External Python file")
```
Save and close the file.

Step 2: Set Up Your HTML File

Create a new HTML file named newport.html.

In the file, start with a basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>My PyScript App</title>
</head>
<body>
</body>
</html>

Visit pyscript.net to get the installation links for PyScript.
Copy the provided <link> and <script> tags from the website.
Paste these tags inside the <head> section of your HTML file.

Step 3: Link the Python File in HTML

Inside the <body> tag, add the following PyScript tag:
```
<py-script src="python_file.py"></py-script>
```
- Ensure the file name matches your Python file. If your files are in different folders, include the full path to the Python file.
Save your HTML file.

Step 4: Serve Your Files Locally

Open a terminal and navigate to the directory where your HTML and Python files are located.
Start a local server by running:
```
python -m http.server 3000
```
- If port 3000 is occupied, choose another free port.

Step 5: Access Your HTML File in the Browser

Open a web browser and enter the following URL:
```
http://localhost:3000/newport.html
```
You should see the output from your Python file displayed in the browser.

Step 6: Enhance Your Output with Styling

Modify your python_file.py to use py-script.write instead of print. Update it as follows:
```
pyscript.write("my_text", "External Python file")
```
In your HTML file, add a <div> with the same ID:
```
<div id="my_text"></div>
```

Add a <style> section in the <head> of your HTML file to style the text:

<style>
    #my_text {
        color: brown;
        font-size: 100px;
    }
</style>

Save all changes.

Step 7: Restart the Server

Stop the current server by pressing Ctrl + C in the terminal.
Restart the server using the same command:
```
python -m http.server 3000
```
Refresh your browser to see the styled output.

Conclusion

You have successfully imported an external Python file into your HTML document using PyScript. By following the steps outlined above, you can create interactive web applications that utilize Python code. Explore further by adding more functionalities or styles to enhance your web projects.

Table of Contents

Recent