Flaxon 0.3.0 and Teloce-Py 0.3.0 are available on PyPI. Release instructions are maintained on this site; source links identify the framework snapshot. Check version and upgrade guidance.
Lesson 1: Understand the page lifecycle
Create the quick-start files and run the development server. app.use_teloce()
registers the UI tree and startup build. request.compile() returns an HTML
shell referencing the built component and styles. The browser mounts the
component, then its mounted() callback requests /api/tasks.
The template source is not simply returned as an HTML page. The integration is
client rendering: the initial body contains a mount point rather than rendered
task rows. If a page needs server-rendered HTML, use Flaxon's Jinax integration
and request.render(). Choose rendering according to the page's requirements.
Keep browser-only UI behavior inside components and privileged business work
inside Python endpoints. Context passed to compile() is serialized into the
page: it is suitable for public display values, never credentials.
Checkpoint: inspect page source and Network tools. Find the mount point,
compiled .js, stylesheet and API request. Disable JavaScript to understand
which content depends on the browser runtime.
A complete app you can run
Use Taskboard as the working baseline.
The Python file below is complete. It contains a GET endpoint, validated POST
endpoint and page route. Keep the interface in ui/; Python should not contain
large HTML strings.
examples/teloce_taskboard/app.py
"""Taskboard teaching fixture: a Python API and a typed Teloce interface."""
from pathlib import Path
from flaxon import Flaxon, Request
from flaxon.http import JSONResponse
from flaxon.validation import Schema, fields
project_root = Path(__file__).resolve().parent
app = Flaxon("Taskboard", debug=True)
app.use_teloce(project_root=project_root, ui_dir="ui", title="Taskboard")
# This data resets when the process restarts. Lesson 8 explains persistence.
tasks = [{"id": 1, "title": "Read the full-stack lessons", "complete": False}]
class CreateTask(Schema):
title = fields.StrField(required=True, min_length=1, max_length=200)
@app.get("/api/tasks")
async def list_tasks():
return {"items": tasks}
@app.post("/api/tasks")
async def create_task(data: CreateTask):
title = data.to_dict()["title"].strip()
if not title:
return JSONResponse({"error": "Enter a task title."}, status_code=422)
task = {"id": len(tasks) + 1, "title": title, "complete": False}
tasks.append(task)
return JSONResponse(task, status_code=201)
@app.get("/")
async def home(request: Request):
return await request.compile("app.html")
CreateTask is the request schema. Flaxon validates the JSON body before calling
the handler. JSONResponse lets the handler choose a status code. The page route
only selects a component; its browser-side API helper loads the tasks.
Run the example with flaxon run app:app --reload from its folder. A restart
resets this teaching fixture's in-memory tasks. Do not call it persistent storage.