Configure tunnel with webpack-browsersync-plugin

jrhager · April 26, 2018, 7:27am

I’ve tried adding the option to webpack.config.watch, 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!

jrhager · April 28, 2018, 12:36am

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

knowler · April 28, 2018, 1:15am

Can you post the code that you’ve tried?

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

github.com

QWp6t/browsersync-webpack-plugin/blob/master/src/BrowserSyncWebpackPlugin.js

const EventEmitter = require('events');
const url = require('url');
const debuglog = require('util').debuglog('BrowserSyncWebpackPlugin');

const browserSync = require('browser-sync');
const merge = require('webpack-merge');

const { desire, uniq } = require('./util');

const htmlInjector = desire('bs-html-injector');
const webpackDevMiddleware = desire('webpack-dev-middleware');
const webpackHotMiddleware = desire('webpack-hot-middleware');

/**
 * BrowserSyncWebpackPlugin
 * Combines BrowserSync, webpack-dev-middleware, and webpack-hot-middleware into one ezpz plugin.
 *
 * @class BrowserSyncWebpackPlugin
 */
module.exports = class BrowserSyncWebpackPlugin extends EventEmitter {

This file has been truncated. show original

knowler · April 28, 2018, 2:15am

~~In webpack.config.watch.js 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({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
      advanced: {
        browserSync: {
          tunnel: true,
        },
      },
}),

jrhager · April 29, 2018, 5:12am

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.

jrhager · April 29, 2018, 5:14am

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

jrhager · April 29, 2018, 8:59pm

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!

knowler · April 30, 2018, 6:43am

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 webpack.config.watch.js:

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.

jrhager · May 1, 2018, 11:40am

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