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

sage
,
1

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": [
      "./scripts/main.js",
      "./styles/main.scss", 
      "./scripts/modules/navbar.js"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/lorem",
  "devUrl": "https://lorem.ddev.site",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

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 !

2

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
https://discourse.roots.io/t/browsersync-not-watching-changes-in-docker-for-windows/11275

3

Thanks Atari !

My devUrl should be ok : my website is working fine at https://lorem.ddev.site

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.

4

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 webpack.config.watch.js 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
      {
        open: config.open,
        proxy: {
          target: config.devUrl,
        },
        watch: config.watch,
      },
      // 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: https://lorem.ddev.site
[Browsersync] Access URLs:
 ------------------------------------
       Local: https://localhost:3000
    External: https://172.18.0.9: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 https://lorem.ddev.site 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 ?

5

You may be interested in the sage 9 fix branches:


1 Like
6

Related ddev-local issue with some promise and a potential solution, https://github.com/drud/ddev/issues/2776

7

There is now a Stack Overflow answer for this Browser Sync in DDev-Local, https://stackoverflow.com/questions/66108335/using-browser-sync-via-a-gulp-task-with-ddev-local

8

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