mirror of
https://github.com/cookiecutter/cookiecutter-django.git
synced 2025-09-20 10:52:34 +03:00
Merge pull request #2 from MauGx3/copilot/fix-7f8f1ad2-67a9-4d92-9d69-d23ca204e850
Replace browser-sync with django-browser-reload for auto-reload functionality
This commit is contained in:
Maurício Gioachini
GitHub
commit
c7dc7b18ed
|
|
@ -216,7 +216,7 @@ You can also use Django admin to queue up tasks, thanks to the `django-celerybea
|
|||
Using Webpack or Gulp
|
||||
---------------------
|
||||
|
||||
If you've opted for Gulp or Webpack as front-end pipeline, the project comes configured with `Sass`_ compilation and `live reloading`_. As you change your 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 or Webpack as front-end pipeline, the project comes configured with `Sass`_ compilation. As you change your Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets. The project also uses `django-browser-reload`_ to automatically refresh your browser when changes are detected.
|
||||
|
||||
#. Make sure that `Node.js`_ v18 is installed on your machine.
|
||||
#. In the project root, install the JS dependencies with::
|
||||
|
|
@ -227,7 +227,7 @@ If you've opted for Gulp or Webpack as front-end pipeline, the project comes con
|
|||
|
||||
npm run dev
|
||||
|
||||
This will start 2 processes in parallel: the static assets build loop on one side, and the Django server on the other.
|
||||
This will start 2 processes in parallel: the static assets build loop on one side, and the Django server on the other. `django-browser-reload`_ will detect changes to your Python, CSS, and JavaScript files and will refresh your current browser tab automatically.
|
||||
|
||||
#. Access your application at the address of the ``node`` service in order to see your correct styles. This is http://localhost:3000 by default.
|
||||
|
||||
|
|
@ -236,7 +236,7 @@ If you've opted for Gulp or Webpack as front-end pipeline, the project comes con
|
|||
|
||||
.. _Node.js: http://nodejs.org/download/
|
||||
.. _Sass: https://sass-lang.com/
|
||||
.. _live reloading: https://browsersync.io
|
||||
.. _django-browser-reload: https://github.com/adamchainz/django-browser-reload
|
||||
|
||||
Summary
|
||||
-------
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ def update_package_json(remove_dev_deps=None, remove_keys=None, scripts=None):
|
|||
package_json = Path("package.json")
|
||||
content = json.loads(package_json.read_text())
|
||||
for package_name in remove_dev_deps:
|
||||
content["devDependencies"].pop(package_name)
|
||||
content["devDependencies"].pop(package_name, None)
|
||||
for key in remove_keys:
|
||||
content.pop(key)
|
||||
content["scripts"].update(scripts)
|
||||
|
|
|
|||
|
|
@ -58,9 +58,12 @@ INSTALLED_APPS = ["whitenoise.runserver_nostatic", *INSTALLED_APPS]
|
|||
# django-debug-toolbar
|
||||
# ------------------------------------------------------------------------------
|
||||
# https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#prerequisites
|
||||
INSTALLED_APPS += ["debug_toolbar"]
|
||||
INSTALLED_APPS += ["debug_toolbar", "django_browser_reload"]
|
||||
# https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#middleware
|
||||
MIDDLEWARE += ["debug_toolbar.middleware.DebugToolbarMiddleware"]
|
||||
MIDDLEWARE += [
|
||||
"debug_toolbar.middleware.DebugToolbarMiddleware",
|
||||
"django_browser_reload.middleware.BrowserReloadMiddleware",
|
||||
]
|
||||
# https://django-debug-toolbar.readthedocs.io/en/latest/configuration.html#debug-toolbar-config
|
||||
DEBUG_TOOLBAR_CONFIG = {
|
||||
"DISABLE_PANELS": [
|
||||
|
|
|
|||
|
|
@ -80,3 +80,9 @@ if settings.DEBUG:
|
|||
path("__debug__/", include(debug_toolbar.urls)),
|
||||
*urlpatterns,
|
||||
]
|
||||
|
||||
if "django_browser_reload" in settings.INSTALLED_APPS:
|
||||
urlpatterns = [
|
||||
path("__reload__/", include("django_browser_reload.urls")),
|
||||
*urlpatterns,
|
||||
]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import pjson from './package.json' with {type: 'json'};
|
|||
|
||||
// Plugins
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import browserSyncLib from 'browser-sync';
|
||||
import concat from 'gulp-concat';
|
||||
import tildeImporter from 'node-sass-tilde-importer';
|
||||
import cssnano from 'cssnano';
|
||||
|
|
@ -21,8 +20,6 @@ import * as dartSass from 'sass';
|
|||
import gulUglifyES from 'gulp-uglify-es';
|
||||
import { spawn } from 'node:child_process';
|
||||
|
||||
const browserSync = browserSyncLib.create();
|
||||
const reload = browserSync.reload;
|
||||
const sass = gulpSass(dartSass);
|
||||
const uglify = gulUglifyES.default;
|
||||
|
||||
|
|
@ -129,42 +126,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
|
||||
|
|
@ -173,12 +138,12 @@ const build = parallel(styles, scripts, vendorScripts, imgCompression);
|
|||
// Set up dev environment
|
||||
{%- if cookiecutter.use_docker == 'n' %}
|
||||
{%- if cookiecutter.use_async == 'y' %}
|
||||
const dev = parallel(asyncRunServer, initBrowserSync, watchPaths);
|
||||
const dev = parallel(asyncRunServer, watchPaths);
|
||||
{%- else %}
|
||||
const dev = parallel(runServer, initBrowserSync, watchPaths);
|
||||
const dev = parallel(runServer, watchPaths);
|
||||
{%- endif %}
|
||||
{%- else %}
|
||||
const dev = parallel(initBrowserSync, watchPaths);
|
||||
const dev = parallel(watchPaths);
|
||||
{%- endif %}
|
||||
|
||||
task('default', series(build, dev));
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
"autoprefixer": "^10.4.0",
|
||||
"babel-loader": "^10.0.0",
|
||||
"bootstrap": "^5.2.3",
|
||||
"browser-sync": "^3.0.2",
|
||||
"css-loader": "^7.1.2",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"concurrently": "^9.0.0",
|
||||
|
|
|
|||
|
|
@ -39,3 +39,4 @@ django-debug-toolbar==6.0.0 # https://github.com/jazzband/django-debug-toolbar
|
|||
django-extensions==4.1 # https://github.com/django-extensions/django-extensions
|
||||
django-coverage-plugin==3.1.1 # https://github.com/nedbat/django_coverage_plugin
|
||||
pytest-django==4.11.1 # https://github.com/pytest-dev/pytest-django
|
||||
django-browser-reload==1.15.0 # https://github.com/adamchainz/django-browser-reload
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user