diff --git a/docs/developing-locally.rst b/docs/developing-locally.rst index 2b9438059..bbeae8575 100644 --- a/docs/developing-locally.rst +++ b/docs/developing-locally.rst @@ -172,7 +172,7 @@ You can also use Django admin to queue up tasks, thanks to the `django-celerybea 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:: @@ -183,13 +183,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 ------- diff --git a/{{cookiecutter.project_slug}}/config/settings/local.py b/{{cookiecutter.project_slug}}/config/settings/local.py index a5fe0f71c..3f80b7b8b 100644 --- a/{{cookiecutter.project_slug}}/config/settings/local.py +++ b/{{cookiecutter.project_slug}}/config/settings/local.py @@ -53,9 +53,12 @@ INSTALLED_APPS = ["whitenoise.runserver_nostatic"] + INSTALLED_APPS # noqa F405 # 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"], diff --git a/{{cookiecutter.project_slug}}/config/urls.py b/{{cookiecutter.project_slug}}/config/urls.py index ab42cc103..5da7e49c7 100644 --- a/{{cookiecutter.project_slug}}/config/urls.py +++ b/{{cookiecutter.project_slug}}/config/urls.py @@ -70,3 +70,8 @@ if settings.DEBUG: 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 diff --git a/{{cookiecutter.project_slug}}/gulpfile.js b/{{cookiecutter.project_slug}}/gulpfile.js index 40d367bcd..f3987c9e3 100644 --- a/{{cookiecutter.project_slug}}/gulpfile.js +++ b/{{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 ) diff --git a/{{cookiecutter.project_slug}}/package.json b/{{cookiecutter.project_slug}}/package.json index bff0a34af..f9880f60a 100644 --- a/{{cookiecutter.project_slug}}/package.json +++ b/{{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", diff --git a/{{cookiecutter.project_slug}}/requirements/local.txt b/{{cookiecutter.project_slug}}/requirements/local.txt index 782846f82..8989007f8 100644 --- a/{{cookiecutter.project_slug}}/requirements/local.txt +++ b/{{cookiecutter.project_slug}}/requirements/local.txt @@ -46,3 +46,4 @@ django-debug-toolbar==3.8.1 # https://github.com/jazzband/django-debug-toolbar django-extensions==3.2.1 # https://github.com/django-extensions/django-extensions django-coverage-plugin==3.0.0 # 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