### Install DDEV Browsersync Add-on

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Installs the DDEV Browsersync add-on using the DDEV add-on system and restarts DDEV to apply changes. It also includes a command to verify the installation by describing the DDEV environment.

```bash
# Install the add-on
ddev add-on get ddev/ddev-browsersync

# Restart DDEV to apply changes
ddev restart

# Verify installation
ddev describe
# Should show port 3000 exposed for browsersync
```

--------------------------------

### Install DDEV Browsersync Add-on

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

Installs the ddev-browsersync add-on using the ddev CLI and restarts the DDEV environment. After installation, it's recommended to commit the .ddev directory to version control.

```bash
ddev add-on get ddev/ddev-browsersync
ddev restart
```

--------------------------------

### Start Browsersync Watcher and Launch Page

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

Demonstrates how to start the Browsersync watcher server and then launch the Browsersync page using DDEV commands. The watcher command proxies Browsersync, and the launch command opens the site in the browser.

```bash
$ ddev browsersync
Proxying Browsersync on https://mysite.ddev.site:3000
[Browsersync] Proxying: http://localhost
[Browsersync] Watching files...

$ ddev launch :3000
# The site should briefly display "Browsersync: connect"
# in the top right corner, confirming it is connect to the server.
```

--------------------------------

### Auto-start Browsersync with DDEV Post-start Hook

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Configures Browsersync to start automatically when DDEV starts using post-start hooks defined in `.ddev/config.browsersync-extras.yaml`. This ensures Browsersync is ready upon DDEV startup.

```bash
# Create the hooks configuration file
cat <<'EOF' > .ddev/config.browsersync-extras.yaml
hooks:
    post-start:
        - exec-host: bash -c "ddev browsersync &"
        - exec-host: ddev launch :3000
EOF

# Restart DDEV to apply the hooks
ddev restart

# Browsersync will now start automatically and open the browser
# on every `ddev start` or `ddev restart`
```

--------------------------------

### TYPO3 Site Configuration Example

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

This YAML snippet shows a TYPO3 site configuration example for resolving 'No site configuration found / 404 Error'. It demonstrates setting the base URL to 'http' even if the frontend uses 'https'.

```yaml
base: http://examplehost.ddev.site/
```

--------------------------------

### Start Laravel Mix Watcher with Browsersync

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Starts the Laravel Mix watcher process within the DDEV container, enabling Browsersync for hot module reloading. It shows the expected output and access URLs.

```bash
# Start Laravel Mix with Browsersync
ddev exec npm run watch

# Expected output:
# [Browsersync] Proxying: http://localhost:3000
# [Browsersync] Access URLs:
#  ---------------------------------------------------
#        Local: http://localhost:3000
#     External: http://browsersync-demo.ddev.site:3000
#  ---------------------------------------------------

# Access via HTTPS at https://browsersync-demo.ddev.site:3000
```

--------------------------------

### Start Laravel Mix Watcher and Observe Browsersync Output

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

Starts the Laravel Mix watch process, which in turn initiates Browsersync. The output shows Browsersync proxying to localhost and provides the access URLs for the Browsersync service.

```shell
ddev exec npm run watch
...
[Browsersync] Proxying: http://localhost:3000
[Browsersync] Access URLs:
 ---------------------------------------------------
       Local: http://localhost:3000
    External: http://browsersync-demo.ddev.site:3000
 ---------------------------------------------------

- Browsersync will be running on **HTTPS** at https://browsersync-demo.ddev.site:3000
```

--------------------------------

### Start Browsersync Watcher

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Launches the Browsersync watcher server to monitor file changes and proxy the DDEV site. It shows the expected output and instructions for accessing the site via Browsersync.

```bash
# Start the browsersync watcher
ddev browsersync

# Expected output:
# Proxying Browsersync on https://mysite.ddev.site:3000
# [Browsersync] Proxying: http://localhost
# [Browsersync] Watching files...

# In another terminal, launch the browser to the Browsersync URL
ddev launch :3000

# The site will briefly display "Browsersync: connect" in the top right corner
# confirming the connection to the watcher server
```

--------------------------------

### Configure Auto-start Browsersync on DDEV Post-Start Hook

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

Configures DDEV to automatically start the Browsersync watcher server and launch the Browsersync page whenever the DDEV environment starts. This is achieved by adding a post-start hook to the DDEV configuration.

```yaml
cat <<'EOF' > .ddev/config.browsersync-extras.yaml
hooks:
    post-start:
        - exec-host: bash -c "ddev browsersync &"
        - exec-host: ddev launch :3000
EOF

ddev restart
```

--------------------------------

### WordPress wp-config.php Before Browsersync Add-on

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

This PHP code snippet shows the default WordPress wp-config.php file before the Browsersync add-on is installed. It defines WP_HOME and WP_SITEURL.

```php
/** WP_HOME URL */
defined( 'WP_HOME' ) || define( 'WP_HOME', 'https://projectname.ddev.site' );

/** WP_SITEURL location */
defined( 'WP_SITEURL' ) || define( 'WP_SITEURL', WP_HOME . '/' );
```

--------------------------------

### WordPress wp-config.php After Browsersync Add-on

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

This PHP code snippet illustrates the modified wp-config.php file after the Browsersync add-on is installed. It includes the Browsersync configuration file before defining WP_HOME and WP_SITEURL.

```php
/** Include WP_HOME and WP_SITEURL settings required for Browsersync. */
if ( ( file_exists( __DIR__ . '/wp-config-ddev-browsersync.php' ) ) ) {
    include __DIR__ . '/wp-config-ddev-browsersync.php';
}

/** WP_HOME URL */
defined( 'WP_HOME' ) || define( 'WP_HOME', 'https://projectname.ddev.site' );

/** WP_SITEURL location */
defined( 'WP_SITEURL' ) || define( 'WP_SITEURL', WP_HOME . '/' );
```

--------------------------------

### Configure WordPress for DDEV Browsersync (PHP)

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Automatically creates a PHP configuration file to handle dynamic URLs for WordPress projects, allowing any domain/port for Browsersync's :3000 URLs.

```php
<?php
// wp-config-ddev-browsersync.php (automatically created)
// Allows any domain/port so WordPress permits browsersync's :3000 URLs

if ( ! empty( $_SERVER['SERVER_PORT'] ) && ! empty( $_SERVER['SERVER_NAME'] ) ) {
    $domain = sprintf(
        '%s://%s',
        $_SERVER['SERVER_PORT'] == 80 ? 'http' : 'https',
        $_SERVER['SERVER_NAME']
    );

    /** WP_HOME URL */
    define( 'WP_HOME', $domain );

    /** WP_SITEURL location */
    define( 'WP_SITEURL', $domain );
}

```

```php
// wp-config.php modification (automatically applied)
/** Include for ddev-browsersync to modify WP_HOME and WP_SITEURL. */
$ddev_browsersync_settings = __DIR__ . '/wp-config-ddev-browsersync.php';
if ( getenv( 'IS_DDEV_PROJECT' ) == 'true' && is_readable( $ddev_browsersync_settings ) ) {
    require_once( $ddev_browsersync_settings );
}

// Include for settings managed by ddev.
// ... rest of wp-config.php

```

--------------------------------

### Increase File Watcher Limits (Bash)

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Addresses 'System limit for number of file watchers reached' errors by increasing system limits. Provides commands for Colima, Docker Desktop on Mac and Windows, and Linux hosts.

```bash
# For Colima users
colima ssh
sudo sysctl fs.inotify.max_user_watches  # Check current limit
sudo sysctl -w fs.inotify.max_user_watches=2048576  # Increase limit

# For Docker Desktop on Mac
docker run -it --privileged --pid=host justincormack/nsenter1
sysctl -w fs.inotify.max_user_watches=1048576

# For Docker Desktop on Windows (edit ~/.wslconfig)
cat <<'EOF' >> ~/.wslconfig
[wsl2]
kernelCommandLine = "fs.inotify.max_user_watches=1048576"
EOF

# For Linux hosts (persistent configuration)
echo "fs.inotify.max_user_watches=1048576" | sudo tee /etc/sysctl.d/local.conf
sudo sysctl -p /etc/sysctl.d/local.conf

```

--------------------------------

### Increase File Watcher Limit on Colima

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

This command demonstrates how to increase the system limit for the number of file watchers on Colima. This is useful for troubleshooting 'System limit for number of file watchers reached' errors.

```bash
sudo sysctl -w fs.inotify.max_user_watches=2048576
```

--------------------------------

### Increase File Watcher Limit on Docker Desktop for Mac

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

This command demonstrates how to increase the system limit for the number of file watchers on Docker Desktop for Mac. This is useful for troubleshooting 'System limit for number of file watchers reached' errors.

```bash
docker run -it --privileged --pid=host justincormack/nsenter1 sysctl -w fs.inotify.max_user_watches=1048576
```

--------------------------------

### Configure TYPO3 Base URL for Browsersync Proxy (YAML)

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Configures the TYPO3 base URL to work with Browsersync proxy. It suggests using the http protocol even if the frontend uses https, or commenting out the base line to use relative URLs.

```yaml
# config/sites/main/config.yaml
# Use http protocol even though frontend uses https
base: http://examplehost.ddev.site/

# Alternative: Comment out the base line to use relative URLs
# base: /

```

--------------------------------

### Increase File Watcher Limit on Docker Desktop for Windows

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

This configuration snippet shows how to increase the system limit for the number of file watchers on Docker Desktop for Windows by editing the .wslconfig file. This is useful for troubleshooting 'System limit for number of file watchers reached' errors.

```conf
[wsl2]
kernelCommandLine = "fs.inotify.max_user_watches=1048576"
```

--------------------------------

### BrowserSync Configuration File

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Customizes Browsersync's file watching behavior using a JavaScript configuration file (`.ddev/browser-sync.cjs`). It utilizes DDEV environment variables for dynamic configuration.

```javascript
// .ddev/browser-sync.cjs
// Environment variables provided by DDEV
let docroot = process.env.DDEV_DOCROOT;
let filesdir = process.env.DDEV_FILES_DIR;
let url = process.env.DDEV_HOSTNAME;
let nonSslUrl = process.env.DDEV_PRIMARY_URL.replace(/^https:/, 'http:');

if (filesdir === "") {
    filesdir = null;
}

module.exports = {
    // Files and directories to watch for changes
    files: [docroot, "app", "resources/views/**/*.php"],

    // Patterns to ignore (reduces CPU/disk load)
    ignore: ["node_modules", filesdir, "vendor"],

    // Don't auto-open browser
    open: false,

    // Disable Browsersync UI
    ui: false,

    // Use proxy mode (not standalone server)
    server: false,

    // Proxy configuration pointing to DDEV's internal URL
    proxy: {
        target: nonSslUrl
    },

    // Host for external access
    host: url,
};
```

--------------------------------

### Increase File Watcher Limit on Linux

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

This configuration file path indicates where to change the system limit for the number of file watchers on Linux. This is useful for troubleshooting 'System limit for number of file watchers reached' errors.

```bash
/etc/sysctl.d/local.conf
```

--------------------------------

### Port Configuration for Browsersync

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Configures DDEV to expose Browsersync on port 3000 using a YAML configuration file (`.ddev/config.browsersync.yaml`). This allows external access to the Browsersync service.

```yaml
# .ddev/config.browsersync.yaml
#ddev-generated
web_extra_exposed_ports:
    - name: browsersync
      container_port: 3000
      http_port: 3001
      https_port: 3000
```

--------------------------------

### Configure Laravel Mix with Browsersync

Source: https://github.com/ddev/ddev-browsersync/blob/main/README.md

Integrates Browsersync with Laravel Mix by updating the webpack.mix.js file. It sets the Browsersync proxy host using the DDEV_HOSTNAME environment variable and configures Browsersync to run without the UI.

```javascript
// Use the HOSTNAME provided by DDEV
let url = process.env.DDEV_HOSTNAME;

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .browserSync({
        proxy: "localhost",
        host:  url,
        open:  false,
        ui: false
    });
```

--------------------------------

### Optimize Browsersync Performance (JavaScript)

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Reduces the number of watched files to optimize performance by limiting watched files in the configuration. It specifies which directories and file types to watch and ignore.

```javascript
// .ddev/browser-sync.cjs - Optimized for specific file types
module.exports = {
    // Only watch specific directories and file types
    files: [
        "public/css/**/*.css",
        "public/js/**/*.js",
        "resources/views/**/*.blade.php",
        "templates/**/*.html.twig"
    ],

    // Ignore more directories to reduce load
    ignore: [
        "node_modules",
        "vendor",
        "storage",
        ".git",
        "*.log",
        "*.sql"
    ],

    open: false,
    ui: false,
    server: false,
    proxy: {
        target: process.env.DDEV_PRIMARY_URL.replace(/^https:/, 'http:')
    },
    host: process.env.DDEV_HOSTNAME,
};

```

--------------------------------

### Laravel Mix Integration with Browsersync

Source: https://context7.com/ddev/ddev-browsersync/llms.txt

Integrates Browsersync with Laravel Mix for hot module reloading. It uses the `DDEV_HOSTNAME` environment variable to configure Browsersync's proxy host.

```javascript
// webpack.mix.js
// Use the HOSTNAME provided by DDEV environment
let url = process.env.DDEV_HOSTNAME;

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .browserSync({
        proxy: "localhost",
        host: url,
        open: false,
        ui: false
    });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.