The addon is not working properly even with basic projects based on the HTTP protocol

[ADDISON74]

OS: Windows 10 Pro
Docker: 20.10.17
DDEV: 1.21.1
Browser-Sync: 2.27.10

Steps to reproduce this issue:

1 - Create a directory named test2 and create one file inside named index.htm (a boilerplate with some text).

2 - Install globally browser-sync with the following command npm install -g browser-sync

3 - Open a Terminal in the current directory and run browser-sync start --server --files "*". The browser opens loading the index.htm file.

4 - Edit the index.htm file, save it and take a look at the browser window. Page reloads with the new content. In Windows PowerShell window you will see this information:

As you may see BrowserSync works fine. Let's test it with this DDEV addon.

5 - Create a new directory named test1 and copy inside what is in the test2 directory (index.html).

6 - Run ddev config and choose a php for "Project Type".

7 - Run ddev get drud/ddev-browsersync. As an personal comment this message seems to be wrong "Please file issues and create pull requests there to improve it.". It should be "Please report issues ...".

8 - Run ddev start. Now we can reach the project at https://test1.ddev.site or https://127.0.0.1:53834. As you can see both links use HTTPS protocol.

9 - Run ddev browsersync and you will get this information in your Terminal window:

10 - Keep CTRL pressed and click on the External link. The browser opens loading the index.htm file. It is an HTTP connection.

11 - Edit the index.htm file, save it and take a look at the browser and Terminal window. NOTHING HAPPENS, the browser is not reloading and there are no new lines in Broswersync console. If we take a look in the file .ddev/browser-sync.js we will see that docroot is mentioned in the files option. As the file index.html is in the docroot, any changes in it should be found in the browser window.

Therefore, this addon does not work even with the basic configuration on a project that only has an HTML file. It is not an HTTP/HTTPS issue because in the browser window I can load the index.html page with both HTTP and HTTPS protocols. I hope based on this report to investigate and find a fix.

Also if this addon will not be updated ASAP for HTTPS proctol it is useless. In order to use it, maybe DDEV should have a question related to the desired protocol when creating the configuration file, otherwise in the case of this addon few know which files to modify to use the HTTP protocol only, the situation in which DDEV's purpose to provide a simple and fast interface with Docker is no longer valid. This can be discussed on the DDEV project page.

[rfay]

It looks like you're expecting browsersync to be looking at files that are not listed in the config file, see

https://github.com/drud/ddev-browsersync/blob/f29f6fab1b338cb793ffa1be6a2c0335b11a251b/browser-sync.js#L12

Why don't you try adjusting that so it looks at what you're interested in and see how it goes?

I haven't seen a .htm file in many years; they used to be common on windows-only sites, but it brought back memories :)

Please remember that this is an open-source project, and community involvement is requested. Maybe you'd like to do a PR that improves the README by suggesting that people add more directories to the browsersync.js file.

[ADDISON74]

Thank you for your reply.

Here it is not about the .htm file but about the simplest configuration that I could implement to check this addon. If it doesn't work with a simple HTML file then it won't work with a framework either. I am familiar with browser-sync for a very long time and before posting I did various combinations in the browser-sync.js file, but the results were negative.

Regarding line 12, I made the following change, taking into account that index.htm is in the root.

files: ["index.htm", "/index.htm"],

Am I doing something wrong?

[rfay]

Since the tests are passing and this is in use by lots of people I imagine you're doing something wrong.

I don't think you can use a "/index.html", which would probably mean something entirely different.

I would think that just

files: ["index.htm"]

would be all you'd need if you only want to watch index.htm. If you want to watch other files or directories, add them. But not with a leading /

I'll leave you now and I'm sure the maintainer @tyler36 will have something to say, as he uses this often.

[ADDISON74]

In that array important is to match a condition. I did it before leaving only files: ["index.htm"] and nothing changed for the better. If you have some time, please try to follow my steps and you will see that I am not doing anything wrong. It would be natural for this addon to work out of the box, provided that browser-sync identifies the modified files.

[tyler36]

@ADDISON74

I tried following your steps but was unable to reproduce the problem.

Example

1. Create directory

   mkdir browsersync1
   cd browsersync1

2. Create index.html file

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <h1>Hello world</h1>
   </body>
   </html>

3. Config DDEV project, accept all defaults

   • Project name (browsersync1)
   • Docroot Location (current directory)
   • Project Type (php)

4. Add browsersync addon

   ddev get drud/ddev-browsersync

5. Start DDEV

   $ ddev start
   ...
   Project can be reached at https://browsersync1.ddev.site https://127.0.0.1:57412

6. Start browsersync

    $ ddev browsersync
    ...
     External: http://browsersync1.ddev.site:3000

7. Open http://browsersync1.ddev.site:3000/ in browser (Chrome)

   • Note: it shows flashes "Browsersync: connected" in the top right corner

8. Update "Hello world" to "Hello DDEV"

   • Terminal shows "Reloading Browsers..." and page is automatically refreshed.

It works out-of-the-box.

[tyler36]

I also have a demo project at https://github.com/tyler36/browsersync-demo based on Laravel.

ddev browsersync
...
External: http://browsersync-demo.ddev.site:3000

• Chrome redirects me to the HTTPS version (https://browsersync-demo.ddev.site:3000/)
  • Note: it flashes "Browsersync: connected" in the top right corner
• If I make a change to resources/views/welcome.blade.php, terminal shows "Reloading Browsers..." and page is automatically refreshed.

So it seems to work on HTTPS too (I should probably update the README)

[ADDISON74]

Thank you for your reply. I will check again this time using Ubuntu Desktop latest. Could you please let me know what OS did you use in your testing?

[tyler36]

Thanks for the update @ADDISON74

I'm using:

DDEV: 1.21.1
OS: Ubuntu 20.04 via WSL2 on Win10
Chrome: 105.0.5195.127 (Official Build) (64-bit)

I don't have browsersync installed locally so everything is running inside the DDEV containers.

[ADDISON74]

I created a VM in which I installed Ubuntu latest, then I installed Docker, DDEV and followed your steps. I confirm that it works without issues, but we must take into account that the DDEV project is accessible through the HTTP protocol. See bellow a screenshot:

I will configure DDEV to open the project using the HTTPS protocol. If it works this time too, it means that the issue is with the packages used in Windows. I didn't use installed globally browser-sync.

[tyler36]

I didn't use installed globally browser-sync.

In your original post, "Steps to reproduce this", step 2 says
"2 - Install globally browser-sync with the following command npm install -g browser-sync"

[ADDISON74]

The initial post contains two testing versions: one in which I show that Browser-Sync works if it is installed globally, the other in which I only use the ddev-browsersync addon. I checked a few moments ago and the issue report is not with the globally installed browser-sync package. At this moment the package is removed but the issue remains.

[ADDISON74]

I installed in Ubuntu the mkcert package to check how this addon works with the HTTPS protocol. DDEV automatically detects the existence of certificates and the project can be accessed at https://browsersync1.ddev.site. I started the addon.

1 - If I access https://browsersync1.ddev.site in the browser, any changes I make in the HTML file are not displayed in the browser (we should see Hello world 2020).

2 - If I change the protocol in the URL to http://browsersync1.ddev.site:3000 the browser displays what you see below. Any change I make to the file is displayed in the browser.

3 - If I switch back the URL to https://browsersync1.ddev.site it doesn't work.

In conclusion, this addon works only on the HTTP protocol, which is correctly mention in its README. For HTTPS protocol some changes are needed, the project URL should be the same with browsersync.

Unfortunately what I got in Ubuntu I didn't get in Windows 10 Pro based on the same configuration. I will test again in a VM (Windows 10 Pro + Docker + DDEV).

[tyler36]

@ADDISON74
You are right; it's not working on HTTPS.

I have a PR (#21) which should fix it. Please let me know if this resolves the issue.