Remove browser-sync add Django browser reload

docs/developing-locally.rst

@@ -155,7 +155,7 @@ To run Celery locally, make sure redis-server is installed (instructions are ava
 Sass Compilation & Live Reloading
 ---------------------------------
 
-If you've opted for Gulp as front-end pipeline, the project comes configured with `Sass`_ compilation and `live reloading`_. As you change you Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets and reload them in your browser without refreshing the page.
+If you've opted for Gulp as front-end pipeline, the project comes configured with `Sass`_ compilation. As you change you Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets.
 
 #. Make sure that `Node.js`_ v16 is installed on your machine.
 #. In the project root, install the JS dependencies with::
@@ -166,13 +166,12 @@ If you've opted for Gulp as front-end pipeline, the project comes configured wit
 
     $ npm run dev
 
-   The app will now run with live reloading enabled, applying front-end changes dynamically.
+   The app will now run Sass and javascript compilation. [django-browser-reload](https://github.com/adamchainz/django-browser-reload) will detect those changes and will refresh your current tab automatically
 
 .. note:: The task will start 2 processes in parallel: the static assets build loop on one side, and the Django server on the other. You do NOT need to run Django as your would normally with ``manage.py runserver``.
 
 .. _Node.js: http://nodejs.org/download/
 .. _Sass: https://sass-lang.com/
-.. _live reloading: https://browsersync.io
 
 Summary
 -------

{{cookiecutter.project_slug}}/config/settings/local.py

@@ -53,9 +53,12 @@
 # django-debug-toolbar
 # ------------------------------------------------------------------------------
 # https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#prerequisites
-INSTALLED_APPS += ["debug_toolbar"]  # noqa F405
+INSTALLED_APPS += ["debug_toolbar", "django_browser_reload"]  # noqa F405
 # https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#middleware
-MIDDLEWARE += ["debug_toolbar.middleware.DebugToolbarMiddleware"]  # noqa F405
+MIDDLEWARE += [  # noqa F405
+    "debug_toolbar.middleware.DebugToolbarMiddleware",  # noqa F405
+    "django_browser_reload.middleware.BrowserReloadMiddleware",  # noqa F405
+]  # noqa F405
 # https://django-debug-toolbar.readthedocs.io/en/latest/configuration.html#debug-toolbar-config
 DEBUG_TOOLBAR_CONFIG = {
     "DISABLE_PANELS": ["debug_toolbar.panels.redirects.RedirectsPanel"],

{{cookiecutter.project_slug}}/config/urls.py

@@ -70,3 +70,8 @@
         import debug_toolbar
 
         urlpatterns = [path("__debug__/", include(debug_toolbar.urls))] + urlpatterns
+
+    if "django_browser_reload" in settings.INSTALLED_APPS:
+        urlpatterns = [
+            path("__reload__/", include("django_browser_reload.urls"))
+        ] + urlpatterns

{{cookiecutter.project_slug}}/gulpfile.js

@@ -8,14 +8,12 @@ const pjson = require('./package.json')
 
 // Plugins
 const autoprefixer = require('autoprefixer')
-const browserSync = require('browser-sync').create()
 const concat = require('gulp-concat')
 const cssnano = require ('cssnano')
 const imagemin = require('gulp-imagemin')
 const pixrem = require('pixrem')
 const plumber = require('gulp-plumber')
 const postcss = require('gulp-postcss')
-const reload = browserSync.reload
 const rename = require('gulp-rename')
 const sass = require('gulp-sass')(require('sass'))
 const spawn = require('child_process').spawn
@@ -123,42 +121,10 @@ function runServer(cb) {
 }
 {%- endif %}
 
-// Browser sync server for live reload
-function initBrowserSync() {
-  browserSync.init(
-    [
-      `${paths.css}/*.css`,
-      `${paths.js}/*.js`,
-      `${paths.templates}/*.html`
-    ], {
-      {%- if cookiecutter.use_docker == 'y' %}
-      // https://www.browsersync.io/docs/options/#option-open
-      // Disable as it doesn't work from inside a container
-      open: false,
-      {%- endif %}
-      // https://www.browsersync.io/docs/options/#option-proxy
-      proxy:  {
-        {%- if cookiecutter.use_docker == 'n' %}
-        target: '127.0.0.1:8000',
-        {%- else %}
-        target: 'django:8000',
-        {%- endif %}
-        proxyReq: [
-          function(proxyReq, req) {
-            // Assign proxy "host" header same as current request at Browsersync server
-            proxyReq.setHeader('Host', req.headers.host)
-          }
-        ]
-      }
-    }
-  )
-}
-
 // Watch
 function watchPaths() {
   watch(`${paths.sass}/*.scss`{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}, styles)
-  watch(`${paths.templates}/**/*.html`{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}).on("change", reload)
-  watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`]{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}, scripts).on("change", reload)
+  watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`]{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}, scripts)
 }
 
 // Generate all assets
@@ -178,7 +144,6 @@ const dev = parallel(
   runServer,
   {%- endif %}
   {%- endif %}
-  initBrowserSync,
   watchPaths
 )
 

{{cookiecutter.project_slug}}/package.json

@@ -7,7 +7,6 @@
     "gulp-concat": "^2.6.1",
     "@popperjs/core": "^2.10.2",
     "autoprefixer": "^10.4.0",
-    "browser-sync": "^2.27.7",
     "cssnano": "^5.0.11",
     "gulp": "^4.0.2",
     "gulp-imagemin": "^7.1.0",

{{cookiecutter.project_slug}}/requirements/local.txt

@@ -46,3 +46,4 @@ django-debug-toolbar==3.4.0  # https://github.com/jazzband/django-debug-toolbar
 django-extensions==3.1.5  # https://github.com/django-extensions/django-extensions
 django-coverage-plugin==2.0.3  # https://github.com/nedbat/django_coverage_plugin
 pytest-django==4.5.2  # https://github.com/pytest-dev/pytest-django
+django-browser-reload==1.6.0 # https://github.com/adamchainz/django-browser-reload