jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

complete first example

Browse Source
This commit is contained in:
Fabio Pliger
2023-09-05 16:11:30 -05:00
parent da5569871e
commit 5f93eb24bb
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
newdocs/docs/getting-started.md
View File

@@ -1,4 +1,3 @@
<base target="_blank">
# Getting started with PyScript # Getting started with PyScript
To start developing a PyScript, like with most applications development, you need a **development environment** where you To start developing a PyScript, like with most applications development, you need a **development environment** where you
@@ -85,6 +84,8 @@ with their favorite Development Environment setup.
First, create a new file called `hello.html` and paste in the following content and open it in your web browser. First, create a new file called `hello.html` and paste in the following content and open it in your web browser.
**Hint:** In the example below, click on the ➕ icon to read hints about specific sections in the code examples
```html title="hello_world.py" ```html title="hello_world.py"
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@@ -96,38 +97,40 @@ First, create a new file called `hello.html` and paste in the following content
<script <script
type="module" type="module"
src="https://esm.sh/@pyscript/core@latest/core.js" src="https://esm.sh/@pyscript/core@latest/core.js"
></script> <!-- (1)--> ></script> <!-- (1) Load PyScript -->
</head> </head>
<body> <body>
<!-- We don't need to load a config and keep the default since we don't need any additional configuration --> <!-- (2)--> <!-- (2) In this case were using the default config, so don't need to specify a `<py-config>` tag -->
<py-script src="main.py"></py-script> <!-- (3)-->
<!-- (3) run the code in the `main.py` file -->
<py-script src="main.py"></py-script>
</body> </body>
</html> </html>
``` ```
1. ⚡️ we use a `<script>` tag to load `PyScript` in the `head` of our `HTML` document so it can
load as soon as possible
2. if needed to install any packages we could load a config in this point, so that any python code
can have their dependencies installed before they run
3. 🐍 the code in `main.py` will run inside the default `Python` interpreter as soon as it's ready
and create a new `main.py` file with the following code: and create a new `main.py` file with the following code:
```python title="main.py" ```python title="main.py"
from pyscript import display # (1)
# this block is normal python print('Hello, World!') # print "Hello, World!" to the console
from pyscript import display display('Hello, World!') # displays "Hello, World!" in the main page
print('Hello, World!') # some more
display('Hello, World!')
``` ```
1. pyscript provides the `display` funcition that can be used to display any variable on the page,
while the Python `print` statement will automatically print objects on the browser `console`.
1. :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted <a href="https://fpliger.pyscriptapps.com/hello-world-minimal-example/latest/" class="md-button" target="_blank">open this example on pyscript.com</a>
text__, images, ... basically anything that can be written in Markdown.
2. :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted When you open application in your browser, you should see `Hello, World!` printed in your page and in your Javascript Console
text__, images, ... basically anything that can be written in Markdown. (if you are new to web development and don't know what it means yet, don't worry,t, we'll get into that later).
3. well... just something
[open this example on pyscript.com](https://fpliger.pyscriptapps.com/hello-world-minimal-example/latest/){ .md-button } Easy, right?
<a href="https://fpliger.pyscriptapps.com/hello-world-minimal-example/latest/" target="_blank">or open this example on pyscript.com</a>
You should see "Hello World!" printed in your page and in your Javascript Console (don't worry if
you don't know what it means yet, we'll get into that later).
```html title="hello_world.py" ```html title="hello_world.py"