Configure tunnel with webpack-browsersync-plugin

I’ve tried adding the option to, webpack.config, etc, and I cannot for the life of me get the tunnel to expose so I may show clients my local development. Is there any way I can add the option tunnel: clientName to my options? I’m lost!

Anybody? I cannot for the life of me figure out how…

Can you post the code that you’ve tried?

Take a look at this to see how the options are set:

In try: This doesn’t work. Was on my phone so I couldn’t test it. This could still be a step in the right direction though.

new BrowserSyncPlugin({
      proxyUrl: config.proxyUrl,
      delay: 500,
      advanced: {
        browserSync: {
          tunnel: true,

I’ve tried that, and it didn’t work. It’s so convoluted, I don’t even know where to start. They make it look so easy, but I can’t wrap my head around it.

Would I add the tunnel option into the object on line 50? Also, where would I update this? Thanks for the nudge!

Adding the code in ‘advanced’ gets me a tunnel, but I keep getting firewall errors (connection refused). How do I fix that? Any help would be appreciated! :smiley:

Can you post the errors you are receiving? As well, can you post information about your local development environment (i.e. operating system, are you using Trellis? Valet? VVV? etc.). I’m sure you’ve been trying a lot of solutions, but we will need some way of confirming that these errors are reproduceable to know how to help.

For example, in my own testing, I spun up a quick Bedrock project in Valet, installed Sage with all the defaults, then added the following to the BrowserSyncPlugin options in

advanced: {
  tunnel: true,

Running yarn start shows a tunnel that only partially works and the follow errors:

TypeError: Cannot read property 'sockets' of undefined
    at EventEmitter.browser:notify (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/browser-sync/dist/internal-events.js:27:19)
    at EventEmitter.emit (events.js:180:13)
    at Object.notify (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/browser-sync/dist/public/notify.js:9:32)
    at Compiler.<anonymous> (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:17:24)
    at Compiler.applyPlugins (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:61:14)
    at applyPluginsAsync.err (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/webpack/lib/Compiler.js:495:9)
    at Compiler.applyPluginsAsyncSeries (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:195:46)
    at Compiler.compile (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/webpack/lib/Compiler.js:492:8)
    at compiler.applyPluginsAsync.err (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/webpack/lib/Compiler.js:83:18)
    at next (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.compilerInvalid (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-dev-middleware/lib/Shared.js:161:5)
    at next (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.compiler.plugin (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/webpack/lib/CachePlugin.js:48:5)
    at next (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:204:14)
    at linterSuccess (/Users/knowler/Sites/valet/bs-tunnel/web/app/themes/sage/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:37:9)
    at <anonymous>

Furthermore, at the tunnel, it seems like the page loads fine, but there are no styles. In the browser console I can see 504 errors for both main.css and main.js.

I’m using a docker WordPress image from 10up with docker compose. I get a connection refused message. Something about emitter?