Intuition

When you have the browser-sync running on http://localhost:3000 in radix sync after running npm run watch, attempt of shareing the http://localhost:3000 via ngrok http https://localhost:3000 seems to succeed, but does not will not have browser-sync enabled:

2025-07-16T164432

Resolution

To resolve this, we will need to add a environmental variable in the .evn.local file and add a variable pointing to the domain of your ngrok. (First run ngrok as you would usually do to get the URL)

1
2
3
4
5
6
7
8

ngrok http https://localhost:3000
     ngrok                        (Ctrl+C to quit)
     Session Status                online                                                                   
     Account                       suowei.h@gmail.com (Plan: Free)                                          
     Version                       3.23.3                                                                   
     Region                        Australia (au)                                                           
     Web Interface                 http://127.0.0.1:4040                                                    
+    Forwarding                    https://xyz1234567890.ngrok-free.app -> https://localhost:3000            

1
2

  DRUPAL_BASE_URL=https://dddev.example.com
+ NGROK__BASE_URL=https://xyz1234567890.ngrok-free.app

Then amend your webpack.mix.js file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

mix.browserSync({
      proxy: process.env.DRUPAL_BASE_URL,
+    socket: {
+      domain: process.env.NGROK__BASE_URL
+    },
      files: [
        'components/**/*.css',
        'components/**/*.js',
        'components/**/*.twig',
        'templates/**/*.twig',
        'build/css/*.css',
        'build/js/*.js',
      ],
      stream: true,
});

And re-run npm run watch as you normally do, and the browser-sync will now work as expected: (but now the localhost:3000 will now longer have the browser-sync anymore)

2025-07-16T181857

Reference

  • Laravel Mix, Browersync and ngrok playing happily….. (link)