{"id":20329335,"url":"https://github.com/ddev/ddev-browsersync","last_synced_at":"2025-04-11T20:41:55.229Z","repository":{"id":37218954,"uuid":"481804435","full_name":"ddev/ddev-browsersync","owner":"ddev","description":"Auto-refresh HTTPS page on changes with DDEV","archived":false,"fork":false,"pushed_at":"2025-04-10T20:33:31.000Z","size":156,"stargazers_count":32,"open_issues_count":5,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-10T21:32:22.549Z","etag":null,"topics":["ddev-get"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ddev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["ddev"],"custom":["https://www.paypal.com/donate/?hosted_button_id=MCNCSZHC7LHSQ","https://ddev.com/support-ddev/"]}},"created_at":"2022-04-15T01:52:07.000Z","updated_at":"2025-03-28T09:27:21.000Z","dependencies_parsed_at":"2024-10-24T18:08:07.961Z","dependency_job_id":"666d13e1-1d75-43ee-9c31-a9a7bcc3c027","html_url":"https://github.com/ddev/ddev-browsersync","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":"ddev/ddev-addon-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddev%2Fddev-browsersync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddev%2Fddev-browsersync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddev%2Fddev-browsersync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddev%2Fddev-browsersync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ddev","download_url":"https://codeload.github.com/ddev/ddev-browsersync/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248478989,"owners_count":21110800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ddev-get"],"created_at":"2024-11-14T20:10:12.906Z","updated_at":"2025-04-11T20:41:55.220Z","avatar_url":"https://github.com/ddev.png","language":"Shell","funding_links":["https://github.com/sponsors/ddev","https://www.paypal.com/donate/?hosted_button_id=MCNCSZHC7LHSQ","https://ddev.com/support-ddev/"],"categories":[],"sub_categories":[],"readme":"[![tests](https://github.com/ddev/ddev-browsersync/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/ddev/ddev-browsersync/actions/workflows/tests.yml?query=branch%3Amain)\n[![last commit](https://img.shields.io/github/last-commit/ddev/ddev-browsersync)](https://github.com/ddev/ddev-browsersync/commits)\n[![release](https://img.shields.io/github/v/release/ddev/ddev-browsersync)](https://github.com/ddev/ddev-browsersync/releases/latest)\n\n# DDEV Browsersync \u003c!-- omit in toc --\u003e\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Auto-start the watcher server](#auto-start-the-watcher-server)\n- [What does this add-on do?](#what-does-this-add-on-do)\n- [Integrations](#integrations)\n  - [Laravel Mix Configuration](#laravel-mix-configuration)\n  - [WordPress Configuration Changes](#wordpress-configuration-changes)\n  - [Others](#others)\n- [Troubleshooting](#troubleshooting)\n  - [No Gateway / 502 error](#no-gateway--502-error)\n  - [Unknown command \"browsersync\" for \"ddev\"](#unknown-command-browsersync-for-ddev)\n  - [System limit for number of file watchers reached](#system-limit-for-number-of-file-watchers-reached)\n- [Credits](#credits)\n\n## Overview\n\n[Browsersync](https://browsersync.io/) is free software that features:\n\n- live reloads\n- click mirroring\n- network throttling\n\nThis add-on allows you to run [Browsersync](https://browsersync.io/) through the DDEV web service.\n\n## Installation\n\nTo install this add-on, run:\n\n```bash\nddev add-on get ddev/ddev-browsersync\nddev restart\n```\n\nAfter installation, make sure to commit the `.ddev` directory to version control.\n\n## Usage\n\n| Command | Description |\n| ------- | ----------- |\n| `ddev browsersync` | Start the watcher |\n| `ddev launch :3000` | Launch the Browsersync page |\n\nExamples:\n\n```bash\n$ ddev browsersync\nProxying Browsersync on https://mysite.ddev.site:3000\n[Browsersync] Proxying: http://localhost\n[Browsersync] Watching files...\n\n$ ddev launch :3000\n# The site should briefly display \"Browsersync: connect\"\n# in the top right corner, confirming it is connect to the server.\n```\n\n### Auto-start the watcher server\n\nYou can use DDEV's `post-start` hook to start the watcher server and launch the page when DDEV starts.\n\n```bash\ncat \u003c\u003c'EOF' \u003e .ddev/config.browsersync-extras.yaml\nhooks:\n    post-start:\n        - exec-host: bash -c \"ddev browsersync \u0026\"\n        - exec-host: ddev launch :3000\nEOF\n\nddev restart\n```\n\n## What does this add-on do?\n\n1. Checks to make sure the DDEV version is adequate.\n2. Adds `.ddev/web-build/Dockerfile.ddev-browsersync`, which installs Browsersync using npm.\n3. Adds a `browser-sync.js` to define the operation of the base setup.\n4. Adds a `.ddev/docker-compose.browsersync.yaml`, which exposes and routes the ports necessary.\n5. Adds a `ddev browsersync` shell command, which lets you easily start Browsersync when you want it.\n\nFor WordPress projects, this add-on also:\n\n- Adds a `wp-config-ddev-browser.php` file which modifies the WP_HOME and WP_SITEURL values to work with Browsersync.\n- On install, modifies the `wp-config-ddev.php` file to include the `wp-config-ddev-browser.php` file.\n\n## Integrations\n\n`ddev-browsersync` works out of the box for many project types.\nHowever, you may want to edit the `.ddev/browser-sync.js` file to specify exactly what files and directories\nshould be watched. Limiting watched files may reduce hard disk and CPU loads.\n\n### Laravel Mix Configuration\n\nDemo: \u003chttps://github.com/tyler36/browsersync-demo\u003e\n\n- Update `webpack.mix.js`\n\n```js\n// Use the HOSTNAME provided by DDEV\nlet url = process.env.DDEV_HOSTNAME;\n\nmix.js('resources/js/app.js', 'public/js')\n    .postCss('resources/css/app.css', 'public/css', [\n        //\n    ])\n    .browserSync({\n        proxy: \"localhost\",\n        host:  url,\n        open:  false,\n        ui: false\n    });\n```\n\n- Start Browsersync service\n\n```shell\nddev exec npm run watch\n...\n[Browsersync] Proxying: http://localhost:3000\n[Browsersync] Access URLs:\n ---------------------------------------------------\n       Local: http://localhost:3000\n    External: http://browsersync-demo.ddev.site:3000\n ---------------------------------------------------\n```\n\n- Browsersync will be running on **HTTPS** at `https://browsersync-demo.ddev.site:3000`\n\n### WordPress Configuration Changes\n\nThe changes this add-on makes to the `wp-config-ddev.php` file during installation can be seen below.\n\nThe `wp-config-ddev-browserync.php` file is included before the `/** WP_HOME URL */` comment.\n\nBefore:\n\n```php\n/** WP_HOME URL */\ndefined( 'WP_HOME' ) || define( 'WP_HOME', 'https://projectname.ddev.site' );\n\n/** WP_SITEURL location */\ndefined( 'WP_SITEURL' ) || define( 'WP_SITEURL', WP_HOME . '/' );\n```\n\nAfter:\n\n```php\n/** Include WP_HOME and WP_SITEURL settings required for Browsersync. */\nif ( ( file_exists( __DIR__ . '/wp-config-ddev-browsersync.php' ) ) ) {\n    include __DIR__ . '/wp-config-ddev-browsersync.php';\n}\n\n/** WP_HOME URL */\ndefined( 'WP_HOME' ) || define( 'WP_HOME', 'https://projectname.ddev.site' );\n\n/** WP_SITEURL location */\ndefined( 'WP_SITEURL' ) || define( 'WP_SITEURL', WP_HOME . '/' );\n```\n\n### Others\n\nThere are many other options to integrate Browsersync into your project, including:\n\n- [Grunt](https://browsersync.io/docs/grunt)\n- [Laravel Mix](https://laravel-mix.com/docs/4.0/browsersync)\n\nPlease see [Browsersync documentation](https://browsersync.io/docs) for more details.\n\n## Troubleshooting\n\n### No Gateway / 502 error\n\nThis error usually occurs when the watcher server is not running.\nRun `ddev browsersync` to start the server.\n\n### Typo3 No site configuration found / 404 Error\n\nSolution: The base URL (`base` in the TYPO3 site's `config.yaml` (like `config/sites/main/config.yaml` should specify `http` even though the frontend is configured for `https`. This can also be solved by commenting out the default `base` line.\n```yaml\nbase: http://examplehost.ddev.site/\n```\n\n### Unknown command \"browsersync\" for \"ddev\"\n\n\u003e :bulb: This add-on moves to a per-project command approach in v2.5.0+. You can safely delete the global `~/.ddev/commands/web/browsersync` once you’re on v2.5.0 or higher.\n\nIf you run `ddev browsersync` from a local project and get `Error: unknown command \"browsersync\" for \"ddev\"`, please reinstall the add-on.\n\n### System limit for number of file watchers reached\n\nThis error means the watcher is unable to track all the files it is tasked with watching.\nYou either have to decrease the number of files you’re watching or increase the file watcher limit.\n\n- Decrease the number of files you're watching by updating `browser-sync.js`:\n  - Limit the number of files being watch by updating `files: [...]` section\n  - Increase the number of ignored files by updating  the `ignore: []` section\n- If you use Colima, run `colima ssh` and `sudo sysctl fs.inotify.max_user_watches` to see how many watches you have. To increase it, use something like `sudo sysctl -w fs.inotify.max_user_watches=2048576`. Unfortunately, this has to be done on every Colima restart.\n- If you use Docker Desktop for Mac, `docker run -it --privileged --pid=host justincormack/nsenter1` and `sysctl -w fs.inotify.max_user_watches=1048576`. Unfortunately, this has to be done again on every Docker restart.\n- On Docker Desktop for Windows, add or edit `~/.wslconfig` with these contents:\n\n    ```conf\n    [wsl2]\n    kernelCommandLine = \"fs.inotify.max_user_watches=1048576\"\n    ```\n\n- On Linux, you can change `fs.inotify.max_user_watches` on the host in `/etc/sysctl.d/local.conf` or elsewhere.\n\n## Credits\n\nPRs for install steps for specific frameworks are welcome.\n\n**Contributed and maintained by [@tyler36](https://github.com/tyler36)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddev%2Fddev-browsersync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fddev%2Fddev-browsersync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddev%2Fddev-browsersync/lists"}