Configuring Browsersync inside a ddev (docker) container and make hot realoding work

Hi guys,

I have mounted a development stack with Bedrock + Sage9 inside a ddev container (docker based container) inside a WSL2 container. I am working on a Win10 environment.

So what I’m trying to achieve is basically running a yarn start that will compile my assets and giving me access to localhost:3000 with Browsersync Hot Reloading.

My problem is : doing that, I can’t reach my website, and I can’t understand why. I suppose it comes from my Browsersync configuration, but also it may be related to the way my ddev container expose things.

Here is my Browsersync config :

  "open": false,
  "entry": {
    "main": [
    "customizer": [
  "publicPath": "/app/themes/lorem",
  "devUrl": "",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [

N.B: When I run a yarn start outside my ddev container, everything is going well ! I can reach https://localhost:3000, and Hot Reloading is working fine.

I have read a lot of things about docker based container + Browsersync or some ways to configure Browsersync, but I can’t make anything work. Also, the fact that Sage9 used the deprecated browser-sync-webpack-plugin is a little bit confusing for me….

So I will be glad if someone has a clue :slight_smile:

Thanks !

This may help:

The devUrl key is what is being proxied by webpack/Browsersync in Sage. You should be setting that to whatever the address for the Nginx container is.

I always run my builds outside my vm (trellis stack).

Windows related thread

Thanks Atari !

My devUrl should be ok : my website is working fine at

About the second link, pooling is ok for me. I run my project inside WSL2, and as mentioned when I run my builds outside my Docker container, Hot Reloading works as expected.

Well, I have some improvements !

However they imply to get rid of the deprecated plugin browsersync-webpack-plugin in favor of browser-sync-webpack-plugin

I just discover this plugin and decided to give it a try. Things are ow getting better ! However I’m not quite sure of masterise it at all.

After installing it I just adapted my to declare BrowserSyncPlugin and instanciate it properly :

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin(
      // BrowserSync options
        proxy: {
          target: config.devUrl,
      // plugin options
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false

My config.json file didn’t change.

When I run a yarn start within my ddev container, here is the terminal output :

[Browsersync] Proxying:
[Browsersync] Access URLs:
       Local: https://localhost:3000
          UI: http://localhost:3001
 UI External: http://localhost:3001

As a result, I cannot reach any of the 4 “Browsersync” access URLs…

But now, I can reach my projet URL and it does detect the change I make inside my JS, CSS, or views.

This shouldn’t be the final expected result as I should (at least) be able to access the bowsersync UI

Any thought ?

You may be interested in the sage 9 fix branches:

1 Like

Related ddev-local issue with some promise and a potential solution,

There is now a Stack Overflow answer for this Browser Sync in DDev-Local,

This topic was automatically closed after 42 days. New replies are no longer allowed.