Automatically reload your browser in development.

Overview

django-browser-reload

https://img.shields.io/github/workflow/status/adamchainz/django-browser-reload/CI/main?style=for-the-badge https://img.shields.io/badge/Coverage-100%25-success?style=for-the-badge https://img.shields.io/pypi/v/django-browser-reload.svg?style=for-the-badge https://img.shields.io/badge/code%20style-black-000000.svg?style=for-the-badge pre-commit

Automatically reload your browser in development.

Requirements

Python 3.6 to 3.10 supported.

Django 2.2 to 4.0 supported.


Are your tests slow? Check out my book Speed Up Your Django Tests which covers loads of best practices so you can write faster, more accurate tests.


Installation

  1. Install with pip:

    python -m pip install django-browser-reload
  2. Ensure you have "django.contrib.staticfiles" in your INSTALLED_APPS.

  3. Add django-browser-reload to your INSTALLED_APPS:

    INSTALLED_APPS = [
        ...,
        "django_browser_reload",
        ...,
    ]
  4. Include the app URL’s in your root URLconf(s):

    from django.urls import include, path
    
    urlpatterns = [
        ...,
        path("__reload__/", include("django_browser_reload.urls")),
    ]

    You can use another prefix if required.

  5. Add the template tag to your base template. This can go anywhere, but it’s best just before </body>:

    {% load django_browser_reload %}
    
    ...
    
        {% django_browser_reload_script %}
      </body>
    </html>

    To add django-browser-reload to Django’s admin, do so in a template called admin/base_site.html:

    {% extends "admin/base_site.html" %}
    
    {% load django_browser_reload %}
    
    {% block extrahead %}
        {{ block.super }}
        {% django_browser_reload_script %}
    {% endblock %}

    This follows Django’s documentation on extending an overriden template.

All done! 📯

For faster and more efficient reloading, also set up Django’s built-in Watchman support.

What It Does

When DEBUG is True, the template tag includes a small script. This script connects back to the development server and will automatically reload when runserver restarts, or a template is modified. (Template modification detection requires Django 3.2+.) The reload only happens in the most recently opened tab.

Example App

See the example app in the example/ directory of the GitHub repository. Start it up, and try modifying example/core/views.py or templates/index.html to see the reloading in action.

How It Works

Here’s a diagram:

                                     Browser

                             Tab 1    Tab 2     Tab N
                           listener  listener  listener
                                \       |       /
  Django                         \      |      /
                                  \     |     /
Events View --------------------> Shared worker

The template tag includes a listener script on each page. This listener script starts or connects to a SharedWorker, running a worker script. The worker script then connects to the events view in Django, using an EventSource to receive server-sent events.

This event source uses StreamingHttpResponse to send events to the worker. The view continues streaming events indefinitely, until disconnected. (This requires a thread and will not work if you use runserver’s --nothreading option.)

On a relevant event, the worker will reload the most recently connected tab. (It avoids reloading all tabs since that could be expensive.)

To reload when a template changes, django-browser-reload piggybacks on Django’s autoreloading infrastructure. An internal Django signal indicates when a template file has changed. The events view receives this signal and sends an event to the worker, which triggers a reload. There is no smart filtering - if any template file changes, the view is reloaded.

To reload when the server restarts, django-browser-reload uses a version ID. This ID is randomly generated when the view module is imported, so it will be different every time the server starts. When the server restarts, the worker’s EventSource reconnects with minimal delay. On connection, the events view sends the version ID, which the worker sees as different, so it triggers a reload.

The events view also sends the version ID every second to keep the connection alive.

Compatibility

EventSource is highly compatible. SharedWorker is a bit less so, but should work with Chrome, Edge, Firefox, and Opera.

Owner
Adam Johnson
🦄 @django technical board member 🇬🇧 @djangolondon co-organizer ✍ AWS/Django/Python Author and Consultant
Adam Johnson
Django Girls Tutorial Workshop

Django Girls Tutorial Workshop A log of activities during the workshop. this is an H2 git remote add origin https://github.com/ahuimanu/django_girls_t

Jeffry Babb 1 Oct 27, 2021
Median and percentile for Django and MongoEngine

Tailslide Median and percentile for Django and MongoEngine Supports: PostgreSQL SQLite MariaDB MySQL (with an extension) SQL Server MongoDB 🔥 Uses na

Andrew Kane 4 Jan 15, 2022
A CTF leaderboard for the submission of flags during a CTF challenge. Built using Django.

🚩 CTF Leaderboard The goal of this project is to provide a simple web page to allow the participants of an CTF to enter their found flags. Also the l

Maurice Bauer 2 Jan 17, 2022
Django React Flight Rezervation

Django Intro & Installation python -m venv venv source ./venv/Scripts/activate pip install Django pip install djangorestframework pip install python-d

HILMI SARIOGLU 2 May 26, 2022
Use watchfiles in Django’s autoreloader.

django-watchfiles Use watchfiles in Django’s autoreloader. Requirements Python 3.7 to 3.10 supported. Django 2.2 to 4.0 supported. Installation Instal

Adam Johnson 43 Dec 14, 2022
Django Audit is a simple Django app that tracks and logs requests to your application.

django-audit Django Audit is a simple Django app that tracks and logs requests to your application. Quick Start Install django-audit pip install dj-au

Oluwafemi Tairu 6 Dec 01, 2022
Transparently use webpack with django

Looking for maintainers This repository is unmaintained as I don't have any free time to dedicate to this effort. If you or your organisation are heav

Owais Lone 2.4k Jan 06, 2023
Django React Project Setup

Django-React-Project-Setup INSTALLATION: python -m pip install drps USAGE: in your cmd: python -m drps Starting fullstack project with Django and Reac

Ghazi Zabalawi 7 Feb 06, 2022
Fully reponsive Chat Application built with django, javascript, materialUi, bootstrap4, html and css.

Chat app (Full Stack Frameworks with Django Project) Fully reponsive Chat Application built with django, javascript, materialUi, bootstrap4, html and

1 Jan 19, 2022
REST API con Python, Django y MySQL (GET, POST, PUT, DELETE)

django_api_mysql REST API con Python, Django y MySQL (GET, POST, PUT, DELETE) REST API con Python, Django y MySQL (GET, POST, PUT, DELETE)

Andrew 1 Dec 28, 2021
A simple REST API to manage postal addresses, written in Python/Django.

A simple REST API to manage postal addresses, written in Python/Django.

Attila Bagossy 2 Feb 14, 2022
An insecure login and registration website with Django.

An insecure login and registration website with Django.

Luis Quiñones Requelme 1 Dec 05, 2021
Management commands to help backup and restore your project database and media files

Django Database Backup This Django application provides management commands to help backup and restore your project database and media files with vari

687 Jan 04, 2023
This is a repository for a web application developed with Django, built with Crowdbotics

assignment_32558 This is a repository for a web application developed with Django, built with Crowdbotics Table of Contents Project Structure Features

Crowdbotics 1 Dec 29, 2021
A Django app for managing robots.txt files following the robots exclusion protocol

Django Robots This is a basic Django application to manage robots.txt files following the robots exclusion protocol, complementing the Django Sitemap

Jazzband 406 Dec 26, 2022
Packs a bunch of smaller CSS files together from 1 folder.

Packs a bunch of smaller CSS files together from 1 folder.

1 Dec 09, 2021
A tool to automatically fix Django deprecations.

A tool to help upgrade Django projects to newer version of the framework by automatically fixing deprecations. The problem When maintaining a Django s

Bruno Alla 155 Dec 14, 2022
A simple polling app made in Django and Bootstrap

DjangoPolls A Simple Polling app made with Django Instructions Make sure you have Python installed Step 1. Open a terminal Step 2. Paste the given cod

Aditya Priyadarshi 1 Nov 10, 2021
Code coverage measurement for Python

Coverage.py Code coverage testing for Python. Coverage.py measures code coverage, typically during test execution. It uses the code analysis tools and

Ned Batchelder 2.3k Jan 05, 2023
pytest-django allows you to test your Django project/applications with the pytest testing tool.

pytest-django allows you to test your Django project/applications with the pytest testing tool.

pytest-dev 1.1k Dec 14, 2022