Skip to content

File changes not detected in WSL2 (Ubuntu) with polling enabled #2096

Open

Description

@virtualabishek

I’m using BrowserSync in a WSL2 (Ubuntu) environment on Windows 11. While BrowserSync starts successfully and proxies my PHP project, it doesn’t detect file changes or reload the browser automatically, even with --use-polling enabled.

BrowserSync Not Reloading in WSL2 (Ubuntu)

Issue Description

BrowserSync is not detecting file changes or reloading the browser in a PHP project running on WSL2 (Ubuntu) with Apache. The site is proxied through BrowserSync but does not refresh when files are modified.

Steps to Reproduce

  1. Set up a PHP project in WSL2 (Ubuntu) under /var/www/html/phpLab/day4.
  2. Install BrowserSync globally:
    sudo npm install -g browser-sync
  3. Create a bs-config.js file:
    module.exports = {
      proxy: "localhost/phpLab/day4",
      files: ["./**/*.php", "./**/*.css", "./**/*.js"],
      watchOptions: {
        usePolling: true,
        interval: 1000
      },
      ghostMode: false,
      open: false,
      reloadDelay: 500,
      injectChanges: true,
    };
  4. Start BrowserSync:
    browser-sync start --config bs-config.js --host 0.0.0.0 --watch --use-polling
  5. Make changes to files in the project directory.
  6. Observe that BrowserSync does not detect changes or reload the browser.

Expected Behavior

BrowserSync should detect file changes and reload the browser automatically when files are modified.

Actual Behavior

BrowserSync starts successfully and proxies the site, but it does not detect file changes or trigger browser reloads.


Debugging Steps Taken

1. Increased inotify watchers

Since WSL2 has limited inotify watchers by default, increased the limit:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

2. Verified file permissions

Ensured the user has the correct permissions to modify files:

sudo chown -R $USER:$USER /var/www/html/phpLab/day4
sudo chmod -R 755 /var/www/html/phpLab/day4

3. Checked BrowserSync UI

Opened http://localhost:3001 and verified that no browsers were connected under "Current Connections".


Looking for a solution to get live reloading working properly within this environment. Any help or insights are appreciated!

Environment

  • OS: Windows 11 (WSL2 with Ubuntu 22.04)
  • BrowserSync Version: 2.29.3
  • Node.js Version: 18.x
  • Project Directory: /var/www/html/phpLab/day4
  • Browser: Chrome (latest)

Image

Activity

  1. edxeth commented on Feb 19, 2025

    @edxeth

    Have you tried with absolute path instead of relative path for the files array?
    ./**/*.php -> /var/www/html/phpLab/day4/**/*.php

    I had this exact same problem with WSL2 + Dockerized PHP-FPM, so I've decided to create a custom bs-config.js file for Browsersync:

    /*
     |--------------------------------------------------------------------------
     | Browser-sync config file
     |--------------------------------------------------------------------------
     |
     | For up-to-date information about the options:
     |   http://www.browsersync.io/docs/options/
     |
     | There are more options than you see here, these are just the ones that are
     | set internally. See the website for more info.
     |
     |
     */
    
    const path = require("path");
    const resolve = (...segments) => path.join(__dirname, ...segments);
    
    const PATHS = {
      // File patterns to monitor for changes (relative to project root)
      files: [
        "src/core/Views/**/*.php",
        "src/public/css/*.css",
        "src/public/js/*.js",
      ],
    
      // Legacy watch patterns (use only for special cases)
      watch: [],
    
      // Directories/files to ignore
      ignore: ["src/vendor/**"],
    };
    
    module.exports = {
      ui: {
        port: 3001,
      },
      files: [...PATHS.files].map((pattern) => resolve(pattern)),
      watchEvents: ["change"],
      watch: [...PATHS.watch].map(resolve),
      ignore: [...PATHS.ignore].map((pattern) => resolve(pattern)),
      single: false,
      watchOptions: {
        ignoreInitial: true,
      },
      server: false,
      proxy: "localhost:80",
      port: 3000,
      middleware: false,
      serveStatic: [],
      ghostMode: {
        clicks: true,
        scroll: true,
        location: true,
        forms: {
          submit: true,
          inputs: true,
          toggles: true,
        },
      },
      logLevel: "info",
      logPrefix: "Browsersync",
      logConnections: true,
      logFileChanges: true,
      logSnippet: true,
      rewriteRules: [],
      open: "local",
      browser: "default",
      cors: true,
      hostnameSuffix: false,
      reloadOnRestart: false,
      notify: false,
      scrollProportionally: true,
      scrollThrottle: 0,
      scrollRestoreTechnique: "window.name",
      scrollElements: [],
      scrollElementMapping: [],
      reloadDelay: 0,
      reloadDebounce: 500,
      reloadThrottle: 0,
      plugins: [],
      injectChanges: true,
      startPath: null,
      minify: true,
      host: null,
      localOnly: false,
      codeSync: true,
      timestamps: true,
      clientEvents: [
        "scroll",
        "scroll:element",
        "input:text",
        "input:toggles",
        "form:submit",
        "form:reset",
        "click",
      ],
      socket: {
        socketIoOptions: {
          log: false,
        },
        socketIoClientConfig: {
          reconnectionAttempts: 50,
        },
        path: "/browser-sync/socket.io",
        clientPath: "/browser-sync",
        namespace: "/browser-sync",
        clients: {
          heartbeatTimeout: 5000,
        },
      },
      tagNames: {
        less: "link",
        scss: "link",
        css: "link",
        jpg: "img",
        jpeg: "img",
        png: "img",
        svg: "img",
        gif: "img",
        js: "script",
      },
      injectNotification: false,
    };

    Must place it in the base root of your PHP folder and then fire it up with the following command: browser-sync start --config /var/www/html/phpLab/day4/bs-config.js

    This is how I fixed it personally, hope it helps :)

  2. virtualabishek commented on Feb 20, 2025

    @virtualabishek
    Author

    I tried what you told me, but faced the same issue. After autosaving, the page doesn't refresh. Thanks for the detailed comment!

  3. edxeth commented on Feb 20, 2025

    @edxeth

    @virtualabishek, have you tried the bs-config.js way too? What's the path to the PHP files you want to watch? I think you should run Browsersync in Windows Terminal and not in VSCode. It's definitely worth a try.

  4. denisenadal commented on Apr 15, 2025

    @denisenadal

    Hey did you ever solve this issue? I'm experiencing the same thing and would love to know how to resolve

  5. virtualabishek commented on Apr 17, 2025

    @virtualabishek
    Author

    No. I still can't solve this issue

  6. edxeth commented on Apr 23, 2025

    @edxeth

    @virtualabishek the solution I proposed does not work for you?
    Are you running browser-sync in a Docker container, maybe?

  7. virtualabishek commented on Apr 26, 2025

    @virtualabishek
    Author

    Yes, It didn't work for me. I did it on the WSL2 Ubuntu Terminal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions