Remove browser-sync add Django browser reload

[Benoss]

Fix #3745

Description

Remove Javscript based auto reload and use a python based one django-browser-reload

Checklist:

• [ ] I've made sure that tests are updated accordingly (especially if adding or updating a template option)
• [ ] I've updated the documentation or confirm that my change doesn't require any updates

Rationale

see #3745

[Benoss]

Happy for people to contribute to the documentation. Not sure where/how to talk about this change

[browniebroke]

I've done some basic testing and wasn't able to get it working (tried with and without Docker). Here are the steps I followed:

1. generated a project with following options: heroku=y, docker=n, celery=n, whitenoise=n, async=y, frontend_pipeline=None (also tried Gulp)
2. installed dependencies
3. started the development server with runserver_plus
4. opened the home page
5. added a visible CSS change (e.g. body { background-color: red; }
6. expected my browser tab to have reloaded, but nothing happened. When pressing "reload current page" in my browser, my CSS change was visible.

Did I miss a step or are we actually missing something?

[Schulzjo]

I think there are some issues with asgi. Got this running with runserver or runserver_plus Change docker start script from using uvicorn to python manage.py runserver_plus 0.0.0.0:8000

Any suggestions? How to get this work with uvicorn as well?

[roushikk]

I think there are some issues with asgi. Got this running with runserver or runserver_plus Change docker start script from using uvicorn to python manage.py runserver_plus 0.0.0.0:8000

Any suggestions? How to get this work with uvicorn as well?

For me, the reload process was getting stuck at the following:

WARNING:  WatchFiles detected changes in 'narcissus/components/meow.py'. Reloading...
INFO:     Shutting down
INFO:     Waiting for connections to close. (CTRL+C to force quit)

After looking a bit into this, I found this issue: https://github.com/encode/uvicorn/issues/451

I added --timeout-graceful-shutdown 2 in compose/local/django/start to see if it makes any difference and this is the result:

WARNING:  WatchFiles detected changes in 'narcissus/components/meow.py'. Reloading...
INFO:     Shutting down
INFO:     Waiting for connections to close. (CTRL+C to force quit)
ERROR:    Cancel 1 running task(s), timeout graceful shutdown exceeded
INFO:     Finished server process [1169]
INFO:     Started server process [2964]
INFO:     Waiting for application startup.
INFO:     ASGI 'lifespan' protocol appears unsupported.
INFO:     Application startup complete.
INFO:     172.18.0.1:51234 - "GET /__reload__/events/ HTTP/1.1" 200 OK
INFO:     172.18.0.1:40468 - "GET / HTTP/1.1" 200 OK

Note the following line:

ERROR:    Cancel 1 running task(s), timeout graceful shutdown exceeded

This indicates that there is a running task that is not shutting down when reload is triggered.

After some debugging, I figured out that it only occurs when we enable BrowserReloadMiddleware so it is definitely an issue with django-browser-reload I've opened an issue for this in django-browser-reload repo: https://github.com/adamchainz/django-browser-reload/issues/255

For now, I'm just using --timeout-graceful-shutdown 2 in my local environment to get it working while this issue can be fixed.