Replace browser-sync with django-browser-reload for auto-reload functionality

[Copilot]

This PR implements the changes requested in issue cookiecutter#3745 to replace the JavaScript-based browser-sync with the Python-based django-browser-reload for auto-reload functionality during local development.

Problem

The existing implementation used browser-sync for live reloading, which had several issues:

• Added unnecessary JavaScript dependencies and complexity to the gulp configuration
• Had problems with multi-tab reload and concurrency
• Was not as well-integrated with Django as a Python-based solution

Solution

This PR replaces browser-sync with django-browser-reload, which provides:

• Better integration with Django projects using native Python/Django mechanisms
• Improved multi-tab reload functionality without concurrency issues
• Reduced JavaScript dependencies and simplified build pipeline
• A solution built specifically for Django by Django developers

Changes Made

Dependencies & Configuration

• Removed browser-sync dependency from package.json
• Added django-browser-reload==1.15.0 to requirements/local.txt
• Added django_browser_reload to INSTALLED_APPS in local settings
• Added django_browser_reload.middleware.BrowserReloadMiddleware to MIDDLEWARE in local settings
• Added django-browser-reload URL patterns (__reload__/) to URL configuration

Build Pipeline

• Removed browser-sync imports and initialization from gulpfile.mjs
• Removed initBrowserSync() function and related proxy configuration
• Simplified watch tasks by removing browser-sync reload callbacks
• Updated dev tasks to work without browser-sync dependency

Documentation

• Updated developing-locally.rst to reference django-browser-reload instead of browser-sync
• Removed references to browser-sync live reloading functionality
• Added explanation of how django-browser-reload automatically refreshes browser tabs

Compatibility

• Fixed post-generation hook to gracefully handle missing browser-sync package when using Webpack
• Verified compatibility with all frontend pipeline options (None, Django Compressor, Gulp, Webpack)
• Tested with both Docker and non-Docker configurations

Benefits

1. Reduced complexity: Fewer JavaScript dependencies and simpler gulp configuration
2. Better Django integration: Uses Django's native mechanisms for file watching and reload triggering
3. Improved reliability: Fixes multi-tab reload issues present in browser-sync
4. Maintained compatibility: Works with all existing frontend pipeline configurations and deployment options

Testing

All existing tests continue to pass, including:

• Project generation tests for all frontend pipeline configurations
• Ruff code quality checks for generated projects
• Both Docker and non-Docker project generation scenarios

The implementation maintains backward compatibility while providing a more robust and Django-native auto-reload solution.

Fixes cookiecutter#3745

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[MauGx3]

@copilot give an explanation behind the changes made to this file, as it seems to be the most important change to the codebase for this PR

[MauGx3]

@copilot explain the reasoning behind this change

[Copilot]

The change on line 131 adds graceful error handling when removing browser-sync from package.json. The original code used .pop(package_name) which would raise a KeyError if the package doesn't exist. Since browser-sync was removed from the default dependencies, this change ensures the post-generation hook doesn't fail when trying to remove a package that may not be present in all frontend pipeline configurations. Using .pop(package_name, None) safely removes the package if it exists or returns None if it doesn't, preventing build failures during project generation.

Fixed in commit a247d22.

[Copilot]

@copilot give an explanation behind the changes made to this [file](https://github.com/MauGx3/cookiecutter-django/pull/2/files?diff=unified#diff-8d48610dfde288385efcfdf8b943ce9d61fc820bccbe5ce606487cc...

The gulpfile.mjs changes represent the core transformation of this PR - replacing JavaScript-based browser-sync with Python-based django-browser-reload.

Key changes made:

1. Removed browser-sync imports and initialization - Eliminated the browserSyncLib import and the initBrowserSync() function that configured the proxy server
2. Simplified watch tasks - Removed browser-sync reload callbacks (.on('change', reload)) from the watch functions, since django-browser-reload handles reloading automatically
3. Removed HTML template watching - The template file watching is now handled by django-browser-reload's middleware instead of gulp
4. Eliminated proxy configuration - No longer need the complex proxy setup that forwarded requests between browser-sync and Django

This simplifies the build pipeline significantly while providing better Django integration. Instead of relying on a JavaScript proxy server, django-browser-reload uses Django's native mechanisms to detect file changes and trigger browser reloads directly.

Implemented in commit d6f7d1f.