Skip to content

Hello, World!

Let's start with the simplest possible: Hello, World!

https://kkinder.pyscriptapps.com/puepy-tutorial/latest/tutorial/01_hello_world/index.htmlEdit

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
from puepy import Application, Page, t

app = Application()


@app.page()
class HelloWorldPage(Page):
    def populate(self):
        t.h1("Hello, World!")


app.mount("#app")

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <title>PuePy Hello, World</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://pyscript.net/releases/2024.8.2/core.css">
  <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
</head>
<body>
<div id="app">Loading...</div>
<script type="mpy" src="./hello_world.py" config="../../pyscript.json"></script>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "name": "PuePy Tutorial",
  "debug": true,
  "files": {},
  "js_modules": {
    "main": {
      "https://cdn.jsdelivr.net/npm/morphdom@2.7.2/+esm": "morphdom"
    }
  },
  "packages": [
    "./puepy-0.4.5-py3-none-any.whl"
  ]
}

Including PyScript

Let's start with the HTML. To use PuePy, we include PyScript from its CDN:

index.html
  <link rel="stylesheet" href="https://pyscript.net/releases/2024.8.2/core.css">
  <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>

Then, we include our PyScript config file and also execute our hello_world.py file:

index.html
<script type="mpy" src="./hello_world.py" config="../../pyscript.json"></script>

PyScript configuration

PyScript Configuration

The official PyScript documentation has more information on PyScript configuration.

The PyScript configuration must, at minimum, tell PyScript to use PuePy (usually as a package) and include Morphdom, which is a dependency of PuePy.

The Python Code

Let's take a look at our Python code which actually renders Hello, World.

First, we import Application, Page, and t from puepy:

from puepy import Application, Page, t

To use PuePy, you must always create an Application instance, even if the application only has one page:

app = Application()

Next, we define a Page and use the t singleton to compose our DOM in the populate() method. Don't worry too much about the details for now; just know that this is how we define pages and components in PuePy:

@app.page()
class HelloWorldPage(Page):
    def populate(self):
        t.h1("Hello, World!")

Finally, we tell PuePy where to mount the application. This is where the application will be rendered in the DOM. The #app element was already defined in our HTML file.

app.mount("#app")

And with that, the page is added to the application, and the application is mounted in the element with id app.

Watching for Errors

Use your browser's development console to watch for any errors.