Sage 9 - Browsersync Webpack Plugin in DDEV (Bad Gateway)?

sage
,
1

Hi,

has anybody got any luck running Sage v9 with browsersync-webpack-plugin in DDEV? I try to setup a slightly older project.

I exposed the ports in DDEV

web_extra_exposed_ports:
    - name: webpack
      container_port: 3000
      http_port: 3002
      https_port: 3000
    - name: webpack UI
      container_port: 3001
      http_port: 3003
      https_port: 3001

But haven’t had any luck with the settings yet.

const url = require('url');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browsersync-webpack-plugin');

const config = require('./config');

const target = process.env.DEVURL || config.devUrl;

/**
 * We do this to enable injection over SSL.
 */
if (url.parse(target).protocol === 'https:') {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;

  config.proxyUrl = config.proxyUrl.replace('http:', 'https:');
}

// Overwrite value from config.json if we are in a ddev project
if(process.env.IS_DDEV_PROJECT) {
	console.log('DDEV detected ... ', process.env.DDEV_PRIMARY_URL);
	config.proxyUrl =  process.env.DDEV_PRIMARY_URL+':3000';
}

module.exports = {
  output: {
    pathinfo: true,
    publicPath: config.proxyUrl + config.publicPath,
  },
  devtool: '#cheap-module-source-map',
  stats: false,
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
    }),
  ],
};

My current state is:

[BS] [HTML Injector] Running...
[Browsersync] Proxying: https://my-project.localhost
[Browsersync] Access URLs:
 ------------------------------------------------------
       Local: https://localhost:3000
    External: https://my-project.ddev.site:3000
 ------------------------------------------------------
          UI: http://localhost:3001
 UI External: http://my-project.ddev.site:3001
 ------------------------------------------------------
[Browsersync] Watching files...

But for URLs like https://my-project.ddev.site:3000/wp-content/themes/my-custom-theme/dist/fonts/Mirador.ttf → 502 Bad Gateway is returned

https://my-project.ddev.site/__webpack_hmr → not found

https://my-project.ddev.site:3001 → UI of browsersync can be opened

I only have experience with Laravel Mix in DDEV, which worked fine with a similiar output (https://github.com/ddev/ddev-browsersync?tab=readme-ov-file#laravel-mix-configuration).

Thanks very much for any hints!
Best regards,
Matthias