Building for the Web

A web site has two halves. A server is a program that waits for a browser to ask for a page and sends one back. The page is HTML that the browser shows. In Circuitry you can write both and watch them work together: the Python that makes the page on one side, the page on the other.

Who this is for

A student who knows some Python and wants to see how a web site works, or a programmer trying Flask. For the page itself, a little HTML helps; the first program has all it needs.

What you need

• Circuitry in a web browser, in the desktop app, or on an iPad or a phone.
• A connection the first time, while Flask is installed.
• One Python file. Run recognises a file that imports flask and makes a Flask(...) app, and treats it as a web app.

Your first program

Make a Python file ( → Code → Python) and type or paste this:

!pip install flask
from flask import Flask, render_template_string, request

app = Flask(__name__)

PAGE = """
<style>
  body {
    font-family: sans-serif; padding: 40px;
    background: #0f172a; color: white;
  }
  input, button { padding: 8px 12px; font-size: 16px; }
</style>
<h1>Hello, {{ name }}</h1>
<form>
  <input name="name" placeholder="Your name">
  <button>Say hello</button>
</form>
<p>Python made this page for {{ name }}.</p>
"""

@app.route("/")
def home():
    name = request.args.get("name", "world")
    return render_template_string(PAGE, name=name)

app.run()

The preview beside the code says This file is a web app. Press Run to start it and show its page here. Press Run in the footer.

What you should see

The output panel under the code says the web app is starting and that Flask is being installed. Then the page appears in the preview: Hello, world, a box to type in and a button. Type a name and press Say hello: the page comes back as Hello, Ada, and the output shows one line for each request the page made.

Tap to enlarge

GET / 200
GET /?name=Ada 200

• @app.route("/") says which function answers a request for the address /.
• request.args.get("name", "world") reads what was typed in the form, or uses world when nothing was.
• render_template_string(PAGE, name=name) puts the name into the page wherever {{ name }} is written.
• A web app does not finish like a script. It serves until you press Stop.

The code is not reloaded when you save. Change the file, then press Stop and Run to serve the new code.

Three things to try

1. Change the page. Change background: #0f172a to background: darkgreen, then Stop and Run.
2. A second page. Add this above app.run(), run again, and add <a href="/about">About</a> to PAGE to reach it:

@app.route("/about")
def about():
    return "<h1>About</h1><p>My first web app.</p>"

1. Count the visits. Put visits = 0 under app = Flask(__name__), add global visits and visits += 1 at the top of home, pass visits=visits to render_template_string, and show {{ visits }} in the page.

The views

The same two footer buttons that a drawing has choose what you see: shows the page only, shows the code and the page side by side, and with both off you see the code only while the web app keeps serving. LOG in the footer shows and hides the output panel.

What depends on the device

The file is the same everywhere. What runs it is not.

The first lines of the output say which one is in use.

Breakpoints. A breakpoint on a line inside a route pauses the request there, with the page waiting for its answer, when the web app is served by the iPhone and iPad app's own Python. Everywhere else the request runs straight through, and the output says so once. See Debugging for how to set one.

When the Python in the page runs the web app:

• The page cannot load anything from another site. A page that takes its styles or scripts from elsewhere on the internet shows without them, and the output says which site was refused. Keep the styles in the file, as the first program does.
• The web app is one file. templates and static folders beside it are not used; write the HTML in the file with render_template_string.

Flask is the web framework that Run starts.

HTML and React, with a live preview

A web page does not need a server. An HTML file and a React file each open beside a live preview of their own:

1. From the new-document menu, choose Code, then HTML. For a React file, choose JSX or TSX.
2. Write the page on the left. The preview on the right shows it.

In an HTML file the two sides are linked in both directions: hovering the page can select the matching code, and hovering the code highlights the element on the page. See Markdown and HTML, with live split previews and Debugging a Web Page, which stops in the page's JavaScript and reads its console.

Where to go next

• Installing Python Packages: the pip line.
• Web Page Editor Tour and Make a website.
• Testing in the Browser: an agent that opens your page, clicks through it and reads what went wrong.
• How the editor helps you learn.