Integrate Hotwire Turbo with Django with ease.
- Python 3.8+
- Django 3.1+
- Channels 3.0+ (Optional for Turbo Frames, but needed for Turbo Stream support)
##Installation
Turbo Django is available on PyPI - to install it, just run:
pip install turbo-django
Add turbo and channels to INSTALLED_APPS, and copy the following CHANNEL_LAYERS setting:
INSTALLED_APPS = [
...
'turbo',
'channels'
...
]
CHANNEL_LAYERS = {
"default": {
# You will need to `pip install channels_redis` and configure a redis instance.
# Using InMemoryChannelLayer will not work as the memory is not shared between threads.
# See https://channels.readthedocs.io/en/latest/topics/channel_layers.html
"BACKEND": "channels_redis.core.RedisChannelLayer",
"CONFIG": {
"hosts": [("127.0.0.1", 6379)],
},
}
}And collect static files if the development server is not hosting them:
./manage.py collectstaticNote: Both Hotwire and this library are still in beta development and may introduce breaking API changes between releases. It is advised to pin the library to a specific version during install.
Want to see Hotwire in action? Here's a simple broadcast that can be setup in less than a minute.
The basics:
-
A web page subscribes to a specific broadcast name.
-
A view sends a rendered template to all subscribed pages telling the page where to position the new content.
First, create a view that takes a broadcast name.
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path('quickstart/', TemplateView.as_view(template_name='broadcast_example.html'))
]# broadcast_example.html
{% load turbo_streams %}
<!DOCTYPE html>
<html lang="en">
<head>
{% include "turbo/head.html" %}
</head>
<body>
{% turbo_subscribe 'broadcast_name' %}
<p class="broadcast_box_class" id="broadcast_box">Placeholder for broadcast</p>
</body>
</html>Now run ./manage.py shell. Create a Turbo object that references the broadcast name. Tell the object to render a TurboRender object from the string, and then broadcast a command to update the inside of the element with id broadcast_box on all subscribed pages.
from turbo import Turbo
from datetime import datetime
Turbo('broadcast_name').render_from_string(
f"{datetime.now()}: This is a broadcast."
).update(id="broadcast_box")With the quickstart/ path open in a browser window, watch as the broadcast pushes messages to the page.
Now change .update() to .append() and resend the broadcast a few times. Notice you do not have to reload the page to get this modified behavior.
Excited to learn more? Be sure to walk through the tutorial and read more about what Turbo can do for you.
Read the full documentation at readthedocs.io.
Discussions about a Django/Hotwire integration are happening on the Hotwire forum. And on Slack, which you can join by clicking here!
As this new magic is discovered, you can expect to see a few repositories with experiments and demos appear in @hotwire-django. If you too are experimenting, we encourage you to ask for write access to the GitHub organization and to publish your work in a @hotwire-django repository.
Turbo-Django is released under the MIT License to keep compatibility with the Hotwire project.
If you submit a pull request. Remember to add yourself to CONTRIBUTORS.md!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent