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

[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)

[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 :)

[virtualabishek]

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

[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.