Integration of Hotwire's Turbo library with Flask.

Miguel Grinberg

Last update: Jan 6, 2023

Related tags

Miscellaneous turbo-flask

Overview

turbo-flask

Integration of Hotwire's Turbo library with Flask, to allow you to create applications that look and feel like single-page apps without using JavaScript.

How to Install

pip install turbo-flask

How to Add to your Project

Direct initialization:

from flask import Flask
from turbo_flask import Turbo

app = Flask(__name__)
turbo = Turbo(app)

Factory function initialization:

from flask import Flask
from turbo_flask import Turbo

turbo = Turbo()

def create_app():
    app = Flask(__name__)
    turbo.init_app(app)

    return app

To add Turbo-Flask to your pages, include {{ turbo() }} in the element of your main Jinja template:

>
<html>
  <head>
    {{ turbo() }}
  head>
  <body>
    ...
  body>
html>

How to Use

See the turbo.js documentation to learn how to take advantage of this library.

If you decide to use the Turbo Streams feature, this extension has helper functions to generate the correct Flask responses. Here is an example with a single streamed response:

    if turbo.can_stream():
        return turbo.stream(
            turbo.append(render_template('_todo.html', todo=todo), target='todos'),
        )
    else:
        return render_template('index.html', todos=todos)

And here is another with a list of them:

    if turbo.can_stream():
        return turbo.stream([
            turbo.append(render_template('_todo.html', todo=todo), target='todos'),
            turbo.update(render_template('_todo_input.html'), target='form')
        ])
    else:
        return render_template('index.html', todos=todos)

WebSocket Streaming

This feature of turbo.js has not been implemented at this time.

Comments

Flask `flash` not working with Turbo
I stumbled upon flash not working when using turbo.

controller:

@route("/delete/<id>", methods=["POST"]) def delete(self, id): if self.measurement.is_used: flash("You can not delete this!") return redirect(url_for("MeasurementsView:index"))

If I remove turbo from page head, flash is working. If turbo is in, it's not (rest of the code is working no problem). I can imagine replacing flash mechanism with turbo-stream in future (it would be neat actually), but not sure what to do now.

If I understand correctly, it's because turbo turns my redirect to fetch, and flash is not rerendered. So I need to force flash element reloading. Not sure how tho.

(Also, the flash message is rendered next time page is "properly" reloaded.)

Thanks for your help!
question
opened by janpeterka 15

BrokenPipeError: [Errno 32] Broken pipe

After several hours ws is crashing:

Exception in thread Thread-3:
Traceback (most recent call last):
  File "/usr/lib/python3.8/threading.py", line 932, in _bootstrap_inner
    self.run()
  File "/usr/lib/python3.8/threading.py", line 870, in run
    self._target(*self._args, **self._kwargs)
  File "/home/azat/modbus_online/web.py", line 81, in update_load
    turbo.push(turbo.replace(render_template('loadme.html'), 'load'))
  File "/home/azat/modbus_online/venv/lib/python3.8/site-packages/turbo_flask/turbo.py", line 180, in push
    ws.send(stream)
  File "/home/azat/modbus_online/venv/lib/python3.8/site-packages/simple_websocket/ws.py", line 60, in send
    self.sock.send(out_data)
BrokenPipeError: [Errno 32] Broken pipe

turbo-flask is used according to load example

@app.context_processor
def inject_load():
    ...
    return {'data': response,}


@app.before_first_request
def before_first_request():
    threading.Thread(target=update_load).start()


def update_load():
    with app.app_context():
        while True:
            time.sleep(0.5)
            turbo.push(turbo.replace(render_template('loadme.html'), 'load'))

bug

opened by azat385 10

Dynamic update not working in turbo-flask 0.8.1?

When following your blog post / guide on Dynamically Update Your Flask Web Pages Using Turbo-Flask I found the dynamic update is not working with turbo-flask 0.8.1 and the example code. It does work with 0.8.0. Is this due to a bug in 0.8.1 or has the method of making dynamic updates work changed?

opened by andyengria 9
Error: Form responses must redirect to another location

Hello! As I understand it, there is a problem in the operation of turbo.js when processing a form if it is not valid. In this case, without receiving a redirect, turbo.js generates an error: "Error: Form responses must redirect to another location". The only working solution for me is to disable turbo-frame in forms: "data-turbo =" false "". https://github.com/hotwired/turbo-rails/issues/122 Is there another way?
question

opened by Alexsik76 9
Turbo in intranet

Hi, I try to integrate turbo in our intranet without internet connection. That's why our browser gives an error cause it is not possible to navigate to cdn.skypack.dev required by hotwired/turbo

Any idea how I can manage to integrate turbo-flask locally on our server?

Thx for your work!
question

opened by Gerbaum 8

return render_template("foo.html") not working after initializing turbo in python

Removing the turbo = Turbo(app) makes the code work again.

Here's the full code:

from flask import Flask, render_template
from turbo_flask import Turbo

from cs50 import SQL
from flask import Flask, flash, redirect, render_template, request, session
from flask_session import Session
from werkzeug.security import check_password_hash, generate_password_hash
from helpers import apology, login_required


app = Flask(__name__)
turbo = Turbo(app)

# Ensure templates are auto-reloaded
app.config["TEMPLATES_AUTO_RELOAD"] = True


# Configure session to use filesystem (instead of signed cookies)
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

# Configure CS50 Library to use SQLite database
db = SQL("sqlite:///beSober.db")

@app.route('/')
@login_required
def index():
    return render_template('index.html')

@app.route("/register", methods=["GET", "POST"])
def register():

    # makes sure the account is submitted through post
    if request.method == "POST":

        # ensures that the username field is filled out
        if not request.form.get("username"):
            return apology("must provide username")

        # ensures that the password field is filled out
        elif not request.form.get("password"):
            return apology("must provide password")

        # ensures that the confirmation field is filled out and matches the value of the password field
        elif not request.form.get("confirmation"):
            return apology("must provide password confirmation")\

        elif request.form.get("password") != request.form.get("confirmation"):
            return apology("passwords must match")

        # ensures that the username does not previously exist in the database
        names = db.execute("SELECT username FROM users")
        for name in names:
            if request.form.get("username").lower() in name.values():
                return apology("username already exists")

        db.execute("INSERT INTO users (username, hash) VALUES (?, ?)", request.form.get("username").lower(),
                   generate_password_hash(request.form.get("password"), method="pbkdf2:sha256", salt_length=8))

    else:
        return render_template("register.html")

    flash("Account successfully registered.")
    return render_template("login.html")


@app.after_request
def after_request(response):
    """Ensure responses aren't cached"""
    response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
    response.headers["Expires"] = 0
    response.headers["Pragma"] = "no-cache"
    return response


@app.route("/login", methods=["GET", "POST"])
def login():
    """Log user in"""

    # Forget any user_id
    session.clear()

    # User reached route via POST (as by submitting a form via POST)
    if request.method == "POST":

        # Ensure username was submitted
        if not request.form.get("username"):
            return apology("must provide username", 403)

        # Ensure password was submitted
        elif not request.form.get("password"):
            return apology("must provide password", 403)

        # Query database for username
        rows = db.execute("SELECT * FROM users WHERE username = ?", request.form.get("username"))

        # Ensure username exists and password is correct
        if len(rows) != 1 or not check_password_hash(rows[0]["hash"], request.form.get("password")):
            return apology("invalid username and/or password", 403)

        # Remember which user has logged in
        session["user_id"] = rows[0]["id"]

        # Redirect user to home page
        return redirect("/")

    # User reached route via GET (as by clicking a link or via redirect)
    else:
        return render_template("login.html")


@app.route("/logout")
def logout():
    """Log user out"""

    # Forget any user_id
    session.clear()

    # Redirect user to login form
    return redirect("/")

question

opened by dnxjcui 6

Turbo-flask not able to push() on Raspberry Pi

I can't get Push() to work when running the example demo on a Raspberry Pi (Debian Linux, stretch release). Python 3.8.13, Flask 2.0.3, Werkzeug 2.1.1.

turbo.can_push returns false when client is using Chrome or Edge. The same exact code running on Windows with same versions of Python, Flask, and Turbo-Flask works as expected (and identical Chrome and Edge clients).

Any idea what might be causing this?
question

opened by HFMan 6
Using Turbo-Flask to dynamically update