0

So I have created a game (of sorts) in python that I want to embed into an html webpage so I can add UI features. I have used the tags to do this but I am having issues with importing packages and also it clutters up the code. So is there a way to link to the python file instead, like I would a JS or CSS file?

I apologise in advance for any ambiguity or poor phrasing in my question, I am new to programming and don't really have anyone to turn to when I need help so I have to use SO for even the most minor errors.

8
  • 1
    Question is tagged "pyscript", do you confirm you have created it with the pyscript framework? If not, have you searched about it? The tag description mentions it's "for running python in the browser". Commented Feb 5, 2023 at 18:47
  • Yes, I can confirm that I am using the pyscript framework. I came across it in a previous SO question, the name of which escapes me. Commented Feb 5, 2023 at 18:49
  • 1
    Yes, I'm not having any errors, I was just wondering if I could have the python code in a separate file and then link to it inside the HTML file instead of having all the code in the HTML file Commented Feb 5, 2023 at 18:53
  • 1
    That's maybe not the most elegant (would still be python code as text in a javascript file), but at least it would help to separate the python code from the rest of the page. Commented Feb 5, 2023 at 18:59
  • 1
    The pyscript docs do say they support <py-script> and that it supports the src attribute. So, wouldn't it be <py-script src="something.py"></py-script>? Commented Feb 5, 2023 at 19:34

1 Answer 1

2

If you’re using a <py-script> tag, you can use the src attribute to reference a URL where the relevant python code is located. In this case, any code written within the tag itself (that is, in the HTML page) is ignored. For example:

<py-script src="some/url/with/code.py"></py-script>

Note that the attribute is a URL, not a local file path, so you’ll likely want to use a small server program to make the python file available on the network. Running python -m http.server from the command line will do.

Sign up to request clarification or add additional context in comments.

9 Comments

Thanks for your answer, really helpful. I'm trying to implement it but encountering and issue: when i initialise a local server to run it in and try to open the page in google it gives this site can't be reached error. I'm using this website: blog.logrocket.com/pyscript-run-python-browser as a guide. It's down in the External Pyscript section. Just a bit of context - I ran that command from the terminal from the folder my HTML and python files are stored in so hope that it OK. Also I'm confused about what sort of path is should put for the src, could you explain more about that?
When you run that command, what appears in the terminal? And out of curiosity, what shall terminal are you using? Sometimes I have found it necessary to specify the actual IP/port that the server should appear on, since it sometimes binds to something unintuitive by default like a local IPv6 address or or something.
This appears in the terminal: Serving HTTP on :: port 8000 (http://[::]:8000/) ... I have tried both the terminal in VS Code (my editor of choice) and the acutal windows cmd prompt. Would you mind explaining about the src path though? Currently I just have it listed as "/simulation.py" (as my python file is in the same folder as my HTML file.
Ah, so it looks like your command is binding to a local ipv6 interface. Try python -m http.server -b 127.0.0.1. You probably want to use just “simulation.py” as the src - that would be a relative URL that points to a file at the same path as the currently loaded file - if you start with a dash, you’re referring to a file at the root of the authoritative part of the url, which may or may not be what you want.
Thanks, this worked a treat. I think all the python is loading fine but i am getting an error with modules - I use several in my code such as pygame, matplotlib etc. When I run the python file on its own it works fine, but not when I run the HTML file even though I have <py-env> tags in which I declare? the modules I have to install. Any ideas? If you don't want to reply, don't worry, you've already fixed so much and I'm very grateful
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.