fabiogibson / django-livesync

Django App which automatically reloads your browser when Django Development Server restarts or static files and templates are modified.

What's this project? =================

It's a simple Django application which will automatically reload your browser everytime Django Development Server is restarted or any static file or template changes. Besides this, if you connect multiple browsers and devices on your development server, these will be all synchronized.

Quick start guide

Before installing, you'll need to have a copy of Django already installed. For the current release, Django 1.8 or newer is required.

For further information, consult the Django download page, which offers convenient packaged downloads and installation instructions.

Installing

Automatic installation using PyPI

type:

pip install django-livesync

Basic configuration and use

Once installed, you can add Django LiveSync to any Django-based project you're working on. The default setup will enable the following features.

1. Every time django development server is reloaded, all connected browsers will automatically refresh.
2. Every time a static file or template is updated, all connected browsers will automatically refresh.
3. Your actions will be synchronized between all connected browsers and devices. Currently supports:
   • Page scroll.
   • Page reload.
   • Element click.
   • Form fields in general.

IMPORTANT: Currently, it was only tested against Google Chrome and Mozilla Firefox web browsers.

Configuration

Installing the application

Begin by adding livesync to the INSTALLED_APPS setting of your project. By default, the daemon will start watching all your installed apps template dirs. You can also specify the following additional settings:

LIVE_PORT

This is the number of the port on which live server will run.

INCLUDED_APPS

This tells django livesync to only watch for changes in apps in this set.

EXCLUDED_APPS

This tells django livesync to ignore changes on apps in this set.

Setup Middleware

Add livesync.core.middleware.DjangoLiveSyncMiddleware to the MIDDLEWARE_CLASSES setting of your project.

IMPORTANT NOTES:

1. If you have 'django.contrib.staticfiles' application installed, you must register 'django-livesync' before it, otherwise live server will not launch.
2. Django LiveSync will only execute if DEBUG is set to True.

Example

You might have something like the following in your Django settings file:

DEBUG = True

INSTALLED_APPS = (
    '...',
    'livesync',
    'django.contrib.staticfiles',
    '...',
)

DJANGO_LIVESYNC = {
    'PORT': 9999 # this is optional and is default set to 9001.
}

MIDDLEWARE_CLASSES = (
    'livesync.core.middleware.DjangoLiveSyncMiddleware',
)

Once you've done this, run python manage.py runserver as usual.

django-livesync's Issues

Content-Type error

I ran into this bug while making a DELETE request to my django-livesync enabled backend powered by django-rest-framework.
Here's a trace:

Traceback (most recent call last):
  File ".../django/core/handlers/exception.py", line 34, in inner
    response = get_response(request)
  File ".../livesync/core/middleware.py", line 12, in __call__
    return self.process_response(request, response)
  File ".../livesync/core/middleware.py", line 16, in process_response
    if settings.DEBUG and 'text/html' in response['Content-Type']:
  File ".../django/http/response.py", line 144, in __getitem__
    return self._headers[header.lower()][1]
KeyError: 'content-type'

Someone already fixed it in a fork: src-r-r@55555f6. Would be great to see the fix in the npm package.

KeyError at /media/* 'content-type' every alternate response

If a page contains any media file, or if we open media files in development (DEBUG=True), every second response shows this error.
Am I doing something wrong?

Console Output:
web_1 | [26/Dec/2020 09:08:39] "GET /media/1.png HTTP/1.1" 200 6440
web_1 | Internal Server Error: /media/1.png
web_1 | Traceback (most recent call last):
web_1 | File "/usr/local/lib/python3.9/site-packages/django/core/handlers/exception.py", line 34, in inner
web_1 | response = get_response(request)
web_1 | File "/usr/local/lib/python3.9/site-packages/livesync/core/middleware.py", line 12, in call
web_1 | return self.process_response(request, response)
web_1 | File "/usr/local/lib/python3.9/site-packages/livesync/core/middleware.py", line 16, in process_response
web_1 | if settings.DEBUG and 'text/html' in response['Content-Type']:
web_1 | File "/usr/local/lib/python3.9/site-packages/django/http/response.py", line 144, in getitem
web_1 | return self._headers[header.lower()][1]
web_1 | KeyError: 'content-type'
web_1 | [26/Dec/2020 09:08:41] "GET /media/1.png HTTP/1.1" 500 70679

Question: How to reload when a SASS file changes?

First of all, thanks for your work. It has been helping me immensely.

I have the livesync working fine on Django 2.1.1, but now I want to use SASS. To do so, I'm using https://github.com/jrief/django-sass-processor. The problem is that when the SASS files are modified, there's no automatic reloads. Is there any way to make livesync monitor *.scss files as well?

(If you prefer to answer on SO, I asked the same question on https://stackoverflow.com/questions/52167436/how-to-automatically-reload-a-django-app-using-django-livesync-when-a-scss-file)

Does not work if STATIC_URL is non-default

If I set STATIC_URL in my settings.py to something like /foo/static/ django-livesync will fail to load the livesync.js file, because it is hardcoded at

django-livesync/livesync/core/middleware.py

Line 24 in 3f3c345

<script src='/static/livesync.js'></script></body>

.

Doesn't start with manage.py

I'm using Django 3 on Ubuntu. When I run python manage.py runserver after following the config instructions, I get the following error:

Traceback (most recent call last):
  File "manage.py", line 21, in <module>
    main()
  File "manage.py", line 17, in main
    execute_from_command_line(sys.argv)
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/django/core/management/__init__.py", line 401, in execute_from_command_line
    utility.execute()
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/django/core/management/__init__.py", line 395, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/django/core/management/base.py", line 330, in run_from_argv
    self.execute(*args, **cmd_options)
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/django/core/management/commands/runserver.py", line 61, in execute
    super().execute(*args, **options)
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/django/core/management/base.py", line 371, in execute
    output = self.handle(*args, **options)
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/livesync/management/commands/runserver.py", line 110, in handle
    self.start_liveserver(**options)
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/livesync/management/commands/runserver.py", line 107, in start_liveserver
    self._start_watchdog()
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/livesync/management/commands/runserver.py", line 81, in _start_watchdog
    self.file_watcher.start()
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/livesync/fswatcher/watcher.py", line 18, in start
    self._schedule_all()
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/livesync/fswatcher/watcher.py", line 11, in _schedule_all
    for path in handler.watched_paths:
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/livesync/core/handler.py", line 22, in watched_paths
    os.path.join(d, 'templates') for d in get_app_template_dirs('')
  File "/home/raphaelnazirullah/Documents/Mental Health Web app/mental_health_app/venv/lib/python3.6/site-packages/livesync/core/handler.py", line 23, in <listcomp>
    if d.startswith(settings.BASE_DIR)
AttributeError: 'PosixPath' object has no attribute 'startswith'

My project structure is like this:
.
├── db.sqlite3
├── Dummy
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── init.py
│   ├── migrations
│   ├── models.py
│   ├── pycache
│   ├── random.py
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── formsapp
│   ├── admin.py
│   ├── apps.py
│   ├── experiments.py
│   ├── forms.py
│   ├── init.py
│   ├── machine_learning.py
│   ├── migrations
│   ├── models.py
│   ├── pycache
│   ├── static
│   ├── templates
│   ├── templatetags
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── mental_health_app
│   ├── asgi.py
│   ├── init.py
│   ├── pycache
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── my-cred.txt
├── pycache
│   └── manage.cpython-36.pyc
├── README.md
├── requirements.txt
├── users
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── init.py
│   ├── migrations
│   ├── models.py
│   ├── pycache
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   └── views.py

does not work if your templates are in a django app

I get error

$ python manage.py runserver                                                                                           
Traceback (most recent call last):                                                                                     
  File "manage.py", line 10, in <module>                                                                               
    execute_from_command_line(sys.argv)                                                                                
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/django/core/management/__init__.py", line 381, in execute_from_command_line
    utility.execute()                                                                                                  
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/django/core/management/__init__.py", line 375, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)                                                            
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/django/core/management/base.py", line 316, in run_from_argv
    self.execute(*args, **cmd_options)                                                                                 
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/django/core/management/commands/runserver.py", line 60, in execute
    super().execute(*args, **options)                                                                                  
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/django/core/management/base.py", line 353, in execute
    output = self.handle(*args, **options)                                                                             
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/livesync/management/commands/runserver.py", line 110, in handle
    self.start_liveserver(**options)                                                                                   
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/livesync/management/commands/runserver.py", line 107, in start_liveserver
    self._start_watchdog()                                                                                             
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/livesync/management/commands/runserver.py", line 81, in _start_watchdog
    self.file_watcher.start()                                                                                          
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/livesync/fswatcher/watcher.py", line 18, in start
    self._schedule_all()                                                                                               
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/livesync/fswatcher/watcher.py", line 12, in _schedule_all
    self.observer.schedule(handler, path, recursive=True)                                                              
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/watchdog/observers/fsevents.py", line 172, in schedule
    return BaseObserver.schedule(self, event_handler, path, recursive)                                                 
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/watchdog/observers/api.py", line 290, in schedule
    timeout=self.timeout)                                                                                              
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/watchdog/observers/fsevents.py", line 73, in __init__
    self.snapshot = DirectorySnapshot(watch.path, watch.is_recursive)                                                  
  File "/Users/harrymoreno/.local/share/virtualenvs/foo-TMIWqqTS/lib/python3.7/site-packages/watchdog/utils/dirsnapshot.py", line 206, in __init__
    st = stat(path)                                                                                                    
FileNotFoundError: [Errno 2] No such file or directory: '/Users/harrymoreno/programming/foo/bar/templates'             

my project looks like this

.
├── README.md
├── __init__.py
├── manage.py
├── mysite
├── polls
├── static
└── staticfiles

templates are in polls/templates

On recent versions

Hi!
On recent projects django uses Path but livesync raise an error...
There are some documentation to update this module?

br!

WebSocket connection to 'ws://localhost:9001/?' failed

I've set up the config exactly as described in the readme. I have tested multiple ports, including 443, 8000, 8080, 35729, 9001, 9999 on Firefox and Chrome. All give the same error:

livesync.js:11 WebSocket connection to 'ws://localhost:9001/?' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

I'm using windows. Tracking down other people with this error, it seems like browsers have increased security restrictions to require a SSL cert for WebSocket connections. Is this correct? Does it mean there's no way to use this with normal Django runserver anymore?

EDIT: I have tried using django-sslserver to load the site on HTTPS but it makes no difference.

Does this work with django-channels?

As django-channels meddles with runserver as well. https://channels.readthedocs.io/en/latest/installation.html?highlight=runserver#installation

Is there a way they could work together?

Disable browser sync.

Make it possible to disable multiple clients sync, letting just live refresh on.